BannerLine HTML5

Описание

Шаблон работает только на кодах вставок, использующих библиотеку loader.js - в инструкции такие коды имеют пометку NEW.

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

С помощью шаблона "BannerLine HTML5" можно добавить баннер на сайт двумя способами:
1. подготовить изображения и ссылку для перехода. При этом варианте возможно добавление двух изображений, которые будут расхлопываться, или же одного изображения №1 (до раслопа).
2. подготовить HTML креатив.
Для разработки HTML креатива обязательно используйте технические требования для одного из редакторов:
- Adobe Animate CC;
- Google Web Designer.

Возможности баннера, доступные при добавлении в ADFOX:
- настройка показа кнопки "Закрыть" и добавление собственной кнопки.
- настройка цвета фона для изображений.
- настройка расположения баннера - к какой стороне окна браузера будет закреплен баннер.
- переопределение имён функций для расхлопа и схлопа (контейнера и креатива).
- для контейнера с баннером можно прописать собственные css-стили.
- настройка времени жизни расхлопа, после прошествия которого баннер будет автоматически схлопнут.
- настройка авторасхлопа двух видов:
автоматический расхлоп - расхлоп при инициализации с возможностью указать времени, после которого баннер нужно схлопнуть;
cессионный расхлоп - баннер будет расхлопнут указанное количество раз индивидуально для каждого пользователя.

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

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

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

Используйте картинки высокого разрешения, это кардинально улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера.
Допустимые форматы изображений: png, gif, jpg.
Максимальный вес одного файла: 300Кб.

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

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

1. Максимально допустимое количество символов в HTML коде — 65 000;
2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
- сохраните js и css код в отдельные файлы с расширением .js или .css;
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 кода баннера.

expandStart - имя функции для увеличения размеров контейнера (для расхлопа баннера).
expandEnd - имя функции для возврата размеров контейнера к исходным (для схлопа баннера).

В случае использования событий mouseover и mouseout, рекомендуется их назначать самому элементу iframe в котором находится HTML содержимое баннера. На уровне этого же элемента вызывать функции схлопа (expandEnd) и расхлопа (expandStart). Вызвано это тем, что в некоторых случаях данные события назначенные элементам внутри iframe, могут не срабатывать при их наступлении.

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

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

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

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

Креатив расхлопывается при клике на определенную область, а схлопывается при клике на другую область.
В таком случае не надо реализовывать функции functionCreativeCollapse и functionCreativeExpand, иначе баннер будет появляться при наведении на десктопе и мобайле, и скрываться при касании вне баннера.

Креатив расхлопывается при наведении, а схлопывается при клике на определенную область или по таймеру.
Время таймера может быть передано опцией, а может быть определено самим креативом. В последнем случае у креатива должна быть реализована возможность схлопнуть себя и вызвать функцию functionCollapse. Также не надо реализовывать функцию functionCreativeCollapse, иначе баннер будет скрываться на мобильных устройствах при касании вне баннера.

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

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

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

Количество закрытий баннера.

Количество расхлопов баннера.

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

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

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

  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. Время жизни расхлопа (секунд) — время в секундах, после которого баннер будет автоматически схлопнут после автоматического или вызванного пользователем расхлопа.

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

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

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

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

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

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

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

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

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

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

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

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

  8. Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Например, "border: 1px solid red;". Невалидные значения будут отброшены браузером.