Статья была полезной?

Заголовок

Блог GetCourse

Как показать рекламный баннер для учеников на страницах аккаунта

Промо-баннер на страницах аккаунта — это один из самых эффективных инструментов для привлечения внимания к новым курсам, акциям или важным событиям вашей онлайн-школы. В отличие от рассылок на email и в мессенджеры или внешней рекламы, такое уведомление видит только теплая аудитория и зачастую именно в тот момент, когда она уже вовлечена в учебный процесс.


В этой статье мы разберем готовое и легкое в установке решение — скрипт рекламного баннера для GetCourse.

Важно

Код скрипта действует только на страницах со старым дизайном.

Промо-баннер в аккаунте
Промо-баннер в аккаунте

В статье:

Ссылка на это место страницы: #add

Два способа добавления скрипта

Есть два способа добавить скрипт в аккаунт:


Через настройки аккаунта — наиболее простой и быстрый способ, если у вас нет добавленного кода в настройках аккаунта. Для этого:

  1. Скопируйте код скрипта и отредактируйте согласно инструкции из раздела ниже.
  2. Оберните его в тег script: добавьте в самом начале кода открывающий тег <script>, а в самом конце — закрывающий тег </script> .
  3. Вставьте полученный код в разделе «Профиль» — «Настройки аккаунта» — «Настройки» в поле «Счетчики и прочие скрипты для BODY».
  4. Сохраните изменения.

Через тему — наиболее удобный вариант, если в настройках аккаунта у вас добавлен другой код. В таком случае код скрипта не будет загромождать окно в настройках аккаунта, и его будет легко редактировать. Чтобы добавить скрипт через тему:

  1. Скопируйте код скрипта и отредактируйте согласно инструкции из раздела ниже.
  2. Перейдите в раздел «Сайт» — «Страницы» — «Темы».
Темы
Темы
  1. Добавьте тему.
Добавьте тему
Добавьте тему
  1. Перейдите на вкладку "JS", добавьте код скрипта и сохраните изменения.
Вкладка JS
Вкладка JS
  1. Перейдите на вкладку «Настройки» и нажмите на «JS» в строке «Bundle файлы».
JS
JS
  1. Нажмите на адресную строку и скопируйте относительный адрес ссылки (начиная с /pl...).
Относительный адрес
Относительный адрес
  1. Вставьте полученный адрес в код ниже вместо надписи ссылка-на-бандл (кавычки не удаляйте). Скопируйте результат.
<script src="ссылка-на-бандл"></script>
  1. Перейдите в раздел «Профиль» — «Настройки аккаунта» — «Настройки».
  2. Вставьте скопированный код в поле «Счетчики и прочие скрипты для BODY».
  3. Сохраните изменения.
Ссылка на это место страницы: #code

Код скрипта и из чего он состоит

В этом разделе вы можете скопировать полный код скрипта со стандартными настройками и текстами-заглушками. Ниже вы найдете информацию о том, из чего он состоит и как поменять следующие настройки:

