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 кода баннера.

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

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

Вариант Описание
expandBanner При вызове этой функции произойдет расхлоп фрейма
collapseBanner При вызове этой функции произойдет схлоп фрейма
onBannerCollapse Если существует в глобальной области видимости, то вызывается кодом adfox, чтобы известить код баннера о произошедшем схлопе
onBannerExpand Если существует в глобальной области видимости, то вызывается кодом adfox, чтобы известить код баннера о произошедшем расхлопе

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

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

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

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

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

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

При изменении размера канваса, его содержимое очищается в 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. z-index — z-index блока с баннером. По умолчанию 999996.

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

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

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

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

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

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

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

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

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

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

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

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

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