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

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 выберите нужный тип баннера и шаблон "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;". Невалидные значения будут отброшены браузером.