Screenglide HTML5

Описание

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

Screenglide HTML5 - интерактивный HTML5 баннер, расхлопывающийся в зависимости от действий пользователя (клик, наведение и т.д.) или автоматически, со сдвигом контента или поверх его.

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

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

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

Для разработки HTML креатива воспользуйтесь одним из редакторов: Adobe Animate CC или Google Web Designer.

Требования к проекту с HTML креативом:

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:

this.exp_banner.visible = false;

this.main_banner.btnExpand.addEventListener("click", expandBanner.bind(this));
this.exp_banner.btnCollapse.addEventListener("click", collapseBanner.bind(this));
main_creative = this.main_banner;
expanded_creative = this.exp_banner;

window.onBannerExpand = function()
{
    window.callEvent(2);
    main_creative.visible = false;
    expanded_creative.visible = true;
}

window.onBannerCollapse = function()
{
    window.callEvent(3);
    expanded_creative.visible = false;
    main_creative.visible = true;
}

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

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

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

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

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

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "Screenglide HTML5 [loader]".
Далее загрузите ваш проект в поле "Архив с HTML5 креативом", поле "HTML5 код креатива" должно оставаться пустым (оно будет заполнено содержимым .html файла вашего проекта уже после добавления баннера в систему).

Параметры баннера:

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

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

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

  4. "TARGET" ссылки - определяет в каком окне открывать ссылку:
    "_top" - в текущем окне;
    "_blank" - в новом окне или вкладке, в зависимости от настроек браузера.

  5. Ссылка на промерочный пиксель - укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой.

  6. Изображение №1 до расхлопа - если баннер состоит из изображений, то загрузите изображение наименьшего размера (до расхлопа).

  7. Изображение №2 после расхлопа - необязательное. Если баннер состоит из двух изображений, то загрузите изображение большего размера (после расхлопа).

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

  9. Сдвигать контент при расхлопе - указывает будет ли баннер сдвигать контент. Если нет, то баннер будет накрывать контент. Контет сдвигается как по горизонтали, так и по вертикали. Чтобы сдвигать по горизонтали, надо чтобы контейнер был обтекаемым элементом (Например, display: inline-block или float: left).

  10. Ширина до расхлопа (в px или 100%) - ширина креатива до расхлопа.

  11. Высота до расхлопа (в px или 100%) - высота креатива до расхлопа.

  12. Ширина после расхлопа (в px или 100%) - ширина креатива в расхлопнутом виде.

  13. Высота после расхлопа (в px или 100%) - высота креатива в расхлопнутом виде.

  14. Направление расхлопа - в какую сторону должен расхлопываться баннер:

Значение Описание
overhead_left_corner из левого верхнего угла открывать вправо – вниз
overhead_right_corner из верхнего правого угля открывать влево – вниз
lower_left_corner из нижнего левого угла открывать вправо – вверх
lower_right_corner из нижнего правого угла открывать влево – вверх
central_point из центральной точки открывать по центру
right вправо
left влево
bottom вниз
top вверх
fullscreen на весь экран
  1. Кол-во авторасхлопов - количество сессионых расхлопов на одну сессию.

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

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

  4. Время анимации (секунд) - время анимации схлопа и расхлопа в секундах.

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