$(document).ready(function () {
 // Список страниц, где баннер НЕ должен показываться
 const pagesExclude = ['/cms/system/login', '/pl/', '/pl/lite/widget/', '/user/control', '/editor', 'editMode=1']

 // Количество часов, в течение которых баннер не показывается после закрытия
 const expirationTime = 1;

 // Ссылка при клике на баннер
 const bannerURL = 'https://getcourse.ru/';

 let bannerOn = true;

 for (let page in pagesExclude) {
   if (window.location.href.includes(pagesExclude[page])) {
     bannerOn = false;
     break
   }
 }

 if (bannerOn) {
   if (document.cookie.indexOf('account_promoBanner_Closed=1') < 0) {
     $('.gc-main-content').append(`
               <style>
                 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

                 :root {
                   /* Общие переменные */
                   --banner-font-family: 'Manrope', sans-serif; /* Шрифт */
                   --banner-background: linear-gradient(90deg, #B6D0F7 0%, #FAFCFE 40%, #CCBAE4 83.19%, #B6D0F7 100%);  /* Фоновый цвет */
                   --banner-border-color: #B6D0F7;  /* Цвет бордера */
                   --banner-border-radius: 8px;  /* Радиус скругления */

                   /* Левая часть */
                   /* Подзаголовок */
                   --banner-subtitle-text-color: #000; /* Цвет текста */
                   --banner-subtitle-weight: 500; /* Жирность */
                   --banner-subtitle-font-size: 13px; /* Размер шрифта */
                   --banner-subtitle-line-height: 120%; /* Высота строки */

                   /* Заголовок */
                   --banner-title-text-color: #000; /* Цвет текста */
                   --banner-title-weight: 900; /* Жирность */
                   --banner-title-font-size: 18px; /* Размер шрифта */
                   --banner-title-line-height: 120%; /* Высота строки */
                   --banner-title-text-transform: uppercase; /* Регистр */

                   /* Акцентный цвет */
                   --banner-mark-color: #A139F2; /* Цвет акцентного текста */

                   /* Правая часть */
                   /* Текст над кнопкой */
                   --banner-pre-btn-text-color: #000; /* Цвет текста */
                   --banner-pre-btn-weight: 600; /* Жирность */
                   --banner-pre-btn-font-size: 13px; /* Размер шрифта */
                   --banner-pre-btn-line-height: 100%; /* Высота строки */

                   /* Кнопка */
                   --banner-cta-btn-color: #fff; /* Цвет текста */
                   --banner-cta-btn-weight: 800; /* Жирность */
                   --banner-cta-btn-line-height: 110%; /* Высота строки */
                   --banner-cta-btn-font-size: 16px; /* Размер шрифта */
                   --banner-cta-btn-bg: #000; /* Фон */
                   --banner-cta-btn-border-radius: 6px; /* Радиус скругления */

                   /* Крестик (закрытие баннера) */
                   --banner-close-btn-color: #000; /* Цвет иконки закрытия баннера */
                 }

                 .gc-promo-banner {
                   position: fixed;
                   bottom: 10px;
                   left: 5px;
                   width: max-content;
                   font-family: var(--banner-font-family);
                   background: var(--banner-background);
                   padding: 8px 32px;
                   border-radius: var(--banner-border-radius);
                   border: 1px solid var(--banner-border-color);
                   z-index: 10000;
                   overflow: hidden;
                 }

                 .gc-promo-banner__content {
                   display: flex;
                   align-items: center
                 }

                 .gc-promo-banner__link {
                   color: inherit !important;
                   text-decoration: none !important;
                   outline: none !important;
                 }

                 .gc-promo-banner__leftside {
                   max-width: 320px;
                   margin-right: 32px;
                 }

                 .gc-promo-banner__subtitle {
                   color: var(--banner-subtitle-text-color);
                   font-weight: var(--banner-subtitle-weight);
                   font-size: var(--banner-subtitle-font-size);
                   line-height: var(--banner-subtitle-line-height);
                   margin-bottom: 4px;
                 }

                 .gc-promo-banner__title {
                   color: var(--banner-title-text-color);
                   font-weight: var(--banner-title-weight);
                   font-size: var(--banner-title-font-size);
                   line-height: var(--banner-title-line-height);
                   text-transform: var(--banner-title-text-transform);
                 }

                 .gc-promo-banner__mark {
                   color: var(--banner-mark-color);
                 }

                 .gc-promo-banner__rightside .gc-promo-banner__link {
                   display: flex;
                   flex-direction: column;
                   align-items: center;
                 }

                 .gc-promo-banner__pre-btn {
                   color: var(--banner-pre-btn-text-color);
                   font-weight: var(--banner-pre-btn-weight);
                   font-size: var(--banner-pre-btn-font-size);
                   line-height: var(--banner-pre-btn-line-height);
                   margin-bottom: 8px;
                 }

                 .gc-promo-banner__btn {
                   width: 100%;
                   max-width: 135px;
                   color: var(--banner-cta-btn-color);
                   font-weight: var(--banner-cta-btn-weight);
                   line-height: var(--banner-cta-btn-line-height);
                   font-size: var(--banner-cta-btn-font-size);
                   background: var(--banner-cta-btn-bg);
                   padding: 7px;
                   border-radius: var(--banner-cta-btn-border-radius);
                   border: none;
                   text-transform: uppercase;
                   transition: all .3s ease-in-out;
                 }

                 .gc-promo-banner__close-btn {
                   position: absolute;
                   top: 3px;
                   right: 6px;
                   line-height: 1.2;
                   transition: all .3s ease-in-out;
                 }

                 @media (min-width:768px) {
                   .gc-main-content.with-left-menu .gc-promo-banner {
                     left: 85px
                   }

                   .gc-promo-banner__btn:hover {
                     opacity: .8;
                   }

                   .gc-promo-banner__close-btn:hover {
                     text-decoration: none;
                     opacity: .7
                   }
                 }

                 @media (max-width:767px) {
                   :root {
                     /* Левая часть */
                     /* Подзаголовок */
                     --banner-subtitle-font-size: 12px; /* Размер шрифта */

                     /* Заголовок */
                     --banner-title-font-size: 16px; /* Размер шрифта */

                     /* Правая часть */
                     /* Текст над кнопкой */
                     --banner-pre-btn-font-size: 12px; /* Размер шрифта */

                     /* Кнопка */
                     --banner-cta-btn-font-size: 14px; /* Размер шрифта */
                   }

                   .gc-main-content.with-left-menu .gc-promo-banner {
                     bottom: 55px
                   }

                   .gc-promo-banner {
                     right: 5px;
                     max-width: calc(100% - 10px);
                     padding: 8px 30px;
                   }

                   .gc-promo-banner__leftside {
                     max-width: 265px;
                   }
                 }

                 @media (max-width:576px) {
                   :root {
                     /* Левая часть */
                     /* Подзаголовок */
                     --banner-subtitle-font-size: 10px; /* Размер шрифта */

                     /* Заголовок */
                     --banner-title-font-size: 12px; /* Размер шрифта */

                     /* Правая часть */
                     /* Текст над кнопкой */
                     --banner-pre-btn-font-size: 10px; /* Размер шрифта */

                     /* Кнопка */
                     --banner-cta-btn-font-size: 12px; /* Размер шрифта */
                   }

                   .gc-promo-banner {
                       padding: 8px 24px 8px 12px;
                   }

                   .gc-promo-banner__leftside {
                       margin-right: 16px;
                   }

                   .gc-promo-banner__pre-btn {
                     margin-bottom: 4px;
                 }
                 }
               </style>
               <div class="gc-promo-banner">
                 <div class="gc-promo-banner__content">
                   <div class="gc-promo-banner__leftside">
                     <a href="${bannerURL}" target="_blank" class="gc-promo-banner__link">
                       <div class="gc-promo-banner__subtitle">Текст подзаголовка <span class="gc-promo-banner__mark">и акцент</span></div>
                       <div class="gc-promo-banner__title">Длинный заголовок вашего баннера
                         <span class="gc-promo-banner__mark">и акцент</span>
                       </div>
                     </a>
                   </div>
                   <div class="gc-promo-banner__rightside">
                     <a href="${bannerURL}" target="_blank" class="gc-promo-banner__link">
                       <div class="gc-promo-banner__pre-btn">Присоединяйтесь!</div>
                       <button class="gc-promo-banner__btn">
                         Подробнее
                       </button>
                     </a>
                   </div>
                 </div>
                 <a href="javascript:void(0)" class="gc-promo-banner__close-btn">
                   <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <rect width="2.95799" height="14.1983" transform="matrix(0.707031 0.707183 -0.707031 0.707183 10.0386 0)" fill="var(--banner-close-btn-color)"></rect>
                     <rect width="2.95799" height="14.1983" transform="matrix(-0.707031 0.707182 -0.707031 -0.707183 12.3394 10.25)" fill="var(--banner-close-btn-color)"></rect>
                   </svg>
                 </a>
               </div>
               `);
   }
   $('body').on('click', '.gc-promo-banner__close-btn', function () {
     $('.gc-promo-banner').fadeOut().remove();
     document.cookie = 'account_promoBanner_Closed=1;path=/;max-age=' + expirationTime * 3600;
   });
 }
});
Ссылка на это место страницы: #exclude

