FullScreen HTML

"Английская версия"

Описание

FullScreen HTML - полноэкранный баннер, который появляется поверх основного контента сайта на короткий промежуток времени.
Баннер состоит из двух частей: панели управления и основного контейнера с HTML кодом.
Панель управления содержит: кнопку "Закрыть" и время обратного отсчета до закрытия баннера. Основная часть баннера содержит HTML код.

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

На ваше усмотрение стандартная панель управления может быть как скрыта, так и показана пользователю.
По умолчанию она располагается в верхней части окна браузера. При ее наличии обязательными компонентами являются: кнопка "Закрыть" и время обратного отсчёта до закрытия баннера.
Панель управления можно настроить под дизайн сайта или баннера. Могут быть изменены: высота панели, фон, стиль шрифта, надписи, дополнительно может использоваться кнопка "Закрыть". В качестве кнопки "Закрыть" может быть загружено любое изображение.
Данный видео формат является кросс-платформенным – показывается на десктопах, планшетах и мобильных телефонах.

Пример

Пример

Подготовка (для разработчиков)

Подготовьте HTML код, соблюдая требования к коду:

Максимально допустимое количество символов в HTML коде - 65 000.

Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы. Эти файлы можно добавить к себе на сервер или в файлы рекламной кампании, после получить на них ссылки и указать их в html коде.

Подсчет кликов в баннере

Чтобы в ADFOX у баннера считалась статистика по кликам, необходимо в HTML коде вместо ссылки на сайт рекламодателя прописать переменную:

%reference%

Используйте атрибут target (_blank, _top) для ссылок, чтобы указать в каком окне будет открыт сайт рекламодателя при клике.

Пример:

С указанием ссылки напрямую в верстке баннера

<a href="%reference%@ссылка перехода" target="%target%">Сайт рекламодателя</a>

С указанием ссылки через параметр баннера URL перехода

<a href="%reference%@%user1%" target="%target%">Сайт рекламодателя</a>   

Подсчет кликов с нескольких ссылок в HTML баннере

В HTML баннере имеется несколько ссылок для перехода, ведущие на разные страницы рекламируемого сайта, и по каждой из них нужно получить количество переходов.

<a href="http://site.ru" target="_blank">Первая ссылка</a>  
<a href="http://site.ru/about/" target="_blank">Вторая ссылка</a>

1. Прямые ссылки замените на переменные %reference% - чтобы в системе считалось общее количество переходов по баннеру.
2. C помощью @%event1%-@%event30% переадресовываем пользователя на нужную страницу.

После изменения получаем ссылки:

<a href="%reference%@%event1%" target="%target%">Первая ссылка</a>  
<a href="%reference%@%event2%" target="%target%">Вторая ссылка</a>
Соответствие ссылок и переменных нужно сообщить менеджеру, добавляющему баннер в ADFOX.

Первая ссылка - http://site.ru - %event1% (Событие 1);
Вторая ссылка - http://site.ru/about/ - %event2% (Событие 2).

Менеджеру, добавляющему баннер в систему:

Во вкладке Баннеры -> События в "URL перехода" пропишите к нужным номерам событий ссылки на сайт рекламодателя:

В статистике по баннеру будет считаться общее количество показов и переходов, а во вкладке "События" можно получить данные по переходу непосредственно с каждой ссылки.
Чтобы не кэшировались события
Также закрытие баннера и таймер можно реализовать с помощью следующих функций:

fullscreenClose_[rnd] - вызов функции в js осуществляет закрытие баннера;
fullscreenGetSecond_[rnd] - вызов функции в js возвращает время, которое осталось для автоматического закрытия баннера;
fullscreenControlTimer_[rnd] – для остановки таймера необходимо передать значение “pause”, для запуска “resume”.  

Получить значение [rnd] в HTML коде баннера можно с помощью JavaScript:
var rnd=%random1% || %random%;

Пример вызова функции:

window['fullscreenClose_' + rnd]();
window['fullscreenGetSecond_' + rnd]();
window['fullscreenControlTimer_' + rnd](“pause”);
window['fullscreenControlTimer_' + rnd](“resume”).

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

При добавлении баннера FullScreen выберите нужный тип баннера и шаблон "FullScreen HTML [Sync_Async]". Если шаблон отсутствует в типе баннера, добавьте его из предзаданных. Шаблон работает на синхронном и асинхронном коде вставки. Укажите следующие параметры:

  1. URL перехода - укажите ссылку на сайт рекламодателя;
  2. "TARGET" ссылки - определяет в каком окне открывать ссылку:

_blank - загружает страницу в новое окно браузера;
_top - загружает страницу в текущее окно;

  1. Добавлять область перехода на iframe (yes или no) – если в самой html не реализован переход, то включив данный параметр переход будет осуществлять со всего креатива, над ним появится кликабельная область;
  2. HTML-код - вставьте HTML код баннера;
  3. Ширина креатива (px или 100%) - ширина креатива;
  4. Высота креатива (px или 100%) - высота креатива;
  5. z-index формата (по умолчанию 9999999)- z-index который будет назначен креативу;
  6. Наличие панели управления (yes|no) - yes - показывать панель управления, no - скрыть панель управления, при этом в html-креативе должна присутствовать кнопка "Закрыть" и обратный отсчёт до закрытия баннера;
  7. Цвет фона панели управления - укажите цвет фона панели управления в формате HEX, например: #ffffff;
  8. Высота панели управления (px) - укажите высоту панели управления с добавлением размерности px;
  9. Изображение кнопки "Закрыть" - файл-изображение, в виде кнопки "Закрыть", которая будет отображаться на панели управления в правом углу;
  10. Высота изображения кнопки "Закрыть" (px или 100%) (по умолчанию 80%) – если указано в %, то рассчитывается от высоты панели управления;
  11. Текст на панели управления - текст который информирует пользователя, сколько времени осталось до автоматического закрытия баннера. Если поле оставить пустым, по умолчанию задан текст «Автоматический переход на сайт через 0 секунд» (0 будет заменен на актуальное время). Укажите свой текст, используйте в качестве таймера число 0, оно заменится актуальным числом оставшихся секунд. Пример: «Баннер закроется через 0 секунд»;
  12. Стили текста на панели управления - CSS стили, которые можно назначить тексту на панели управления;
  13. Таймер закрытия (сек.) - количество секунд, которое должен показываться баннер (целое число);
  14. Цвет фона подложки - (по умолчанию #000000)- цвет фона на котором будет размещен HTML баннер в формате HEX, rgba;
  15. Время до показа кнопки "Закрыть" (сек.) - время через которое будет показана кнопка "Закрыть", если указано 0, кнопка появится сразу вместе баннером;
  16. Размер текста в "%" рассчитанный от высоты панели (по умолчанию 27%) - размер текста, рассчитанный в "%" от высоты панели управления;
  17. Показывать при отведении мыши из окна (yes|no) (по умолчанию работает со значением no) - показывать баннер при выводе указателя мыши из области видимости браузера, т.е. за пределы браузера. На тач-платформах (смартфоны/планшеты) fullscreen будет показан сразу при загрузке страницы, без учета данного параметра.

Добавление кода вставки на сайт

Код вставки для баннера FullScreen HTML разместите сразу после открывающего тега <body>.