Banner HTML5
Описание
Banner HTML5 — баннер, который отображает произвольное HTML-содержимое или изображение. HTML-код может представлять из себя обычную HTML-страницу со стилями и скриптами. Он помещается в iframe и имеет ограниченный доступ к содержимому площадки.
С помощью шаблона Banner HTML5 [context] баннер можно добавить двумя способами:
- Подготовив только изображение. Наличие ссылки для перехода в параметрах баннера регулирует кликабельность изображения.
- Подготовив HTML-креатив в редакторе по инструкции: Adobe Animate CC или Google Web Designer.
Если в баннере добавлен и HTML-код и изображение, будет показан HTML-код.
Параметры, настраиваемые при добавлении в Adfox:
- ширина, высота баннера;
- собственные CSS-стили для контейнера с баннером.
Разработка 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 КБ.
Требования к изображениям
Выберите редактор, в котором будете разрабатывать HTML-креатив, и кликните на соответствующую ссылку. Подготовьте архив с HTML-креативом по инструкции:
- Скачайте шаблон для баннера с одной кликабельной областью (кнопкой).
Adobe Animate CC версии 16.0 и выше
- Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий).
- Откройте параметры публикациии подключите шаблон из пункта 1.
- Опубликуйте проект, выбрав нужную директорию.
- Вся область баннера кликабельна и представляет собой кнопку для перехода на сайт рекламодателя. Кликовая ссылка будет подтягиваться в креатив из настроек баннера в Adfox.
- Скачайте шаблон для баннера с несколькими кнопками
Adobe Animate CC версии 16.0 и выше
- Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий).
- При добавлении кнопок (buttons) или вложенных в сцену клипов (movie clips) важно задавать им instance name, чтобы потом можно было добавить клик к нужным кнопкам. Рекомендуем использовать названия «button1 - button9».
- Создайте на сцене какой-нибудь объект, например, с помощью Rectangle Tool. Затем выделите его и в контекстном меню выберите Convert to Symbol....
- В появившемся диалоговом окне выберите Type: Button, Name можно оставить без изменений, нажмите Ok.
- Назначьте этой кнопке Instance Name, чтобы работал клик.
- Пропишите в Actions для этой кнопки код:
window.buttons.push(
//Пропишите через запятую пути кнопок, добавив вначале this
this.button1
//Конец места для кнопок
);
Вложенная кнопка
- Допустим, что кнопка находится внутри другого символа, например, внутри Movie Clip. В данном примере этому Movie Clip задано Instance Name« name ».
- По двойному клику перейдите внутрь name, там будет вложенная кнопка.
- При указании в Actions пути до такой кнопки, нужно будет добавить Instance Name объекта после this, в который она вложена:
window.buttons.push( //Пропишите через запятую пути кнопок, добавив вначале this this.name.button1 //Конец места для кнопок );
- Выделите нужный элемент и преобразуйте его в символ.
- Укажите название и выберите Type: Button.
- С помощью двойного клика по символу перейдите в него:
- Сделайте insert keyframe в кадр hit.
- Удалите содержимое кадров up, over,down:
- Прозрачная кнопка готова:
Инструкция по добавлению кнопки и назначению instance nameКнопка на главной сцене
Инструкция по созданию прозрачных кнопок - Добавьте в проект слой Actions (в него будем добавлять код для кнопок).
- Откройте окно для написания кода.
- Далее модифицируйте код и пропишите его в слое 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();
- Первая кнопка в строке кода будет вызывать первую ссылку из Adfox, вторая — вторую и так далее.Примечание. Вместе с HTML-креативом передайте менеджеру, который будет добавлять баннер в Adfox, информацию о соответствии кнопок и номеров ссылок.
- Откройте параметры публикации и подключите шаблон из первого пункта и опубликуйте проект, выбрав нужную директорию.
- После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox.
- Скачайте шаблон баннера для Google Web Designer.
Код данного баннера можно брать за основу при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например:
/Users/[USER_NAME]/Documents/Google Web Designer/templates
Шаблон содержит скрипт
adfox_HTML5.js
и набор параметров для корректной работы переходов и подсчета событий:%request.reference_mrc%, %user1%, %eventN%
, где N — номер события от 1 до 30. - Обработка клика.
Все события назначаются конкретным элементам анимации через вкладку События.
Для вызова действий используется компонент Интерактивная область.
Добавьте его и выберите событие
или («Tap Area > Touch/Click»
в английской версии).На вкладке Собственный код укажите вызов функции клика.
- если используется одна кнопка перехода:
callClick();
- если кнопок перехода несколько:
callClick(n);
где
n
— номер события, которое должно быть вызвано. - если необходимо вызвать событие из анимации без перехода используйте следующий код:
callEvent(n);
где
n
— номер события, которое должно быть вызвано.Особенность реализации тянущегося (резинового) баннера.
Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.
Также используйте опции Выровнять по контейнеру и Резиновый макет на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить Резиновый макет, при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные — в пикселях.
Пример готового проекта в Google Web Designer, исходный файл.
- Публикация проекта.
Проект должен быть опубликован со следующими настройками:
Примечание. При добавлении баннера в Adfox менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox.
- Подсчет переходов в баннере.
Чтобы в Adfox у баннера считалась статистика по переходам, необходимо в HTML-коде в теге
а
для атрибутаhref
прописать переменную:%banner.reference_mrc_user1%
Также для ссылок используйте атрибут
target
с переменной%banner.target%
в значении атрибута. Если атрибут отсутствует, ссылка откроется внутри iframe, то есть рекламируемый сайт откроется на баннерном месте.Пример HTML-кода для подсчета переходов по баннеру:
<a href="%banner.reference_mrc_user1%" target="%banner.target%">Сайт рекламодателя</a>
Примечание. ШаблоныHTML App Mobile
В HTML-коде баннеров, которые будут размещаться в мобильных приложениях, для учета переходов используйте макрос:
%banner.reference_mrc_user2%
- Подсчет переходов с нескольких ссылок в баннере.
Допустим, в баннере есть несколько ссылок для перехода, ведущих на разные страницы рекламируемого сайта, и по каждой из них нужно получить количество переходов.
<a href="http://site.ru" target="_blank">Первая ссылка</a> <a href="http://site.ru/about/" target="_blank">Вторая ссылка</a>
Замените значения атрибута
href
на переменные%request.reference_mrc@%banner.eventN%
, где вместо N должен быть номер события с 1 по 28.Например:
<a href="%request.reference_mrc%@%banner.event1%" target="%banner.target%">Первая ссылка</a> <a href="%request.reference_mrc%@%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 [context].
- Архив с HTML5 креативом — загрузите ZIP-архив с проектом, поле HTML5-код креатива должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера.
- HTML5 код креатива — загрузите ZIP-архив с проектом, подготовленный в HTML-редакторах или вставьте HTML-код.
- URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (
http://
илиhttps://
).Примечание. Если в баннере несколько ссылок, добавьте их на вкладке События у баннера, в поля URL перехода. Соответствие номеров ссылок и событий уточняйте у разработчиков HTML креатива. - TARGET ссылки — определяет, в каком окне открывать ссылку:
_top
— в текущем окне;_blank
— в новом окне или вкладке, в зависимости от настроек браузера.
- Ссылка на промерочный пиксель — по умолчанию используется пиксель Adfox
//banners.adfox.ru/transparent.gif
, при необходимости вести учет показов в сторонней системе, удалите пиксель Adfox и укажите другую ссылку. - Ширина креатива (px или %) — укажите ширину баннера.
- Высота креатива (px или %) — укажите высоту баннера.
- Изображение — загрузите изображение.
Условия показа креативов:
- добавлен HTML-код и изображение — будет показан HTML-код;
- добавлено изображение — будет показано изображение;`
- добавлен HTML-код — будет показан HTML-код.
- Имя атрибута class контейнера баннера — укажите имя (или несколько имен через пробел) для атрибута
class
контейнера с баннером. - Использовать SafeFrame (yes|no) — safeFrame — это технология, которая оборачивает рекламу в специальный iframe, у которого есть строгий API. SafeFrame не дает рекламе, которая в нем отрисовывается, собирать данные и взаимодействовать с остальной страницей вне safeFrame.
yes
— включить использование safeFrame и запретить доступ к веб-странице;no
— не включать safeFrame.
Код баннера имеет доступ к веб-странице.
- Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Кроме стиля: display. Например,
border: 1px solid red;
. Невалидные значения будут отброшены браузером. - Настройка рекламной метки:
- В списке Метка рекламы выберите «Реклама» или «Соцреклама» — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение «Отключена».
- В поле Домен укажите домен рекламодателя — он будет добавлен в метку:
«Реклама» | example.com
или«Соцреклама» | example.com
(только если в выпадающем списке выбрано значение «Реклама» или «Соцреклама»).
Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню
в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).
Примечание. Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера.Маркировка рекламы — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные о креативах в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически.
Примечание. Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные о креативах в ЕРИР.
Обратиться в службу поддержки
Если ваш вопрос не требует детального изучения, вы можете написать в чат.