Banner HTML5 | Adfox

Banner HTML5Banner HTML5ОписаниеРазработка HTML-креативаДобавление баннера в AdfoxОбратиться в службу поддержкиОписание Banner HTML5 — баннер, который отображает произвольное HTML-содержимое или изображение. HTML-код может представлять из себя обычную HTML-страницу со стилями и скриптами. Он помещается в iframe и имеет ограниченный доступ к содержимому площадки. С помощью шаблона Banner HTML5 [context] баннер можно добавить двумя способами: Подготовив только изображение. Наличие ссылки для перехода в параметрах баннера регулирует кликабельность изображения. Подготовив HTML-креатив в редакторе Adobe Animate CC или Google Web Designer по инструкции. Если в баннере добавлен и HTML-код, и изображение, будет показан HTML-код. Параметры, настраиваемые при добавлении в Adfox: ширина, высота баннера; собственные CSS-стили для контейнера с баннером. Пример баннера Пример готового проекта с одной кнопкой в Adobe Animate CC, исходный файл. Пример готового проекта с несколькими кнопками в Adobe Animate CC, исходный файл. Пример готового проекта в Google Web Designer, исходный файл. Разработка HTML-креатива Ознакомьтесь с требованиями к HTML-коду Максимально допустимый размер HTML-файла — 65 000 байт. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах: Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css. Файлы по весу не должны превышать 10 МБ. Загрузите файлы на вкладку Файлы рекламной кампании и подключите в HTML-код полученные ссылки на файлы: Если в проекте прописаны абсолютные ссылки (src="js/script.js", src="css/style.css"), то при загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку Файлы и заменит все ссылки на эти файлы в загружаемом проекте. Если в проекте прописаны относительные ссылки (например, src="../js/script.js"), воспользуйтесь одним из способов: замените ссылки на файлы .js и .css на абсолютные — сработает парсинг Adfox и все ссылки будут заменены автоматически; вручную загрузите файлы .js и .css на вкладку Файлы. Затем получите ссылки на эти файлы в Adfox и поменяйте в HTML-коде относительные ссылки на полученные. Пример подключения JS и CSS-файлов: <script type="text/javascript" src="ССЫЛКА_НА_ФАЙЛ"></script><link rel="stylesheet" type="text/css" href="ССЫЛКА_НА_ФАЙЛ" /> В проекте может находиться только один файл с расширением .html. Максимально допустимое количество файлов в проекте — 50. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, SWF. Максимальный размер каждого файла (действует также для файлов внутри архива): 10 МБ, 1 МБ для видеофайлов. Если баннер кликабельный, убедитесь, что в HTML-коде нет функций и методов, которые блокируют переход по клику или нажатию. Например, метод createjs.Touch.enable(stage) включает в CreateJS режим multi-touch, блокирующий переход по баннеру по нажатию. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере. Скрипты должны содержать дополнительный параметр: <script nonce="%request.eid1%">. Формат готового проекта — ZIP-архив. Требования к изображениям Используйте картинки высокого разрешения, это кардинально улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера. Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие TinyPng. Данный сервис работает как с PNG, так и c JPEG. Можно использовать SVG-картинки. Они векторные, а значит, будут лучше выглядеть на всех устройствах — мобильных и десктопных. Также они имеют малый размер файла и могут быть с анимацией. Допустимые форматы изображений: PNG, GIF, JPG, SVG. Максимальный вес одного файла: 10 МБ. Выберите редактор, в котором будете разрабатывать HTML-креатив, и кликните на соответствующую ссылку. Подготовьте архив с HTML-креативом по инструкции: Редактор Adobe Animate CC — Баннер с одной кнопкой Скачайте шаблон для баннера с одной кликабельной областью (кнопкой). Adobe Animate CC версии 16.0 и выше Adobe Animate CC версии 15.2 и выше Adobe Animate CC версии 15.1 и ниже Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий). Откройте параметры публикации File → Publish Settings и подключите шаблон из пункта 1. Опубликуйте проект, выбрав нужную директорию. Вся область баннера кликабельна и представляет собой кнопку для перехода на сайт рекламодателя. Кликовая ссылка будет подтягиваться в креатив из настроек баннера в Adfox. После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox. Редактор Adobe Animate CC — Баннер с несколькими кнопками Скачайте шаблон для баннера с несколькими кнопками. Adobe Animate CC версии 16.0 и выше Adobe Animate CC версии 15.2 и выше Adobe Animate CC версии 15.1 и ниже Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий). При добавлении кнопок (buttons) или вложенных в сцену клипов (movie clips) важно задавать им instance name, чтобы потом можно было добавить клик к нужным кнопкам. Рекомендуем использовать названия «button1 - button9». См. также: Инструкция по добавлению кнопки и назначению instance nameКнопка на главной сцене Создайте на сцене какой-нибудь объект, например, с помощью 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: Прозрачная кнопка готова: Добавьте в проект слой Actions (в него будем добавлять код для кнопок). Откройте окно для написания кода. Далее модифицируйте код и пропишите его в слое Actions: window.buttons.push( //Separate the buttons paths with a comma, adding this first this.button1,this.scene_instance_name.button2 //End of button space ); 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 Скачайте шаблон баннера для 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> Подсчет переходов с нескольких ссылок в баннере. Допустим, в баннере есть несколько ссылок для перехода, ведущих на разные страницы рекламируемого сайта, и по каждой из них нужно получить количество переходов. <a href="http://site.ru" target="_blank">Первая ссылка</a> <a href="http://site.ru/about/" target="_blank">Вторая ссылка</a> Замените значения атрибута href на переменные %request.reference_mrc%&pf=%banner.eventN:urlenc%, где вместо N должен быть номер события с 1 по 28. Например: <a href="%request.reference_mrc%&pf=%banner.event1:urlenc%" target="%banner.target%">Первая ссылка</a> <a href="%request.reference_mrc%&pf=%banner.event2:urlenc%" target="%banner.target%">Вторая ссылка</a> Соответствие ссылок и переменных нужно сообщить менеджеру, добавляющему баннер в Adfox. Так как при добавлении баннера нужно будет на вкладке События указать для События 1 первую ссылку, а для События 2 — вторую ссылку. Первая ссылка — http://site.ru — %banner.event1:urlenc% (Событие 1). Вторая ссылка — http://site.ru/about/ — %banner.event2:urlenc% (Событие 2). Добавление баннера в Adfox Примечание Вы можете добавить Banner HTML5 как отдельный баннер или в составе карусели. Чтобы добавить Banner HTML5 в карусель: создайте мастер-кампанию с профилем Карусель; выберите для Banner HTML5 шаблон Banner HTML5 Slide [context]; разместите Banner HTML5 и карусель на одной площадке. Чтобы добавить баннер в 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» (только если в выпадающем списке выбрано значение Реклама или Соцреклама). Добавить рекламное меню Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен). В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации». Примечание Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера. Маркировка рекламы Раздел Маркировка рекламы доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически. Примечание Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР. Обратиться в службу поддержки Написать в чат Написать письмо Была ли статья полезна?ДаНетПредыдущаяBanner ImageСледующаяПромобаннер