Главная   ·   Справка   ·   Справка баннеры   ·   Спецификации   ·   HTML-FullScreen

HTML-FullScreen

  1. Карточка баннера
  2. Подготовка баннера
    1. Подготовка скрипта
    2. Подготовка файла index.html
      1. Кликовый элемент «Узнать подробнее»
      2. Кнопка «Пропустить заставку»
      3. Счетчик закрытия баннера «Таймаут»
      4. Элемент, останавливающий отсчет
  3. Загрузка баннера
  4. Проверка работоспособности

1. Карточка баннера

Описание:
баннер-заставка.
Тип кода:
Ajax.
Подробнее:
FullScreen на коде Ajax показывается на текущей странице, поверх контента сайта помещается IFrame, в котором на html/css/js создается креатив баннера. Баннер занимает 100% ширины и высоты экрана

2. Подготовка баннера

Скачайте архив.

2.1. Подготовка скрипта

Откройте текстовым редактором файл script.js из скачанного в пункте 2 архива (например, с помощью Блокнота).

В редактируемой части скрипта замените параметры ar_html и ar_pix на ваши собственные:

/*********editable-block********/
var ar_html	= 'index.html';
var ar_pix	= '';
/****************************/
ar_html
имя файла баннера. Впишите ваше имя файла. Если файл должен загружаться со стороннего сервера, впишите полный адрес, начинающийся с «http://» или «https://». В этом случае загружать файл в интерфейсе нет необходимости
ar_pix
ссылка для вызова стороннего счётчика. Если она не используется, оставьте параметр пустым

2.2. Подготовка файла index.html

Откройте текстовым редактором файл index.html. В тэгах <head> необходимо подключить файл adriverFullscreen.js. Для этого пропишите следующую строку:

<script src="adriverFullscreen.js"></script>

Для обозначения в index.html любого из обязательных элементов, необходимо присвоить содержащему этот элемент html-тэгу соответствующий класс. Обязательные элементы и соответствующие им классы приведены ниже:

2.2.1. Кликовый элемент «Узнать подробнее»

С помощью ссылки «Узнать подробнее» осуществляется переход на целевой сайт. Содержащему ее html-элементу необходимо присвоить класс adriverClick.

По умолчанию ссылка открывается в новом окне. Если ссылка должна быть открыта в текущем окне, то необходимо указать атрибут data-target со значением _top.

По умолчанию переход происходит по URL, заданному в интерфейсе AdRiver.

В случае если баннер содержит несколько ссылок перехода, указывается атрибут data-redirect, в значении которого прописывается URL-адрес, на который будет перенаправлен пользователь после клика.

Примечание: Если ссылка перехода в баннере одна, то атрибут data-redirect указывать не нужно.

Пример:

<a class="adriverClick adriverClose">Узнать подробнее</a>

Примечание: В кликовой ссылке указываются два класса (adriverClick и adriverClose), т.к. при клике баннер сначала закрывается, а потом осуществляется переход

Пример случая, когда нужно открыть баннер в текущем окне, и баннер содержит несколько кликовых областей с разными URL для перехода:

<a class="adriverClick adriverClose" data-redirect="http://www.samplesite.ru" data-target="_top">Узнать подробнее</a>

<a class="adriverClick adriverClose" data-redirect="http://www.news.samplesite.ru" data-target="_top">Узнать подробнее</a>

2.2.2. Кнопка «Пропустить заставку»

Кнопка отвечает за закрытие баннера. Соответствующему HTML-элементу необходимо присвоить класс “adriverClose”. Текст может быть любой.

Пример:

<a class="adriverClose">Пропустить заставку</a>

2.2.3. Счетчик закрытия баннера «Таймаут»

Таймаут включается сразу после загрузки креатива баннера. Значение обратного счетчика выводится на экран. Стандартно таймаут устанавливается в 5-15 секунд. Однако важно знать, что каждая площадка предъявляет свои требования к таймауту: например, у Mail.ru длительность таймаута составляет 7 секунд. Поэтому перед созданием баннера необходимо уточнять требования к длительности таймаута у конкретной рекламной площадки.

Класс, присваиваемый таймауту – adriverReturn. Атрибуты:

  • атрибут data-time – время до закрытия баннера
  • атрибут data-message – сообщение закрытия

Пример:

<a class="adriverReturn" data-time="7" data-message="До возврата на сайт осталось %time% секунд."></a>

где %time% – это количество секунд до закрытия баннера (подсчитывается и изменяется автоматически).

2.2.4. Элемент, останавливающий отсчет

Отсчет таймаута можно остановить с помощью элемента Остановить отсчёт. Данному элементу присваивается класс adriverPause.

Пример:

<a class="adriverPause">Остановить отсчёт</a>

3. Загрузка баннера

  1. Добавьте баннер special → AjaxJS → Generic-AjaxJS.
  2. Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры.
  3. Нажмите на кнопку Добавить. Вы попадете на страницу редактирования параметров баннера.
  4. Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных значений нажмите на кнопку Сохранить.
  5. Кликните по ссылке Загрузить баннер.
  6. Выберите с помощью кнопки Обзор подготовленный в пункте 2.1. файл script.js и подготовленный в пункте 2.2. файл index.html.
  7. Выберите с помощью кнопки Обзор файл adriverFullscreen.js из скачанного в пункте 2 архива.
  8. Нажмите на кнопку Загрузить.

Размер загружаемых файлов должен соответствовать спецификации.

4. Проверка работоспособности

  • Если кликнуть по «подробнее», должно открыться окно с сайтом рекламодателя.
  • Если кликнуть по «пропустить заставку», должно открыться окно с сайтом, на котором размещен баннер.