Fullscreen HTML5 с видео

Описание

Примечание. Шаблон работает только на кодах вставок, использующих библиотеку loader.js — в инструкции такие коды имеют пометку NEW.

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

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

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

Данный формат является кросс-платформенным — показывается на десктопах, планшетах и мобильных телефонах.

Воспроизведение осуществляется HTML5-видеоплеером. Формат полностью совместим со спецификациями видео рекламы VAST и VPAID, имеет поддержку стандартных событий (tracking events), которые запрашиваются в момент их наступления в плеере.

Возможности баннера, доступные при добавлении в ADFOX:

  • показ видео в HTML5-креативе или показ видео непосредственно на подложке баннера;
  • видео может быть добавлено в баннере в качестве видео-файла или ссылки на wrapper XML.

Панель управления баннером состоит из элементов:

  • кнопка Включить/выключить звук: настраивается видимость и включение звука на старте, можно указать собственные картинки для кнопок;
  • таймер обратного отсчета до закрытия баннера: настраивается видимость и цвет таймера;
  • текст рядом с таймером: произвольный текст или текст по умолчанию Реклама;
  • кнопка Закрыть: настраивается видимость или отложенный показ кнопки, можно указать собственную картинку для кнопки;

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

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

  • проверка видимости формата Fullscreen HTML5 засчитывается только в случае, если хотя бы 1px баннера находится в активном окне браузера не менее 2 секунд;
  • баннер не может контролировать показ контролов внутри VPAID, поэтому если VAST содержит VPAID-креатив, то кнопка регулировки громкости будет скрыта;
  • кнопка Подробнее не будет показываться для VPAID-креативов;
  • в VPAID-креативах также возможно наличие собственной кнопки пропуска рекламы;
  • необходимо учитывать расположение кнопок в VPAID. Если расположить кнопки на самом верху и развернуть баннера на 100% высоты, то на них нельзя будет кликнуть, так как они будут перекрыты панелью управления баннера;
  • во всех случаях, когда это возможно, видео запускается автоматически. В остальных случаях — будет показана кнопка Play. Например, на мобильных устройствах в большинстве случаев для запуска видео требуется пользовательское действие.
Совет. В соответствии с рекомендациями IAB Russia о качественной рекламе рекомендуется:
  • показывать кнопку «Закрыть» без задержки (Задержка показа «Закрыть» = 0);
  • при запуске видео отключать звук (Выключен звук на старте= yes).

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

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

Adobe Animate CC;

Google Web Designer.

Требования к видеоролику

  1. Допустимые форматы видео: форматы, которые поддерживают браузеры. Рекомендуемый формат: mp4.
  2. Максимальный вес видео ролика, который будет загружен в интерфейс ADFOX: до 1Мб.
Требования к собственным кнопкам (включить/выключить звук, закрыть)
  1. Допустимые форматы изображений: png, gif, jpg.
  2. Размеры картинок не должны превышать 50х50px.

Подсчет событий

