BannerLine HTML5

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

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

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

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

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

Adobe Animate CC

1. На разных слоях разместите два symbol, которые будут соответствовать баннеру в схлопнутом и расхлопнутом состояниях.

   Если нужна кнопка Закрыть, добавьте ее в Movie clip расхлопнутого состояния.

   Укажите instance names.

   Рекомендуем использовать instance names: expanded, collapsed и closed для расхлопнутого, схлопнутого состояния и кнопки Закрыть соответственно. Тогда можно без изменений перенести примеры кодов из этой инструкции в Animate.

   См. также:

   Инструкция по добавлению кнопки и назначению instance name

   Кнопка на главной сцене

   1. Создайте на сцене какой-нибудь объект, например, с помощью Rectangle Tool. Затем выделите его и в контекстном меню выберите Convert to Symbol....

      

   2. В появившемся диалоговом окне выберите Type: Button, Name можно оставить без изменений, нажмите Ok.

      

   3. Назначьте этой кнопке Instance Name, чтобы работал клик.

      

   4. Пропишите в Actions для этой кнопки код:

      window.buttons.push(
      //Пропишите через запятую пути кнопок, добавив вначале this
      this.button1
      //Конец места для кнопок
      );

      

      Вложенная кнопка

   1. Допустим, что кнопка находится внутри другого символа, например, внутри Movie Clip. В данном примере этому Movie Clip задано Instance Name «name».

      

   2. По двойному клику перейдите внутрь name, там будет вложенная кнопка.

      

   3. При указании в Actions пути до такой кнопки, нужно будет добавить Instance Name объекта после this, в который она вложена:

      window.buttons.push(
      //Пропишите через запятую пути кнопок, добавив вначале this
      this.name.button1
      //Конец места для кнопок
      );

   Инструкция по созданию прозрачных кнопок

   1. Выделите нужный элемент и преобразуйте его в символ.

      

   2. Укажите название и выберите Type: Button.

      

   3. С помощью двойного клика по символу перейдите в него:

      

   4. Сделайте insert keyframe в кадр hit.

      

   5. Удалите содержимое кадров up, over,down:

      

   6. Прозрачная кнопка готова:

      

   

2. Выберите один из шаблонов в зависимости от сценария в баннере.

   Скачайте шаблон и подключите его к проекту:

   • одна кликабельная область и расхлоп по наведению;
   • несколько кликабельных областей и расхлоп по наведению;
   • одна кликабельная область и расхлоп/схлоп по клику;
   • несколько кликабельных областей и расхлоп/схлоп по клику.

   Шаблоны для редактора Animate от 15 версии и ниже:

   • одна кликабельная область и расхлоп по наведению;
   • несколько кликабельных областей и расхлоп по наведению;
   • одна кликабельная область и расхлоп/схлоп по клику;
   • несколько кликабельных областей и расхлоп/схлоп по клику.

   

3. В зависимости от сценария работы баннера добавьте один из примеров кода в слой Actions:

   

   Одна кликабельная область и расхлоп по наведению

   //Поменяйте instance name если требуется
   expanded = this.expanded;
   collapsed = this.collapsed;
   setAdfox();

   Несколько кнопок и расхлоп по наведению

   //Поменяйте instance name если требуется
   expanded = this.expanded;
   collapsed = this.collapsed;
   window.buttons.push( 
   //Пропишите через запятую пути кнопок, добавив вначале this
    this.expanded.button1, this.expanded.button2, this.expanded.button3, this.expanded.button4
   //Конец места для кнопок 
    );
    setAdfox();

   Одна кликабельная область и расхлоп/схлоп по клику

   //Поменяйте instance name если требуется
   expanded = this.expanded;
   collapsed = this.collapsed;
   close = this.expanded.close;
   setAdfox();

   Несколько кнопок и расхлоп/схлоп по клику

   //Поменяйте instance name если требуется
   collapsed = this.collapsed;
   expanded = this.expanded;
   close = this.expanded.close;
   window.buttons.push( 
   //Пропишите через запятую пути кнопок, добавив вначале this
   this.expanded.button1, this.expanded.button2
   //Конец места для кнопок 
   );
   setAdfox();

4. Опубликуйте проект и упакуйте его в ZIP-архив.

   

