Fullscreen HTML5

Fullscreen HTML5 отображает произвольное HTML-содержимое или изображения в формате полноэкранного баннера. Баннер показывается определенное время по таймеру, либо пока пользователь не закроет баннер, кликнув по кнопке Закрыть.

При добавлении баннера в Adfox доступна загрузка HTML-креатива и/или изображений.

Размеры и расположение баннера

Баннер состоит из двух частей: из обертки баннера и контейнера с рекламным содержимым. Обертка всегда занимает 100% ширины и высоты размеров окна. Рекламное содержимое всегда расположено по центру экрана.

Для HTML-содержимого в параметрах баннера указываются размеры Ширина баннера и Высота баннера. Допустимы проценты и пиксели. За 100% принимается размер окна браузера.

Если размеры содержимого указаны больше размеров окна, горизонтальная или вертикальные полосы прокрутки не появятся, а блок содержимого (а значит, и контейнер с креативом) будет иметь меньший размер. Если креатив не адаптивный, то часть баннера будет недоступна для просмотра пользователям с небольшим размером экрана. В этом случае баннер будет расположен:

  • слева — если ширина баннера больше ширины экрана;
  • сверху — если высота баннера больше высоты экрана.

В качестве альтернативы HTML-креативам можно использовать изображения. Изображения-заглушки изменяют свои размеры внутри блока содержимого по алгоритму, указанному в параметре Расположение картинки (contain, cover).

Элементы панели управления баннером

  • Таймер обратного отсчета до закрытия баннера: настраивается видимость и цвет таймера.

  • Текст рядом с таймером: произвольный текст или текст по умолчанию Реклама.

  • Кнопка Закрыть: настраивается видимость или отложенный показ кнопки, можно указать собственную картинку для кнопки.

  • Кнопка Подробнее: расположена по центру нижней части экрана. Настраивается видимость и текст кнопки, можно указать собственные стили для кнопки.

Особенности формата

Проверка видимости формата Fullscreen HTML5 засчитывается только в случае, если хотя бы один пиксель баннера находится в активном окне браузера не менее двух секунд.

Совет

В соответствии с международными стандартами медиаиндустрии рекомендуется показывать кнопку Закрыть без задержки (Задержка показа «Закрыть» равна 0).

Пример баннера

Требования к HTML-коду (для разработчиков кода)

Для подготовки проекта с HTML5-креативом рекомендуем воспользоваться готовой инструкцией для редакторов:

Adobe Animate CC

  1. На разных слоях разместите два symbol, которые будут соответствовать баннеру в схлопнутом и расхлопнутом состояниях.

    Если нужна кнопка Закрыть, добавьте ее в Movie clip расхлопнутого состояния.

    Укажите instance names.

    Рекомендуем использовать instance names: expanded, collapsed и closed для расхлопнутого, схлопнутого состояния и кнопки Закрыть соответственно. Тогда можно без изменений перенести примеры кодов из этой инструкции в Animate.

    См. также:

    Инструкция по добавлению кнопки и назначению 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. Прозрачная кнопка готова:

  2. Выберите один из шаблонов в зависимости от сценария в баннере.

    Скачайте шаблон и подключите его к проекту:

    Шаблоны для редактора Animate от 15 версии и ниже:

  3. В зависимости от сценария работы баннера добавьте один из примеров кода в слой 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();

  4. Опубликуйте проект и упакуйте его в ZIP-архив.

  5. Если вы используете вариант с несколькими кнопками, сохраните соответствие instance name кнопок и их назначение. Эта информация понадобится при добавлении HTML-креатива в интерфейс Adfox.

    Например:

    this.expanded.button1 — ссылка на страницу с товаром;

    this.expanded.button2 — ссылка на контакты.

    В интерфейсе Adfox после добавления баннера ссылки нужно прописать на вкладке События.

    Первый instance в строке кода будет соответствовать параметру Событие 1 баннера, название у события может быть любое.

Google Web Designer

  1. Скачайте шаблон баннера для Google Web Designer.

    Код данного баннера можно брать за основу при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например:

    /Users/[USER_NAME]/Documents/Google Web Designer/templates

    Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:

    %request.reference_mrc%, %user1%, %eventN%, где N — номер события от 1 до 30.

  2. Обработка клика.

    Все события назначаются конкретным элементам анимации через вкладку События.

    Для вызова действий используется компонент Интерактивная область.

    Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или Tap Area → Touch/Click в английской версии).

    На вкладке Собственный код укажите вызов функции клика.

    • если используется одна кнопка перехода: callClick();

    • если кнопок перехода несколько:

      callClick(n);

      где n — номер события, которое должно быть вызвано.

    • если необходимо вызвать событие из анимации без перехода, используйте следующий код:

      callEvent(n);

      где n — номер события, которое должно быть вызвано.

    Особенность реализации тянущегося (резинового) баннера.

    Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.

    Также используйте опции Выровнять по контейнеру и Резиновый макет на верхней панели инструментов.

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

    При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные в пикселях.

    Пример готового проекта в Google Web Designer, исходный файл.

  3. Публикация проекта.

    Проект должен быть опубликован со следующими настройками:

