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-коду

Подготовьте HTML-код, соблюдая следующие требования:

1. Максимально допустимое количество символов в 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-коде не допускается использование относительных путей к файлам.

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

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

%banner.reference_user1%

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

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

<a href="%banner.reference_user1%" target="%banner.target%">Сайт рекламодателя</a>   

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

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

<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).

Требования для HTML-кода, подготовленного в редакторах:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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