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.

Другие редакторы

1. Подсчет кликов в баннере

Чтобы в ADFOX у баннера считалась статистика по кликам, необходимо в HTML-коде в теге а для атрибута href прописать переменную:

%banner.reference_user1%

Также для ссылок используйте атрибут target с переменной %banner.target% в значении атрибута.
Если атрибут отсутствует, то ссылка откроется внутри iframe, то есть рекламируемый сайт откроется на баннерном месте.

Пример HTML-кода для подсчета кликов по баннеру:

<a href="%banner.reference_user1%" target="%banner.target%">Сайт рекламодателя</a>   
В HTML-коде баннеров, которые будут размещаться в мобильных приложениях, для учета кликов используйте макрос: %reference%@%banner.user1%

2. Подсчет кликов с нескольких ссылок в баннере

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

<a href="http://site.ru" target="_blank">Первая ссылка</a>  
<a href="http://site.ru/about/" target="_blank">Вторая ссылка</a>

Замените значения атрибута href на переменные %request.reference%@%banner.eventN%, где вместо N должен быть номер события с 1 по 28.
Например:

<a href="%request.reference%@%banner.event1%" target="%banner.target%">Первая ссылка</a>  
<a href="%request.reference%@%banner.event2%" target="%banner.target%">Вторая ссылка</a>

Соответствие ссылок и переменных нужно сообщить менеджеру, добавляющему баннер в ADFOX. Так как при добавлении баннера нужно будет во вкладке "События" указать для События 1 первую ссылку, а для события 2 - вторую ссылку.

Первая ссылка - http://site.ru - %banner.event1% (Событие 1).
Вторая ссылка - http://site.ru/about/ - %banner.event2% (Событие 2).

3. Функции и переменные для схлопа и расхлопа

Функционал расхлопа/схлопа подразумевает под собой увеличение или уменьшение размеров контейнера для 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();
}

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

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

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

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