Screenglide HTML5

Описание

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

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

Креатив в баннере может быть реализован в виде:
1. изображений;
2. HTML-креатива, подготовленного в редакторе по инструкции: Adobe Animate CC или Google Web Designer.

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

Пример

Пример баннера с расхлопом на сайте

Скачать:
Пример готового проекта в Adobe Animate CC, исходный файл.
Пример готового проекта в Google Web Designer, исходный файл.

Разработка HTML-креатива

1. Ознакомьтесь с требованиями к HTML-коду.

  • Максимально допустимый размер HTML-файла - 65 000 байт.
  • JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
    - сохраните js и css код в отдельные файлы с расширением .js или .css;
    - файлы по весу не должны превышать 300Кб;
    - загрузите файлы во вкладку "Файлы" рекламной кампании и полученные ссылки на файлы подключите в HTML код.

    Пример подключения js и css файлов:

    <script type="text/javascript" src="ССЫЛКА_НА_ФАЙЛ"></script>
    
    <link rel="stylesheet" type="text/css" href="ССЫЛКА_НА_ФАЙЛ" />
    
    В HTML-коде не допускается использование относительных путей к файлам.

  • В проекте может находиться только один файл с расширением .html.
  • Максимально допустимое количество файлов в проекте — 50;
  • Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
  • Максимальный размер каждого файла (действует также для файлов внутри архива):
    - 300Кб;
    - 1Мб для видео файлов.
  • Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
  • В названиях переменных и объектов нельзя использовать русские буквы.
    Исключение составляет только текст на баннере.
  • Формат готового проекта — zip архив.

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

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

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

Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие TinyPng. Данный сервис работает как с PNG, так и c JPEG.

Можно использовать SVG картинки. Они векторные, а значит они будут лучше выглядеть на всех устройствах - мобильных и десктопных. Также они имеют малый размер файла и могут быть с анимацией.

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

2. Выберите редактор, в котором будете разрабатывать HTML-креатив и кликните на соответствующую ссылку. Подготовьте архив с HTML-креативом по инструкции:

Редактор 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
   //Конец места для кнопок 
);

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.

Код данного баннера можно брать за основу при создании креативов в редакторе.

Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:
%reference%, %user1%, %eventN%, где N — номер события от 1 до 30.

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

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

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

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

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

callClick();

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

callClick(n);

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

2.3 Если необходимо вызвать событие из анимации без перехода используйте следующий код:

callEvent(n);

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

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

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

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

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

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

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

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

После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер ADFOX.

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

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

Заполните параметры баннера:

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

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

  3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).
    Если креатив в баннере реализован с помощью изображений и ссылка для перехода не указана, то баннер будет некликабельным.
    Если в HTML-креативе несколько кнопок для перехода на разные страницы сайта рекламодателя, то укажите их во вкладке "События" баннера. Соответствие кнопок и ссылок должны предоставить разработчики HTML-креатива.

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

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

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

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

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

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

  10. Имя атрибута class контейнера баннера — при необходимости укажите имя (или несколько имён через пробел) для атрибута class контейнера с баннером.

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

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

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

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

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

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

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

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

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

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