Рекламная плашка

Настройка рекламной плашки

Добавление ссылок через редирект

Что бы чуть упростить добавление плашки.
Просто создал две страницы редиректа и добавил их в скрипт.

Обновление рекламной плашки

Чтобы заменить плашку, необходимо:

  1. Обновить ссылку на файл с изображением.
  2. Заменить ссылку на страницу, куда будет вести плашка при нажатии.

Эти изменения нужно внести на следующих страницах редиректа:

Страница перехода при нажатии на плашку - https://fitnessmama.school/pl/cms/page/editor?id=3811815

image.png

Картинка рекламной плашки - https://fitnessmama.school/pl/cms/page/editor?id=3811801 

image.png

При загрузке картинки в хранилище, доступ должен быть настроен для всех, что бы у неавторизованных пользователей, также отображалась плашка:

image.png

Проверка отображения плашки

Что бы проверить как отображается плашка, можно открыть публично доступную страницу ГК в инкогнито.
Например: https://fitnessmama.school/trainings2 

image.png

Видео про тех. настройку плашки:

https://drive.google.com/file/d/1rkgeU2CIcbPFqO4nXksQx1WzejlSv0aE/view 

Скрыть плашку на определенных страницах

Что бы скрыть банер на определенных страницах сайта, нужно добавь путь в рабочий скрипт:
https://fitnessmama.school/pl/cms/layout/update?id=29679#js 
Обновление скрипта может занять около 15 мин.

image.png

Отображение плашки в аккаунте

Что бы плашка отображалась в GC нужно установить его темой для оформления аккаунта, но для этого нужно иметь доступ.
Статья в GC: https://getcourse.ru/blog/816432#akk

Скрипт для плашки

image.png

JS

//РЕКЛАМНАЯ ПЛАШКА

// Чтобы исключить отображение для определенной страницы, добавьте путь в массив excludedPages через запятую.
// Например: ["/cms/system/login", "/another/page", "/some/other/page"];

const excludedPages = ["/cms/system/login", "/pl/webinar/show", "/postura_login"]; 
if (!excludedPages.includes(window.location.pathname)) {

//var chek позволяет исключить отображение в определенных блоках
	var chek = $('#ltBlock2132901984, #ltBlock2140587928,); // ID формы виджета
	var cookie_max_age = 24 * 60 * 60; //Время жизни cookie в секундах.
	var delay = 1; //Задержка показа в миллисекундах, 1000 = 1 секунде.

	if (getCookie('popup_per_day') !== 'true') {
    	setTimeout(function() {

//!window.location.href.includes('/widget/') исключает отображаение плашки во всех виджетах
    	    if (chek.length == 0 && !window.location.href.includes('/widget/')) {
        	    if ($('.gc-main-content').hasClass('with-left-menu')) {
            	    $('.gc-main-content').append('<div class="info-banner menu"><a href="https://fitnessmama.school/plaska_link" target="_blank"><img class="img-responsive banner" src="https://fitnessmama.school/plaska"></a></div>');
            	} else {
                	$('.gc-main-content').append('<div class="info-banner"><a href="https://fitnessmama.school/plaska_link" target="_blank"><img class="img-responsive banner" src="https://fitnessmama.school/plaska"></a></div>');
            	}
        	} else {
            	console.log('на странице форма с ГК');

        	}

        	$('.info-banner').append('<div class="close-mybtn"></div>');
      		$('.close-mybtn').click(function() {
      	    $('.info-banner').hide();
       	    setCookie('popup_per_day', 'true', { 'max-age': cookie_max_age });
       	 });
   	 }, delay);
 	};
};

//FUNCTIONS
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

function setCookie(name, value, options = {}) {

    options = {
        path: '/',
            secure: true,
            // при необходимости добавьте другие значения по умолчанию
            ...options
    };

    if (options.expires instanceof Date) {
        options.expires = options.expires.toUTCString();
    }

    var updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

    for (var optionKey in options) {
        updatedCookie += "; " + optionKey;
        var optionValue = options[optionKey];
        if (optionValue !== true) {
            updatedCookie += "=" + optionValue;
        }
    }

    document.cookie = updatedCookie;
}

CSS

/* убрать баннер */
.common-banner-wrapper {
  display:none!important;
}

/* Стили для Баннер как у Геткурс */
  .info-banner {
    width: 400px; /*ширина изображения */ 
    height:120px; /*высота изображения */ 
    display: block; 
    position: fixed; 
    bottom: 10px; 
    left: 10px; 
    Z-index: 9;
        overflow: hidden;
        padding: 20px;
  }
  .info-banner.menu {
    width: 400px; /*ширина изображения */ 
    height:120px; /*высота изображения */ 
    display: block; 
    position: fixed; 
    bottom: 20px; 
    left: 90px; 
    Z-index: 999;
        overflow: hidden;
        padding: 20px;
  }
    .info-banner img.banner {
        border-radius: 16px; /*радиус скругления изображения*/ 
        box-shadow: 0 0 6px 2px #00000069; /*настройки тени*/
    }
.close-mybtn {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 1px #00000038;
}

.close-mybtn:before {
    content: '✕';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #000;
    font-weight: bold;
    line-height: 1;
    font-size: 14px;
    padding: 6px  6.5px;
}

  @media (max-width:  920px) {
    .info-banner {
      width: 100%; /*ширина изображения */ 
      height:auto; /*высота изображения */ 
      bottom: 10px; 
      left: 0px; 
    }
    .info-banner.menu {
      width: 100%; /*ширина изображения */ 
      height:auto; /*высота изображения */  
      bottom: 50px; 
      left: 0px; 
  }
  }
/* Стили для Баннер как у Геткурс */