BannerLine HTML5

Описание

BannerLine HTML5 — баннер, который представляет собой перетяжку в виде HTML5-креатива или изображений, расхлопывающуюся при определенных событиях.

Отображается поверх контента сайта, закрепляется к одной из сторон браузера и при скроллинге не меняет своего положения.

С помощью шаблона BannerLine HTML5 можно добавить баннер на сайт двумя способами:

1. Подготовить изображения и ссылку для перехода. При этом варианте возможно добавление двух изображений, которые будут расхлопываться, или же одного изображения №1 (до расхлопа).
2. Подготовить HTML-креатив.

Для подготовки проекта с HTML5-креативом рекомендуем воспользоваться готовой инструкцией для редакторов:

Возможности баннера, доступные при добавлении в Adfox:

• настройка показа кнопки Закрыть и добавление собственной кнопки;

• настройка цвета фона для изображений;

• настройка расположения баннера — к какой стороне окна браузера будет закреплен баннер;

• переопределение имен функций для расхлопа и схлопа (контейнера и креатива);

• для контейнера с баннером можно прописать собственные CSS-стили;

• настройка времени жизни расхлопа, после прошествия которого баннер будет автоматически схлопнут;

• настройка авторасхлопа двух видов:

  • автоматический расхлоп — расхлоп при инициализации с возможностью указать время, после которого баннер нужно схлопнуть;
  • cессионный расхлоп — баннер будет расхлопнут указанное количество раз индивидуально для каждого пользователя.

Пример баннера

Требования к изображениям

1. Изображения. Подготовьте одно или два изображения: первое — самостоятельный баннер-перетяжка или же баннер в схлопнутом виде (имеет меньшую высоту), второе — баннер в расхлопнутом виде (имеет большую высоту).

2. Кнопка Закрыть. При необходимости замените стандартную кнопку Закрыть на собственную, подготовьте изображение. Оно будет вставлено в баннер без изменения размеров.

3. Используйте картинки высокого разрешения, это улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера.

4. Допустимые форматы изображений: PNG, GIF, JPG.

5. Максимальный вес одного файла: 300 КБ.

6. Особенности формата для баннера с изображением:

   • особенность тач-устройств: на тач-устройствах первое касание на баннер раскрывает его, второе касание осуществляет переход по ссылке;
   • фон баннера: можно указать цвет фона для контейнера с картинкой, если он больше размеров картинки. Такая ситуация может быть, когда у баннера указано одно из значений размеров — 100% и второе фиксировано в пикселях, либо когда фиксированный размер баннера меньше размера экрана. В таком случае нарушаются пропорции контейнера, но пропорции картинки останутся неизменными. Свободное пространство будет залито одним цветом — указанным в настройках баннера. Для разных расхлопнутого и схлопнутого состояния баннера можно указывать разные цвета.

Требования к HTML5-креативу (для разработчиков кода)

1. Максимально допустимое количество символов в HTML-коде — 65 000.

2. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах:

   1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css.

   2. Файлы по весу не должны превышать 300 КБ.

   3. Загрузите файлы на вкладку Файлы рекламной кампании и подключите в HTML-код полученные ссылки на файлы:

      • Если в проекте прописаны абсолютные ссылки (src="js/script.js", src="css/style.css"), то при загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку Файлы и заменит все ссылки на эти файлы в загружаемом проекте.

      • Если в проекте прописаны относительные ссылки (например, src="../js/script.js"), воспользуйтесь одним из способов:

        • замените ссылки на файлы .js и .css на абсолютные — сработает парсинг Adfox и все ссылки будут заменены автоматически;
        • вручную загрузите файлы .js и .css на вкладку Файлы. Затем получите ссылки на эти файлы в Adfox и поменяйте в HTML-коде относительные ссылки на полученные.

      Пример подключения JS и CSS-файлов:

      <script type="text/javascript" src="ССЫЛКА_НА_ФАЙЛ"></script><link rel="stylesheet" type="text/css" href="ССЫЛКА_НА_ФАЙЛ" />
      

3. В проекте может находиться только один файл с расширением .html.

4. Максимально допустимое количество файлов в проекте — 50.

5. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, SWF.

6. Максимальный размер каждого файла (действует также для файлов внутри архива):

   • 300 КБ;
   • 1 МБ для видеофайлов.

7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.

8. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.

9. Формат готового проекта — ZIP-архив.

Функции и переменные для схлопа и расхлопа

