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". Например, на мобильных устройствах в большинстве случаев для запуска видео требуется пользовательское действие.

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

Для подготовки проекта с HTML5 креативом рекомендуем воспользоваться готовой инструкцией для редакторов:
Adobe Animate CC;
Google Web Designer.

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

Допустимые форматы видео: форматы, которые поддерживают браузеры. Рекомендуемый формат mp4.
Максимальный вес видео ролика, который будет загружен в интерфейс ADFOX: до 1Мб.

Требования к собственным кнопкам (включить/выключить звук, закрыть)

Допустимые форматы изображений: png, gif, jpg.
Размеры картинок не должны превышать 50х50px.

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

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

Начало просмотра (start)
Ролик выбран (creativeView)
Ролик загружен (impression)
Первая четверть просмотра (firstQuartile)
Середина просмотра (midpoint)
Третья четверть просмотра (thirdQuartile)
Полный просмотр (complete)
Выключить звук (mute)
Включить звук (unmute)
Клик по кнопке «закрыть» (close)
Ошибка проигрывания или инициализации баннера (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 - не показывать) сек — время от появления баннера до начала показа кнопки "Закрыть" в секундах.
    По умолчанию 5 секунд.
    Если указано "-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. Стиль для кнопки "Подробнее" — укажите css стиль для кнопки "Подробнее". Например: background-color: #f00; color: #fff; border-radius: 10px;

  21. Собственная картинка кнопки "Закрыть" — загрузите картинку или укажите ссылку на картинку для кнопки "Закрыть". Допускаются любые изображения формата jpg, png, gif размером не более 50x50 пикселей.

  22. Собственная картинка кнопки "Выключить звук" — загрузите картинку или укажите ссылку на картинку для кнопки "Выключить звук". Допускаются любые изображения формата jpg, png, gif размером не более 50x50 пикселей.

  23. Собственная картинка кнопки "Включить звук" — загрузите картинку или укажите ссылку на картинку для кнопки "Включить звук". Допускаются любые изображения формата jpg, png, gif размером не более 50x50 пикселей.

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