Fullscreen HTML5

Описание

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

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

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

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

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

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

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

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

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

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

Требования к 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();
    };
});

Требования к изображению для заглушки

Допустимые форматы изображений: png, gif, jpg.
Максимальный вес одного файла: 300Кб.

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

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

Добавление баннера в 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 - не показывать) сек — время от появления баннера до начала показа кнопки "Закрыть" в секундах.
    Если указано "-1", то кнопка будет скрыта.

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

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

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