Fullscreen HTML5
Fullscreen HTML5 отображает произвольное HTML-содержимое или изображения в формате полноэкранного баннера. Баннер показывается определенное время по таймеру, либо пока пользователь не закроет баннер, кликнув по кнопке Закрыть.
При добавлении баннера в Adfox доступна загрузка HTML-креатива и/или изображений.
Размеры и расположение баннера
Баннер состоит из двух частей: из обертки баннера и контейнера с рекламным содержимым. Обертка всегда занимает 100% ширины и высоты размеров окна. Рекламное содержимое всегда расположено по центру экрана.
Для HTML-содержимого в параметрах баннера указываются размеры Ширина баннера и Высота баннера. Допустимы проценты и пиксели. За 100% принимается размер окна браузера.
Если размеры содержимого указаны больше размеров окна, горизонтальная или вертикальные полосы прокрутки не появятся, а блок содержимого (а значит, и контейнер с креативом) будет иметь меньший размер. Если креатив не адаптивный, то часть баннера будет недоступна для просмотра пользователям с небольшим размером экрана. В этом случае баннер будет расположен:
- слева — если ширина баннера больше ширины экрана;
- сверху — если высота баннера больше высоты экрана.
В качестве альтернативы HTML-креативам можно использовать изображения. Изображения-заглушки изменяют свои размеры внутри блока содержимого по алгоритму, указанному в параметре Расположение картинки (contain, cover).
Элементы панели управления баннером
-
Таймер обратного отсчета до закрытия баннера: настраивается видимость и цвет таймера.
-
Текст рядом с таймером: произвольный текст или текст по умолчанию Реклама.
-
Кнопка Закрыть: настраивается видимость или отложенный показ кнопки, можно указать собственную картинку для кнопки.
-
Кнопка Подробнее: расположена по центру нижней части экрана. Настраивается видимость и текст кнопки, можно указать собственные стили для кнопки.
Особенности формата
Проверка видимости формата Fullscreen HTML5 засчитывается только в случае, если хотя бы один пиксель баннера находится в активном окне браузера не менее двух секунд.
Совет
В соответствии с международными стандартами медиаиндустрии рекомендуется показывать кнопку Закрыть без задержки (Задержка показа «Закрыть» равна 0).
Требования к HTML-коду (для разработчиков кода)
Для подготовки проекта с HTML5-креативом рекомендуем воспользоваться готовой инструкцией для редакторов:
Adobe Animate CC
-
На разных слоях разместите два symbol, которые будут соответствовать баннеру в схлопнутом и расхлопнутом состояниях.
Если нужна кнопка Закрыть, добавьте ее в Movie clip расхлопнутого состояния.
Укажите instance names.
Рекомендуем использовать instance names: expanded, collapsed и closed для расхлопнутого, схлопнутого состояния и кнопки Закрыть соответственно. Тогда можно без изменений перенести примеры кодов из этой инструкции в Animate.
См. также:
Инструкция по добавлению кнопки и назначению 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:
-
Прозрачная кнопка готова:
-
-
Выберите один из шаблонов в зависимости от сценария в баннере.
Скачайте шаблон и подключите его к проекту:
- одна кликабельная область и расхлоп по наведению;
- несколько кликабельных областей и расхлоп по наведению;
- одна кликабельная область и расхлоп/схлоп по клику;
- несколько кликабельных областей и расхлоп/схлоп по клику.
Шаблоны для редактора Animate от 15 версии и ниже:
-
В зависимости от сценария работы баннера добавьте один из примеров кода в слой 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(); -
Опубликуйте проект и упакуйте его в ZIP-архив.
-
Если вы используете вариант с несколькими кнопками, сохраните соответствие instance name кнопок и их назначение. Эта информация понадобится при добавлении HTML-креатива в интерфейс Adfox.
Например:
this.expanded.button1— ссылка на страницу с товаром;this.expanded.button2— ссылка на контакты.В интерфейсе Adfox после добавления баннера ссылки нужно прописать на вкладке События.
Первый instance в строке кода будет соответствовать параметру Событие 1 баннера, название у события может быть любое.
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 менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.
Советы по подготовке креативов
В HTML-фрейме доступен метод window.destroyBanner(), который полностью уничтожает (закрывает) fullscreen.
Пример кода для кнопки Закрыть:
this.close.addEventListener("click", function(e) {
var t = e.nativeEvent;
if(t.which == 1 || t.button == 0) {
window.destroyBanner();
};
});
Требования к изображению для заглушки
Допустимые форматы изображений: JPG, PNG, GIF. Максимальный вес одного файла: 300 КБ.
Требования к собственным кнопкам (закрыть)
Допустимые форматы изображений: JPG, PNG, GIF. Размеры картинок не должны превышать 50 × 50 px.
Добавление баннера в Adfox
Чтобы добавить баннер в Adfox, выберите нужный тип баннера и шаблон Fullscreen HTML5 [context].
Укажите параметры баннера:
|
Параметр |
Описание |
|
Архив с HTML5 креативом |
Загрузите ZIP-архив с проектом. |
|
TARGET ссылки |
Укажите, в каком окне открывать ссылку:
|
|
Ссылка на промерочный пиксель |
По умолчанию используется пиксель Adfox |
|
URL перехода |
Ссылка на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке ( |
|
HTML5 (CSS, HTML, JS) |
Содержимое HTML-кода из архива с проектом (загружается автоматически из архива). Если HTML5-код не задан, загрузите изображение-заглушку для баннера. Для креатива кликабельная только область внутри креатива. |
|
Ширина баннера (в px или 100%) |
Ширина основного HTML-содержимого баннера (px или %). Если ширина указана в процентах, за 100% принимается ширина родителя контейнера баннера. |
|
Высота баннера (в px или 100%) |
Высота основного HTML-содержимого баннера (px или %). |
|
Имя атрибута class контейнера баннера |
Класс к контейнеру баннера. Все значимые дочерние элементы также получают классы, которые сгенерированы по принципу БЭМ методологии на основе указанного класса. Все элементы:
Например, если указать класс |
|
Текст на панели управления |
Текст на панели управления, рядом с таймером. По умолчанию — «Реклама». |
|
Показывать кнопку «Подробнее» (yes|no) |
Укажите, показывать ли кнопку Подробнее на баннере:
|
|
Текст на кнопке «Подробнее» |
Текст для кнопки Подробнее. Если текст не указан, но кнопка должна быть показана, по умолчанию будет текст «Подробнее». |
|
Наличие панели управления (yes|no) |
Видимость панели управления:
|
|
Изображение, которое будет отображаться в вертикальной или горизонтальной ориентации устройства. Можно заполнить только один из параметров, тогда одно изображение будет отображаться в вертикальной и горизонтальной ориентации. |
|
Расположение картинки (contain, cover) |
Укажите вариант расположения изображений внутри баннера и как они будут масштабироваться. Возможные значения:
|
|
Время показа баннера (секунды) |
Время в секундах, на которое должен быть показан баннер. Отсчет времени начинается с момента появления баннера. |
|
Задержка показа «Закрыть» (-1 – не показывать) сек. |
Время от появления баннера до начала показа кнопки Закрыть в секундах. Примеры значений:
|
|
Стиль для кнопки «Подробнее» |
CSS-стиль для кнопки Подробнее. Например: |
|
Собственная картинка кнопки «Закрыть» |
Загрузите картинку или укажите ссылку на картинку для кнопки Закрыть. Допускаются любые изображения формата JPG, PNG, GIF размером не более 50 × 50 пикселей. |
|
Цвет таймера закрытия |
Цвет для таймера закрытия в любом формате, доступном в CSS. Например: |
|
Настройка рекламной метки:
|
В списке Метка рекламы выберите Примечание Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем. В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение |
|
Добавить рекламное меню |
Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации». Примечание Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера. |
|
Маркировка рекламы |
Раздел Маркировка рекламы доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически. Примечание Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР. |
в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).