Функционал расхлопа или схлопа подразумевает под собой увеличение или уменьшение размеров контейнера для HTML-кода.

Следовательно, изменение отображаемого содержимого в контейнере для расхлопа или схлопа осуществляется разработчиком HTML-кода баннера.

Функции доступны в глобальной области видимости. Рекомендуется использовать приставку window.перед вызовом каждой из них.

Если коду баннера необходимо знать об изменениях состояния расхлопа, которые произошли вне фрейма, нужно реализовать функции onBannerCollapse и onBannerExpand.

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

• true — баннер в состоянии расхлопа;
• false или не объявлена — баннер в состоянии схлопа.

Пример кода для кнопки расхлопа в редакторе Adobe Animate:

function expandCreative()
{
    console.log('expandCreative');
    this.main_banner.visible = false;
    this.exp_banner.visible = true;
    window.expandBanner();
}

Советы по подготовке креативов

• В баннере можно реализовать кнопки с переходом на разные страницы сайта рекламодателя.

• При изменении размера canvas, его содержимое очищается в webkit-браузерах, поэтому, если код креатива был создан самостоятельно без помощи таких редакторов как Adobe Animate, перерисовывайте canvas после изменения его размера.

• В HTML-фрейме доступен метод window.destroyBanner(), который полностью уничтожает (закрывает) BannerLine.

  Пример кода для кнопки Закрыть:

  this.close.addEventListener("click", function(e) {
          var t = e.nativeEvent;
          if(t.which == 1 || t.button == 0) {
                  window.destroyBanner();
          };
  });
  

Подсчет событий

В баннере ведется автоматический подсчет событий:

• количество закрытий баннера;
• количество расхлопов баннера.

Добавление баннера в Adfox

Чтобы добавить баннер в Adfox, выберите нужный тип баннера и шаблон BannerLine HTML5 [context].

Укажите параметры баннера:

1. Архив с HTML5 креативом — загрузите ZIP-архив с проектом, поле HTML5 код креатива должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера).

2. HTML5 код креатива — содержимое HTML-кода из архива с проектом (загружается автоматически из архива).

3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

4. TARGET ссылки — определяет, в каком окне открывать ссылку:

   • top — в текущем окне;
   • _blank — в новом окне или вкладке, в зависимости от настроек браузера.

5. Ссылка на промерочный пиксель — по умолчанию используется пиксель Adfox //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель Adfox и укажите другую ссылку.

6. Изображение №1 (до расхлопа) — изображение для баннера с картинкой до расхлопа (в схлопнутом состоянии). Возможно указание только Изображения №1 (без загрузки Изображения №2), в таком случае BannerLine будет перетяжкой без расхлопа.

7. Изображение №2 (после расхлопа) — изображение для баннера с картинкой после расхлопа (в расхлопнутом состоянии).

8. Показывать кнопку «Закрыть» (yes|no) — будет ли закрывающий (по сути, удаляющий) крестик отображаться всегда.

9. Собственная картинка кнопки «Закрыть» — загрузите картинку для кнопки Закрыть.

