Banner HTML5

Описание

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

Banner HTML5 - баннер, который отображает произвольное HTML-содержимое или изображение. HTML-код может представлять из себя обычную HTML страницу со стилями и скриптами. Он помещается в iframe и имеет ограниченный доступ к содержимому площадки.

С помощью шаблона "Banner HTML5 [loader]" баннер можно добавить двумя способами:
1. подготовив только изображение. Наличие ссылки для перехода в параметрах баннера регулирует кликабельность изображения.
2. подготовив HTML креатив в редакторе по инструкции:  Adobe Animate CC или Google Web Designer.
Если в баннере добавлен и HTML-код и изображение, то будет показан HTML-код.

Параметры, настраиваемые при добавлении в ADFOX:
- Ширина, высота баннера.
- Собственные css-стили для контейнера с баннером.

Разработка 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 архив.

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

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

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

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

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

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

Редактор Adobe Animate CC — Баннер с одной кнопкой

1. Скачайте шаблон для баннера с одной кликабельной областью (кнопкой).

2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий)

3. Откройте параметры публикации File → Publish Settings и подключите шаблон из пункта 1.

4. Опубликуйте проект, выбрав нужную директорию

5. Вся область баннера кликабельна и представляет собой кнопку для перехода на сайт рекламодателя. Кликовая ссылка будет подтягиваться в креатив из настроек баннера в ADFOX.

Редактор Adobe Animate CC — Баннер с несколькими кнопками

1. Скачайте шаблон для баннера с несколькими кнопками

2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий)

3. При добавлении кнопок (buttons) или вложенных в сцену клипов (movie clips) важно задавать им instance name, чтобы потом можно было добавить клик к нужным кнопкам. Рекомендуем использовать названия button1 - button9.

См. также:

• Инструкция по добавлению кнопки и назначению 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
   //Конец места для кнопок 
);

• Инструкция по созданию прозрачных кнопок

1. Выделите нужный элемент и преобразуйте его в символ

2. Укажите название и выбирите Type: Button

3. С помощью двойного клика по символу перейдите в него:

4. Сделайте insert keyframe в кадр hit

5. Удалите содержимое кадров up, over, down

6. Прозрачная кнопка готова:

4. Добавьте в проект слой Actions (в него будем добавлять код для кнопок)

5. Откройте окно для написания кода

6. Далее модифицируйте код и пропишите его в слое Actions

window.buttons.push( 
   //Пропишите через запятую пути кнопок, добавив вначале this

   //Конец места для кнопок 
);
setAdfox();

Если кнопка находится в главной сцене, то пропишите её instance name сразу после this, например

this.button1

Если кнопка находится внутри вложенной сцены, то после this пропишите сначала instance name сцены, а потом уже instance name кнопки:

this.scene_instance_name.button2

Пример итогового кода в слое Actions:

window.buttons.push( 
   //Пропишите через запятую пути кнопок, добавив вначале this
   this.button1, this.scene_instance_name.button2
   //Конец места для кнопок 
);
setAdfox();

7. Первая кнопка в строке кода будет вызывать первую ссылку из ADFOX, вторая — вторую и так далее.

Вместе с HTML креативом передайте менеджеру, который будет добавлять баннер в ADFOX, информацию о соответствии кнопок и номеров ссылок.

8. Откройте параметры публикации и подключите шаблон из первого пункта и опубликуйте проект, выбрав нужную директорию.

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

Редактор 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).

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

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

Укажите параметры баннера:

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

  2. HTML5 код креатива — загрузите zip-архив с проектом, подготовленный в HTML редакторах или вставьте HTML-код.

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

Если в баннере несколько ссылок, добавьте их во вкладке События у баннера, в поля URL перехода.
Соответствие номеров ссылок и событий уточняйте у разработчиков HTML креатива.
  1. "TARGET" ссылки - определяет в каком окне открывать ссылку:
    _top - в текущем окне;
    _blank - в новом окне или вкладке, в зависимости от настроек браузера.

  2. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.

  3. Ширина креатива (px или %) — укажите ширину баннера.

  4. Высота креатива (px или %) — укажите высоту баннера.

  5. Изображение — загрузите изображение.
    Условия показа креативов:
    - добавлен HTML-код и изображение — будет показан HTML-код.
    - добавлено изображение — будет показано изображение.
    - добавлен HTML-код — будет показан HTML-код.

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

  7. Использовать SafeFrame (yes|no) — safeFrame - это технология, которая оборачивает рекламу в специальный iframe, у которого есть строгий API. SafeFrame не даёт рекламе, которая в нём отрисовывается, собирать данные и взаимодействовать с остальной страницей вне safeFrame.
    yes - включить использование safeFrame и запретить доступ к веб-странице;
    no - не включать safeFrame. Код баннера имеет доступ к веб-странице.

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