5. Если вы используете вариант с несколькими кнопками, сохраните соответствие instance name кнопок и их назначение. Эта информация понадобится при добавлении HTML-креатива в интерфейс Adfox.

   Например:

   this.expanded.button1 — ссылка на страницу с товаром;

   this.expanded.button2 — ссылка на контакты.

   В интерфейсе Adfox после добавления баннера ссылки нужно прописать на вкладке События.

   Первый instance в строке кода будет соответствовать параметру Событие 1 баннера, название у события может быть любое.

   

Google Web Designer

1. Скачайте шаблон баннера для Google Web Designer.

   Код данного баннера можно брать за основу при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например:

   /Users/[USER_NAME]/Documents/Google Web Designer/templates

   

   Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:

   %request.reference_mrc%, %user1%, %eventN%, где N — номер события от 1 до 30.

2. Обработка клика.

   Все события назначаются конкретным элементам анимации через вкладку События.

   

   

   Для вызова действий используется компонент Интерактивная область.

   Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или Tap Area → Touch/Click в английской версии).

   

   На вкладке Собственный код укажите вызов функции клика.

   • если используется одна кнопка перехода:

     callClick();

   • если кнопок перехода несколько:

     callClick(n);

     где n — номер события, которое должно быть вызвано.
   • если необходимо вызвать событие из анимации без перехода, используйте следующий код:callEvent(n);

     где n — номер события, которое должно быть вызвано.

     

     

     

   Особенность реализации тянущегося (резинового) баннера.

   Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.

   

   Также используйте опции Выровнять по контейнеру и Резиновый макет на верхней панели инструментов.

   Если перед использованием каких-либо инструментов выравнивания включить Резиновый макет, при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.

   При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные в пикселях.

   Пример готового проекта в Google Web Designer, исходный файл.

3. Публикация проекта.

   Проект должен быть опубликован со следующими настройками:

   

Примечание. При добавлении баннера в Adfox менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.

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

• настройка показа кнопки Закрыть и добавление собственной кнопки;
• настройка цвета фона для изображений;
• настройка расположения баннера — к какой стороне окна браузера будет закреплен баннер;
• переопределение имен функций для расхлопа и схлопа (контейнера и креатива);
• для контейнера с баннером можно прописать собственные CSS-стили;
• настройка времени жизни расхлопа, после прошествия которого баннер будет автоматически схлопнут;
• настройка авторасхлопа двух видов:

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

1. Изображения. Подготовьте одно или два изображения: первое — самостоятельный баннер-перетяжка или же баннер в схлопнутом виде (имеет меньшую высоту), второе — баннер в расхлопнутом виде (имеет большую высоту).
2. Кнопка Закрыть. При необходимости замените стандартную кнопку Закрыть на собственную, подготовьте изображение. Оно будет вставлено в баннер без изменения размеров.
3. Используйте картинки высокого разрешения, это улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера.
4. Допустимые форматы изображений: PNG, GIF, JPG.
5. Максимальный вес одного файла: 300 КБ.
6. Особенности формата для баннера с изображением:

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

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, FLV, MP4, OGV, OGG, WEBM, AVI, SWF.
6. Максимальный размер каждого файла (действует также для файлов внутри архива):

   • 300 КБ;
   • 1 МБ для видеофайлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.
8. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.
9. Формат готового проекта — ZIP-архив.

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

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

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

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

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

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, выберите нужный тип баннера и шаблон 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) — цвет фона контейнера с картинкой в схлопнутом состuicontrolоянии. Например, #fff, #f0f0f0, или rgba(0,0,0,0.4). По умолчанию прозрачный.
12. BodyPadding — укажите значение отступа для тега body в пикселях.

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

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

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

    
13. Время жизни расхлопа (секунд) — время в секундах, после которого баннер будет автоматически схлопнут после автоматического или вызванного пользователем расхлопа.
14. Z-index — z-index блока с баннером. По умолчанию 999996.
15. Ширина до расхлопа (в px или 100%) — укажите ширину баннера до расхлопа (в схлопнутом состоянии).
16. Высота до расхлопа (в px или 100%) — укажите высоту баннера до расхлопа (в схлопнутом состоянии).
17. Ширина после расхлопа (в px или 100%) — укажите ширину баннера после расхлопа (в расхлопнутом состоянии).
18. Высота после расхлопа (в px или 100%) — укажите высоту баннера после расхлопа (в расхлопнутом состоянии).
19. Расположение — к какой стороне окна браузера необходимо прикрепить баннер. От этого же параметра зависит сторона, в которую будет производиться расхлоп баннера. Расхлоп всегда направлен к центру окна браузера.

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

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

    Вариант	Описание
    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. Маркировка рекламы — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически.

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