Список страниц, на которых не нужно показывать баннер

pagesExclude — здесь вы можете изменить список страниц, на которых баннер не будет показываться. Список находится в самом начале JS-кода.

Страницы-исключения
Страницы-исключения

В код уже добавлены следующие страницы:

  • системная страница входа — /cms/system/login
  • внутренние страницы админки — /pl/
  • виджеты (не удалять из списка!) — /pl/lite/widget/
  • карточка пользователя — /user/control
  • режим редактирования страниц — /editor, editMode=1


Если нужно отобразить баннер на перечисленных выше страницах, вы можете удалить соответствующее значение (кроме виджетов!).


Также вы можете дополнить список своими значениями. Каждое значение нужно вписать в кавычках, через запятую. При этом:

  • Если вы хотите исключить показ баннера на всех страницах, имеющих схожие адреса, то достаточно будет указать только одинаковую для всех часть адреса.
    Пример: нужно исключить все страницы регистрации с адресами типа /reg_new, /registration_mk, /register и т. д. Добавьте в список значение ‘/reg’.
  • Если вы хотите исключить только конкретную страницу, добавьте ее адрес целиком.
Ссылка на это место страницы: #time

Время повторного показа

expirationTime — здесь вы можете указать время после закрытия баннера, через которое он снова будет показан пользователю. Указывается значение в часах, т. е. значение 1 означает 1 час.

Время повторного показа
Время повторного показа
Ссылка на это место страницы: #url

Ссылка при клике на баннер

bannerURL — здесь вы можете указать ссылку, по которой пользователь перейдет, если нажмет на баннер.

Ссылка при клике на баннер
Ссылка при клике на баннер
Ссылка на это место страницы: #visual

Настройки визуального отображения

Блок root — здесь вы можете отредактировать визуальное отображение баннера. Ориентируйтесь на подсказки-комментарии, за что отвечает тот или иной параметр.

Обратите внимание

Ниже в коде также есть блоки с медиазапросами — благодаря им настраивается отображение баннера на экранах разных размеров. В медиазапросах также есть возможность менять внешний вид баннера.

Медиазапросы
Медиазапросы
Медиазапросы
Медиазапросы
Ссылка на это место страницы: #text

Настройка текстов на баннере

В самом низу кода находится разметка баннера — здесь можно поменять тексты-заглушки на свои. Продвинутые пользователи смогут также скорректировать порядок элементов.

Тексты на баннере
Тексты на баннере

Остались вопросы ?

Написать в поддержку

Связанные статьи

Мы используем cookie-файлы. Это нужно для лучшей работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с этим. Подробнее