10. Цвет фона после расхлопа (#fff) — цвет фона контейнера с картинкой в расхлопнутом состоянии. Например, #fff, #f0f0f0, или rgba(0,0,0,0.4). По умолчанию прозрачный.

11. Цвет фона до расхлопа (#fff) — цвет фона контейнера с картинкой в схлопнутом состоянии. Например, #fff, #f0f0f0, или rgba(0,0,0,0.4). По умолчанию прозрачный.

12. BodyPadding — укажите значение отступа для тега body в пикселях.

    Баннер, расположенный сверху или снизу (параметр Расположение в значении top или bottom), автоматически добавляет отступы к элементу body (значение свойства Padding устанавливается равным высоте баннера), чтобы баннер не перекрывал контент страницы.

    Значение по умолчанию не указано, будет использоваться высота баннера.

    Для отключения образования отступов укажите нулевое значение (0 или 0 px).

    

13. Время жизни расхлопа (секунд) — время в секундах, после которого баннер будет автоматически схлопнут после автоматического или вызванного пользователем расхлопа.

14. z-index блока с баннером — CSS-свойство z-index для блока с баннером. По умолчанию 999996.

15. Ширина до расхлопа (в px или 100%) — укажите ширину баннера до расхлопа (в схлопнутом состоянии).

16. Высота до расхлопа (в px или 100%) — укажите высоту баннера до расхлопа (в схлопнутом состоянии).

17. Ширина после расхлопа (в px или 100%) — укажите ширину баннера после расхлопа (в расхлопнутом состоянии).

18. Высота после расхлопа (в px или 100%) — укажите высоту баннера после расхлопа (в расхлопнутом состоянии).

19. Расположение — к какой стороне окна браузера необходимо прикрепить баннер. От этого же параметра зависит сторона, в которую будет производиться расхлоп баннера. Расхлоп всегда направлен к центру окна браузера.

    Доступные варианты расположения:

    Вариант	Описание
    top	Баннер прикреплен к верху окна браузера и расхлоп происходит вниз.
    left	Баннер прикреплен к левой стороне окна браузера и расхлоп производится направо.
    bottom	Баннер прикреплен к нижней части окна браузера и расхлоп производится вверх.
    right	Баннер прикреплен к правой стороне окна браузера и расхлоп производится влево.

20. Кол-во авторасхлопов — количество сессионных расхлопов на одну сессию.

21. Время сессии для авторасхлопа — время сессионного расхлопа в часах. По прошествии этого времени баннер будет отображаться снова в расхлопнутом состоянии, если параметр Кол-во авторасхлопов больше 0.

22. Авторасхлоп всегда — будет ли баннер расхлопнут при инициализации. Параметр имеет приоритет над сессионным расхлопом. Возможные значения:

    • yes — показывать баннер в расхлопнутом состоянии. Для корректной работы креатива, подготовленного в редакторе AdobeAnimateСС, обязательно добавьте код в исходный файл:

      
      window.global_exp_banner = this.exp_banner;
      window.global_main_banner = this.main_banner;
      window.global_exp_banner.visible = false;
      if (window.isBannerExpanded) {
      window.global_exp_banner.visible = true;
      window.global_exp_banner.btnCollapse.visible = true;
      window.global_main_banner.visible = false;
      window.global_main_banner.btnExpand.visible = false;
      }
      else{
      window.global_exp_banner.visible = false;
      window.global_exp_banner.btnCollapse.visible = false;
      window.global_main_banner.visible = true;
      window.global_main_banner.btnExpand.visible = true;
      }
      window.global_main_banner.btnExpand.addEventListener("click", expandBanner.bind(this));
      window.global_exp_banner.btnCollapse.addEventListener("click", collapseBanner.bind(this));
      window.onBannerExpand = function()
      {
      window.callEvent(2);
      window.global_exp_banner.visible = true;
      window.global_exp_banner.btnCollapse.visible = true;
      window.global_main_banner.visible = false;
      window.global_main_banner.btnExpand.visible = false;
      }
      window.onBannerCollapse = function()
      {
      window.callEvent(3);
      window.global_exp_banner.visible = false;
      window.global_exp_banner.btnCollapse.visible = false;
      window.global_main_banner.visible = true;
      window.global_main_banner.btnExpand.visible = true;
      }
      

    • no — показывать баннер в обычном режиме, без авторасхлопывания.

23. Имя функции для вызова расхлопа контейнера — имя функции, которая будет вызвана кодом баннера, чтобы сообщить контейнеру о том, что надо изменить размер до расхлопнутого.

24. Имя функции для вызова схлопа контейнера — имя функции, которая будет вызвана кодом баннера, чтобы сообщить контейнеру о том, что надо изменить размер до схлопнутого.

25. Имя функции для вызова расхлопа креатива — имя функции, которая будет вызвана, чтобы сообщить коду баннера о том, что баннеру надо расхлопнуться.

26. Имя функции для вызова схлопа креатива — имя функции, которая будет вызвана, чтобы сообщить коду баннера о том, что баннеру надо схлопнуться.

27. Стили для контейнера баннера — произвольные стили для контейнера баннера одной строкой, кроме стилей: position, z-index, top, left, right, bottom, width, height, display. Например, border: 1px solid red;. Невалидные значения будут игнорироваться браузером.

28. Имя атрибута class контейнера баннера — укажите имя (или несколько имен через пробел) для атрибута class контейнера с баннером.

29. Настройка рекламной метки:

    • В списке Метка рекламы выберите «Реклама» или «Соцреклама» — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение «Отключена».

      Примечание

      Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем.

    • В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение Реклама или Соцреклама).

30. Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню  в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).

    В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации».

    Примечание

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

31. Маркировка рекламы — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически.

    Примечание

    Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР.

Обратиться в службу поддержки

Написать в чат

Написать письмо