AdRiver - система управления интернет-рекламой
О компании Справочное руководство Вход в систему
Рекламным агентствам  AdRiver DSP 
Владельцам сайтов  AdRiver SSP 
Управление рекламой  AdRiver DMP 
Новости

Мультипанельные баннеры (MPU, FlyScreen, OverLay)

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

Описание:
несколько взаимосвязанных Flash-роликов.
Тип кода:
Ajax.
Примеры:
Подробнее:
баннер MPU состоит из нескольких Flash-роликов, один из которых, мастер (master), управляет взаимодействием панелей (panel) и скрипта. Мастер никогда не показывает сам баннер. Он загружается первым и ждёт, когда загрузятся панели. Всё взаимодействие панелей происходит только через мастер, относительно которого они позиционируются. Как только все панели загружены, вызывается функция, указанная при инициализации мастера. Эта функция запускает логический сценарий ролика. До этого момента и мастер, и панели остановлены. В первом кадре каждой панели проводится инициализация и отправка мастеру сообщения о том, что панель загружена и готова принимать команды. После этого панель останавливается. Панели взаимодействуют друг с другом только через мастера. Для этого используется команда sendSync (метка синхронизации). Диспетчер сценария мастера отслеживает команды от панелей и выполняет необходимые действия.
Обсчёт внешними системами:
Другие названия формата:
мультипанельный баннер, MPU, FlyScreen, OverLay

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

2.1. Подготовка мастера

Скачайте пример комплекта файлов.

Сохраните в одну папку файл master1.as и исходники мастера (файлы master.fla, master.flv).

В первый фрейм мастера пропишите следующий код:

#include "master1.as" 

function startScene(panel, sync) { 
	switch (sync) { 
	  case "showPanel1" : 
		showPanel("panel1"); 
		sendToPanel("panel1","go","start"); 
		        break; 
	  case "showPanel2" : 
		showPanel("panel2"); 
		sendToPanel("panel2","go","start"); 
		        break; 

	  case "hidePanel1" : 
		hidePanel("panel1"); 
		       break; 
	  case "hidePanel2" : 
		hidePanel("panel2"); 
		       break; 
		} 
	} 

function initDone() { 
	  sendEvent(0); 
	  showPanel("panel1"); 
	  sendToPanel("panel1","go","start"); 
	} 

registerMaster(initDone,startScene,["panel1", "panel2"]); 
stop();

Описание:

function startScene(panel, sync)
диспетчер сценария. Реализует сценарий взаимодействия панелей
function initDone()
выполняет первичную инициализацию ролика. Выполняется автоматически, когда все панели загружены
sync
метка синхронизации, с помощью неё мастер получает отчёты от панелей. Панель, отправившая команду sync может остановиться, а может продолжать выполнение команд
showPanel
открыть панель
hidePanel
закрыть панель
sendToPanel
отправить панели команду перейти к определённой метке
sendEvent
сообщить AdRiver о событии
registerMaster(initDone, startScene, ["panel1", "panel2"])
регистрация мастера и ожидание подтверждения о загрузке панелей. В качестве аргументов указываются:
initDone
функция инициализации
startScene
функция диспетчера сценария
["panel1", "panel2"]
список панелей с идентификаторами

Для создания собственного сценария взаимодействия панелей используйте команды showPanel, hidePanel, sendToPanel.

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

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

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

Сохраните в одну папку файл panels1.as и исходники всех панелей.

При начальной загрузке панелей слои, в которые они загружены, открыты (значение visible), поэтому первый кадр панели обычно делается прозрачным.

В первом кадре Flash-ролика каждой панели пропишите команды:

#include "panels1.as"

registerPanel("panel1");	// регистрируем панель, сообщая мастеру её id
stop();				// останавливаемся и ждем дальнейших команд от мастера

panel1 – это имя панели, которое указывается в управляющем файле script.js и в мастере для отправки команд этой панели.

