HTML-FullScreen



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. Проверка работоспособности

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