Примечание

При добавлении баннера в 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].

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

  1. Архив с HTML5 креативом — загрузите ZIP-архив с проектом.

  2. TARGET ссылки — в каком окне открывать ссылку:

    • _top — в текущем окне;
    • _blank — в новом окне или вкладке, в зависимости от настроек браузера.

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

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

  5. HTML5 (CSS, HTML, JS) — содержимое HTML-кода из архива с проектом (загружается автоматически из архива). Если HTML5-код не задан, загрузите изображение-заглушку для баннера.

    Для креатива кликабельная только область внутри креатива.

  6. Ширина баннера (в px или 100%) — ширина основного HTML-содержимого баннера (px или %). Если ширина указана в процентах, за 100% принимается ширина родителя контейнера баннера.

  7. Высота баннера (в px или 100%) — высота основного HTML-содержимого баннера (px или %).

  8. Имя атрибута class контейнера баннера — укажите класс к контейнеру баннера. Все значимые дочерние элементы также получают классы, которые сгенерированы по принципу БЭМ методологии на основе указанного класса.

    Все элементы:

    • header — панель управления;
    • header__close — кнопка Закрыть;
    • header__adv-block — блок с текстом Реклама;
    • more__button — кнопка Подробнее.

    Например, если указать класс my-site-fullscreen, кнопка закрытия будет иметь класс my-site-fullscreen__header__close.

  9. Текст на панели управления — текст на панели управления, рядом с таймером. По умолчанию — «Реклама».

  10. Показывать кнопку «Подробнее» (yes|no) — укажите, показывать ли кнопку Подробнее на баннере:

    • yes — показать кнопку;
    • no — скрыть кнопку.

  11. Текст на кнопке «Подробнее» — укажите текст для кнопки Подробнее. Если текст не указан, но кнопка должна быть показана, по умолчанию будет текст «Подробнее».

  12. Наличие панели управления (yes|no) — укажите видимость панели управления:

    • yes — показать панель. Укажите параметр Время показа баннера (секунды);
    • no — скрыть панель.

  13. Вертикальное изображение — изображение, которое будет отображаться в вертикальной ориентации устройства.

    Горизонтальное изображение — изображение, которое будет отображаться в горизонтальной ориентации устройства.

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

  14. Расположение картинок (contain, cover) — укажите вариант расположения изображений внутри баннера и как они будут масштабироваться. Возможные значения:

    • contain — размер баннера будет таким, как его указал рекламодатель и не зависит от размера контейнера. Если размер изображения больше размера баннера, изображение будет пропорционально смасштабировано так, чтобы вся площадь баннера была занята изображением. Центр изображения будет расположен по центру блока. Обязательно должны быть указана высота баннера;
    • cover — размер баннера будет таким, как его указал рекламодатель и не зависит от размера контейнера. Если размер изображения больше размера баннера, изображение будет пропорционально смасштабировано так, чтобы изображение было полностью видно. Свободные от изображения области будут прозрачными. Центр изображения будет расположен по центру блока. Обязательно должны быть указана высота баннера.

  15. Время показа баннера (секунды) — время в секундах, на которое должен быть показан баннер. Отсчет времени начинается с момента появления баннера.

  16. Задержка показа «Закрыть» (-1 – не показывать) сек. — время от появления баннера до начала показа кнопки Закрыть в секундах. Примеры значений:

    • 0 — кнопка показывается сразу, без задержки (по умолчанию, рекомендуется);
    • -1 — кнопка будет скрыта.

  17. Стили для контейнера баннера — укажите CSS-стиль для кнопки Подробнее. Например: background-color: #f00; color: #fff; border-radius: 10px;

  18. Собственная картинка кнопки «Закрыть» — загрузите картинку или укажите ссылку на картинку для кнопки Закрыть. Допускаются любые изображения формата JPG, PNG, GIF размером не более 50 × 50 пикселей.

  19. Цвет таймера закрытия — укажите цвет для таймера закрытия в любом формате, доступном в CSS. Например: #404994.

  20. Настройка рекламной метки:

    • В списке Метка рекламы выберите «Реклама» или «Соцреклама» — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение «Отключена».

      Примечание

      Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем.

    • В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение Реклама или Соцреклама).

  21. Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню  в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).

    В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации».

    Примечание

    Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера.

  22. Маркировка рекламы — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически.

    Примечание

    Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР.

Обратиться в службу поддержки

Написать в чат

Написать письмо

Предыдущая
Banner Slider
Следующая
Карусель