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

Настройка рекламной плашки
Добавление ссылок через редирект 
 
 Что бы чуть упростить добавление плашки. Просто создал две страницы редиректа и добавил их в скрипт. 
 https://fitnessmama.school/pl/cms/page?folderId=199884 
 
 
 Обновление рекламной плашки 
 Чтобы заменить плашку, необходимо: 
 
 Обновить ссылку на файл с изображением. 
 Заменить ссылку на страницу, куда будет вести плашка при нажатии. 
 
 Эти изменения нужно внести на следующих страницах редиректа: 
 Страница перехода при нажатии на плашку - https://fitnessmama.school/pl/cms/page/editor?id=3811815 
 
 Картинка рекламной плашки - https://fitnessmama.school/pl/cms/page/editor?id=3811801   
 
 При загрузке картинки в хранилище, доступ должен быть настроен для всех, что бы у неавторизованных пользователей, также отображалась плашка: 
 
 
 Проверка отображения плашки 
 Что бы проверить как отображается плашка, можно открыть публично доступную страницу ГК в инкогнито. Например: https://fitnessmama.school/trainings2   
 
 
 Видео про тех. настройку плашки: 
 https://drive.google.com/file/d/1rkgeU2CIcbPFqO4nXksQx1WzejlSv0aE/view   
 
 Скрыть плашку на определенных страницах 
 
 Что бы скрыть банер на определенных страницах сайта, нужно добавь путь в рабочий скрипт: https://fitnessmama.school/pl/cms/layout/update?id=29679#js   Обновление скрипта может занять около 15 мин. 
 
 
 Отображение плашки в аккаунте 
 Что бы плашка отображалась в GC нужно установить его темой для оформления аккаунта, но для этого нужно иметь доступ. 
 Статья в GC: https://getcourse.ru/blog/816432#akk

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