HTML MPU



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

Описание:
несколько взаимосвязанных HTML-креативов.
Тип кода:
Ajax.
Подробнее:
HTML MPU баннер состоит из нескольких HTML-панелей и управляющего скрипта баннера script.js. Как только все панели загружены, вызывается функция ar_initDone, указанная в script.js. Эта функция запускает логический сценарий ролика. Из каждой панели отправляются сообщения управляющему скрипту script.js о том, что панель загружена и готова принимать команды. Панели взаимодействуют друг с другом только через script.js. Для этого используется команда sendSync (метка синхронизации). Диспетчер сценария (функция ar_startScene) отслеживает команды от панелей и выполняет необходимые действия.

Примечание: Данная инструкция описывает наиболее часто используемые функциональности баннера mpu, при которых баннер состоит из двух панелей. Если данная инструкция не позволяет реализовать задуманное поведение html mpu баннера, или вам требуется использовать более двух панелей, вы можете скачать по ссылке инструкцию по подготовке html mpu баннера в общем виде, которая дает возможность разработать баннер с абсолютной любой логикой работы.

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

Баннер состоит из нескольких файлов: управляющего файла script.js, скриптов panel.js и mpuhtml.js, нескольких HTML-панелей (в примерах ниже – panelBig.html и panelSmall.html) и одного или нескольких изображений (в примерах – adriver_logo.png).

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

2.1.1. Скрипт для MPU с панелями заданного размера

Скачайте архив с примером.

Откройте текстовым редактором файл script.js. В редактируемой части скрипта укажите нужные значения:

var ar_big_name     = 'panelBig.html',
	ar_big_width    = '1000px',
	ar_big_height   = '400px',
	
	ar_small_name   = 'panelSmall.html',
	ar_small_width  = '300px',
	ar_small_height = '400px',
	
	ar_align        = '3', 
	
	ar_gif		    = '0.png', 
	ar_gif_href    	= '', 
	ar_gif_width	= '240px', 
	ar_gif_height	= '400px', 
	ar_pix		    = '';

Переменные:

ar_big_name
имя большой панели
ar_big_width
ширина большой панели
ar_big_height
высота большой панели
ar_small_name
вимя маленькой панели
ar_small_width
ширина маленькой панели
ar_small_height
высота маленькой панели
ar_align
направление расхлопа. 0 – расхлоп вправо, 1 – расхлоп влево, 3 – в зависимости от расположения баннерного места, баннер расхлопывается влево или вправо
ar_gif
имя заглушки
ar_gif_href
альтернативный клик по заглушке
ar_gif_width
ширина заглушки
ar_gif_height
высота заглушки
ar_pix
вызов стороннего счетчика

Сохраните измененный файл script.js.

По умолчанию показывается маленькая панель, по наведению раскрывается большая. Если показ баннера необходимо начинать с раскрытия большой панели, необходимо внести следующие изменения в функцию initDone(), описанную в файле script.js:

ar_initDone = function initDone() { 
 console.log('initDone');
 sendEvent(0);
 showPanel('panelBig');
 sendToPanel('panelBig', 'go', 'test');
}

2.1.2. Скрипт для MPU с большой панелью, раскрывающейся на 100% экрана

Скачайте архив с примером.

Откройте текстовым редактором файл script.js. В редактируемой части скрипта укажите нужные значения:

var ar_big_name     = 'panelBig.html',
	ar_big_width    = '100%',
	ar_big_height   = '100%',
	
	ar_small_name   = 'panelSmall.html',
	ar_small_width  = '300px',
	ar_small_height = '400px',
	
	ar_gif		    = '0.png',
	ar_gif_href	    = '',
	ar_gif_width	= '240px', 
	ar_gif_height	= '400px', 
	ar_pix		    = '';

Переменные:

ar_big_name
имя большой панели
ar_big_width
ширина большой панели
ar_big_height
высота большой панели
ar_small_name
имя маленькой панели
ar_small_width
ширина маленькой панели
ar_small_height
высота маленькой панели
ar_gif
имя заглушки
ar_gif_href
альтернативный клик по заглушке
ar_gif_width
ширина заглушки
ar_gif_height
высота заглушки
ar_pix
вызов стороннего счетчика

Сохраните измененный файл script.js.

По умолчанию показ баннера начинается с раскрытия большой панели. Если показ баннера необходимо начинать с маленькой панели, а раскрывать большую панель необходимо по какому-либо действию пользователя (например, наведению), необходимо внести следующие изменения в функцию initDone(), описанную в файле script.js:

ar_initDone = function initDone() { 
  console.log('initDone');
  sendEvent(0);
  showPanel('panelSmall');
  sendToPanel('panelSmall', 'go', 'test');
}

2.2. Подготовка HTML-панелей

В файлах panelSmall.html и panelBig.html в тегах <head></head> необходимо подключить файл panel.js:

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

Примечание: При необходимости, файл panel.js можно не загружать в баннер, а разместить у себя на сервере. В таком случае, в параметре src необходимо прописать полный путь к файлу на сервере, например: <script src=”http://www.samplesite.com/scripts/banners/htmlmpu/panel.js”></script>

Также каждую панель необходимо зарегистрировать соответствующей командой:

registerPanel('panelSmall');

panelSmall — это соответствующее имя панели (panelSmall, panelBig или другое).

Взаимодействие между панелями происходит при помощи следующих команд:

sendSync('hidePanelBig');    // сворачивание большой панели
sendSync('showPanelSmall');  // отображение маленькой панели
sendSync('hidePanelSmall');  // сворачивание маленькой панели
sendSync('showPanelBig');    // отображение большой панели

Осуществление перехода на сайт рекламодателя и учет клика реализуются вызовом следующей функции:

makeClick();

Если в баннере присутствуют кнопки с альтернативными адресами перехода, то адрес перехода следует указывать в функции makeClick() в качестве параметра. Клик по таким кнопкам будет учитываться в статистике баннера, а переход произойдет на указанный URL-адрес. Например:

makeClick("http://adriver.ru");

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

clickArea.onclick = function () {
  sendSync('hidePanelBig');
  sendSync('showPanelSmall');
  makeClick();
}

В примере отслеживается клик по области clickArea (определенной ранее), закрывается большая панель, показывается малая и осуществляется переход по ссылке рекламодателя, указанной в поле баннера Url ссылки.

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

  • id button – назначается элементу, при клике (наведении) по которому осуществляется показ большой панели
  • id close – назначается элементу, при клике по которому большая панель закрывается
  • id creative – назначается элементу, при клике по которому осуществляется переход на сайт рекламодателя

Пример назначения элемента, при щелчке по которому открывается большая панель:

<p id="button">Открыть Большую панель</p>
<script>
window.onload = function () {

  var button = document.getElementById('button');
  button.onclick = function () {
	sendSync('showPanelBig');
  }

}
</script>

Иногда требуется учитывать разные события в баннере, например, открытие вкладки и т.д. Всего доступно 10 событий с номерами от 0 до 9. Событие ноль (0) является служебным и сообщает о том, что баннер готов к показу. Перед тем, как регистрировать события 1 — 9, необходимо зарегистрировать событие ноль (0). Обычно это делается в функции initDone. Для регистрации событий используется команда sendEvent(eventId). Если учитывать события не планируется, то команду sendEvent(0) в функции initDone можно не использовать.

Подробнее об учёте событий в баннерах.

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

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

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

4. Полезные ссылки