Fullscreen HTML5

Описание

Fullscreen HTML5 — отображает произвольное HTML-содержимое или изображение в формате полноэкранного баннера.

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

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

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

За 100% принимается размер окна браузера.

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

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

В этом случае баннер будет расположен:

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

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

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

Загрузка HTML-креатива и/или изображения.

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

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

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

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

Совет. В соответствии с рекомендациями IAB Russia о качественной рекламерекомендуется показывать кнопку Закрыть без задержки (Задержка показа «Закрыть» = 0).

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

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

Adobe Animate CC;

Google Web Designer.

Советы по подготовке креативов

В 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 [loader].

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

  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. Класс контейнера с баннером — укажите класс к контейнеру баннера. Все значимые дочерние элементы также получают классы, которые сгенерированы по принципу БЭМ методологии на основе указанного класса.

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

    • 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. Изображение для HTML-заглушки — загрузите изображение для HTML-заглушки. Для изображения заглушки кликабельная вся область баннера за исключением панели управления.
  14. Расположение картинки (contain, cover) — укажите вариант расположения изображения-заглушки внутри баннера и как оно будет масштабироваться.

    Возможные значения:

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

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

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

  17. Имя атрибута class контейнера баннера — при необходимости укажите имя (или несколько имен через пробел) для атрибута class контейнера с баннером.
  18. Стиль для кнопки Подробнее — укажите CSS-стиль для кнопки Подробнее. Например: background-color: #f00; color: #fff; border-radius: 10px;
  19. Собственная картинка кнопки Закрыть — загрузите картинку или укажите ссылку на картинку для кнопки Закрыть. Допускаются любые изображения формата JPG, PNG, GIF размером не более 50 x 50 пикселей.
  20. Цвет таймера закрытия — укажите цвет для таймера закрытия в любом формате, доступном в CSS. Например: #404994.