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

• Настройка рекламной плашки
• Скрипт для плашки

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

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

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

https://fitnessmama.school/pl/cms/page?folderId=199884

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

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

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

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

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

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

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

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

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

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

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

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

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

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; 
  }
  }
/* Стили для Баннер как у Геткурс */