В баннере ведется подсчет событий:

  1. Начало просмотра (start).
  2. Ролик выбран (creativeView).
  3. Ролик загружен (impression).
  4. Первая четверть просмотра (firstQuartile).
  5. Середина просмотра (midpoint).
  6. Третья четверть просмотра (thirdQuartile).
  7. Полный просмотр (complete).
  8. Выключить звук (mute).
  9. Включить звук (unmute).
  10. Клик по кнопке Закрыть (close).
  11. Ошибка проигрывания или инициализации баннера (error).

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

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

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

  1. Архив с HTML5 креативом — загрузите zip-архив с проектом.
  2. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.
  3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).
  4. HTML5 (css, html, js) — содержимое html-кода из архива с проектом (загружается автоматически из архива). Если HTML5-код не задан, то видео будет показано на сером фоне подложки баннера.
  5. Выключен звук на старте (yes/no) — укажите настройки звук при запуске видео:
    • yes — звук выключен (по умолчанию, рекомендуется);
    • no — звук включен.
  6. Формат видеорекламы — укажите формат рекламы:
    • %global.linearAdVAST2% — если размещение баннера происходит с помощью видеофайла;
    • %global.WrapperAdVAST2% — если размещение баннера происходит с помощью ссылки на VAST XML.
  7. Видна ли кнопка звука (yes/no) — укажите настройку видимости кнопки Выключить/включить звук:
    • yes — кнопка отображается;
    • no — кнопка скрыта.
  8. Показывать таймер закрытия (yes/no) — укажите видимость таймера:
    • yes — показать таймер. Укажите параметр Время показа баннера (секунды);
    • no — скрыть таймер.
  9. Текст на панели управления — текст на панели управления, рядом с таймером. По умолчанию добавляется слово Реклама.
  10. Класс контейнера с баннером — укажите класс к контейнеру баннера. Все значимые дочерние элементы также получают классы, которые сгенерированны по принципу БЭМ методологии на основе указанного класса.

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

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

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

  11. Видео (URL) — если размещение баннера происходит с помощью видео-файла, то загрузите видео или укажите ссылку на видео. При указании данного параметра, не нужно указывать cсылку на VAST XML.

    В параметре Формат видео рекламы обязательно укажите тип рекламы: %global.linearAdVAST2%.

  12. Ссылка на VAST XML — cсылка на VAST 2.0 XML контейнер c данными о видео. При указании данного параметра, не нужно указывать видеофайл.

    В параметре Формат видео рекламы обязательно укажите тип рекламы: %global.WrapperAdVAST2%.

  13. Задержка показаЗакрыть(-1 - не показывать) сек — время от начала показа баннера до начала показа кнопки Закрыть в секундах.

    По умолчанию «0» — кнопка показывается сразу (по умолчанию, рекомендуется).

    Если указано «-1», то кнопка будет скрыта.

  14. Продолжительность видео (в формате HH:MM:SS) — продолжительность видео в формате HH:MM:SS (часы:минуты:секунды).
  15. MIME-type видео (например, video/mp4) — MIME-тип видеофайла, например video/mp4. Значение обязательно, если баннер размещен с помощью видеофайла.
  16. Ширина видео — ширина видео в пикселях без указания размерности. Значение обязательно, если баннер размещен с помощью видеофайла.
  17. Высота видео — высота видео в пикселях без указания размерности. Значение обязательно, если баннер размещен с помощью видеофайла.
  18. Показывать кнопкуПодробнее(yes|no) — укажите, показывать ли кнопку Подробнее на баннере:
    • yes — показать кнопку;
    • no — скрыть кнопку.
  19. Текст на кнопкеПодробнее — укажите текст для кнопки Подробнее. Если текст не указан, но кнопка должна быть показана, по умолчанию будет текст Подробнее.
  20. Имя атрибута class контейнера баннера — при необходимости укажите имя (или несколько имён через пробел) для атрибута class контейнера с баннером.
  21. Стиль для кнопкиПодробнее — укажите css-стиль для кнопки Подробнее. Например: background-color: #f00; color: #fff; border-radius: 10px;
  22. Собственная картинка кнопкиЗакрыть — загрузите картинку или укажите ссылку на картинку для кнопки Закрыть. Допускаются любые изображения формата jpg, png, gif размером не более 50x50 пикселей.
  23. Собственная картинка кнопкиВыключить звук — загрузите картинку или укажите ссылку на картинку для кнопки Выключить звук. Допускаются любые изображения формата jpg, png, gif размером не более 50x50 пикселей.
  24. Собственная картинка кнопкиВключить звук — загрузите картинку или укажите ссылку на картинку для кнопки Включить звук. Допускаются любые изображения формата jpg, png, gif размером не более 50x50 пикселей.
  25. Цвет таймера закрытия — укажите цвет для таймера закрытия в любом формате, доступном в css. Например: #404994.