Чтобы сообщить мастеру о том, что нужно переходить к следующему этапу, пропишите в нужном кадре панели следующий код:

_root.sendSync("hidePanel1");
_root.sendSync("showPanel2");   // перейти ко второй панели 
stop();

Чтобы определить, сколько раз за демонстрацию всего баннера могут появляться панели, в первом кадре мастера пропишите следующий код:

#include "master1.as"

_root.deb.text = "";

var k=3; // количество показов 
var i=0;

function debug(txt){
    trace(txt);
    _root.deb.text += txt + "\n";     
}
function startScene(panel, sync){
     debug ("received: " + sync + " from: " + panel);
     switch (sync){
         case "showPanel2": 		//пришла метка showPanel2
	     if (i<k) {
                showPanel("panel2");     //показать второй элемент panel
                sendToPanel("panel2","go","start");
                                         //просим второй элемент panel перейти к метке start
                } i++;
	     break;
        case "playPanel1": 
             sendToPanel("panel1", "go", "continue");
             break;
        case "hidePanel2":		//пришла метка hidePanel2
             hidePanel("panel2");	//прячем второй элемент panel
	     break;
	}	
}
function initDone(){
       debug ("initDone");
	sendEvent(0);		        //сообщить системе AdRiver, что ролик полностью загружен
	hidePanel("panel2");	        //спрятать элемент panel2
	showPanel("panel1");	        //открыть элемент panel1
	sendToPanel("panel1","go","start");	
                                        //просим первый элемент panel перейти к метке start. 
}
registerMaster(initDone, startScene, ["panel1", "panel2"]);
stop();                                 //Останавливаемся и ждем, пока все панели загрузятся

Для учёта клика создайте в нужном кадре Flash-ролика элемент button, для которого напишите следующий код:

on (release) {
 _root.makeClick()
}

Эта функция может также использоваться с параметром – альтернативным адресом перехода: _root.makeClick("http://www.example.com") , где http://www.example.com - адрес перехода.

Если вы хотите подгружать в Flash-ролик дополнительные части, загруженные в баннер, то необходимо дописать к имени подгружаемого компонента перeменную _root.ar_comppath.

Например, для Flash-файлов:

_root.ar_comppath + 'flash_name.swf'

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

3.1. Подготовка мастера

Скачайте пример комплекта файлов.

Сохраните в одну папку исходники всех Flash-роликов и папку adriver, содержащую библиотеки masterAS3.as и panelsAS3.as.

В первый кадр мастера впишите следующий код:

import adriver.masterAS3;

var my_adriver:masterAS3 = new masterAS3(this);
my_adriver.startScene = function(panel, sync){
	with(this){
		switch(sync){
			case "showPanel1":
				showPanel("panel1");
				sendToPanel("panel1", "go", "start");
				break;
			case "showPanel2":
				showPanel("panel2");
				sendToPanel("panel2", "go", "start");
				break;
			case "hidePanel1":
				hidePanel("panel1");
				break;
			case "hidePanel2":
				hidePanel("panel2");
				break;
		}
	}
}
my_adriver.initDone = function(){
	with(this){
		sendEvent(0);
		showPanel("panel1");
		sendToPanel("panel1", "go", "start");
	}
}

Описание:

function startScene(panel, sync)
диспетчер сценария. Реализует сценарий взаимодействия панелей
function initDone()
выполняет первичную инициализацию ролика. Выполняется автоматически, когда все панели загружены
sync
метка синхронизации, с помощью неё мастер получает отчёты от панелей. Панель, отправившая команду sync может остановиться, а может продолжать выполнение команд
showPanel
открыть панель
hidePanel
закрыть панель
sendToPanel
отправить панели команду перейти к определённой метке
sendEvent
сообщить AdRiver о событии

Для создания собственного сценария взаимодействия панелей, используйте команды showPanel, hidePanel, sendToPanel.

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

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

3.2. Подготовка панелей

При начальной загрузке панелей слои, в которые они загружены, открыты (значение visible), поэтому первый кадр панели обычно делается прозрачным.

В первом кадре Flash-ролика каждой панели пропишите команды:

import adriver.panelsAS3;
var my_adriver:panelsAS3 = new panelsAS3('panel1', this);
stop();

panel1 – это имя панели, которое указывается в управляющем файле script.js и в мастере для отправки команд этой панели.

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

my_adriver.sendSync("showPanel2");

Для учёта клика создайте в нужном кадре Flash-ролика элемент button, для которого напишите следующий код:

function cl(event:MouseEvent):void {
	 my_adriver.makeClick();
}
_click.addEventListener(MouseEvent.CLICK, cl);

Если вы хотите подгружать в Flash-ролик дополнительные части, загруженные в баннер, то необходимо дописать к имени подгружаемого компонента перeменную ar_comppath следующим образом (пример для Flash-файлов):

my_adriver.ar_comppath + 'flash_name.swf'

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

my_adriver.sendEvent(2);

где 2 – это пример отправляемого номера события.

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

Откройте текстовым редактором файл script.js.

Аккуратно внесите изменения в скрипт. Пример:

var ar_gif	      = '0.gif';
var ar_gif_href	  = '';
var ar_pix	      = '';

Переменные:

ar_gif
имя заглушки. Впишите ваше имя файла. Если заглушка располагается на стороннем сервере, впишите полный адрес, начинающийся с «http://» или «https://»
ar_gif_href
альтернативный клик по заглушке. Если не нужен, оставьте пустым
ar_pix
вызов стороннего счётчика для баннера. Если не нужен, оставьте пустым

Дополнительные переменные, которые можно редактировать:

var m_html  = a.makeFlash('master.swf'),
    p1_html = a.makeFlash('panel1.swf', {wmode: 'transparent'}),
    p2_html = a.makeFlash('panel2.swf');
			
a.MPU.addPanel("master", {width:"240px", height:"400px"}, m_html);
a.MPU.addPanel("panel1", {width:"800px", height:"400px", position:"absolute", left:"0px", top:"0px", zIndex:2}, p1_html);
a.MPU.addPanel("panel2", {width:"240px", height:"400px", position:"absolute", left:"0px", top:"0px", zIndex:1}, p2_html);

a.p.innerHTML = a.makeImage(ar_gif, ar_gif_href, 240, 400);

Переменные:

master.swf, panel1.swf, panel2.swf
имена мастера и панелей. Впишите ваши имена файлов. Файлы могут быть загружены со стороннего сервера — в этом случае впишите полный адрес, начинающийся с «http://» или «https://»
width, height
высота и ширина мастера и панелей. При необходимости, укажите ваши значения
left, top
смещение панелей. При необходимости, укажите ваши значения

При необходимости, измените другие параметры отображения баннера: position, zIndex.

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

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

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

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

  1. Скачайте страничку для тестирования на веб-сервере.
  2. Распакуйте LocalTest.zip и скопируйте в эту папку креативы баннера (все .swf файлы), а также заглушку .gif
  3. Откройте файл index.html через ваш локальный веб-сервер. Баннер должен показываться корректно, согласно задуманной логике взаимодействия, наложениям, таймингам, позиционированию панелей относительно друг друга и т.п.
  4. Кликните по баннеру, если происходит переход на сайт клиента или другой сайт, значит клик прописан неправильно.

Важно! В сложных связных панелях система AdRiver или рекламное агентство не имеют возможности проверять и/или исправлять логику, положенную в основу работы Flash-роликов. За корректность последовательности вызова разных панелей и проверку логики их работы отвечает дизайнер, разрабатывающий сложный креатив.

7. Ограничения на размер загружаемых файлов в системе AdRiver

 

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

Последнее обновление: 29.04.2016