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

MPU-баннер, меняющий фон страницы

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

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

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

2.1. Мастер

  1. Скачайте пример комплекта файлов.
  2. Сохраните в одну папку файл master1.as и исходники мастера.
  3. В первый фрейм мастера пропишите следующий код:
    #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("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(); //Останавливаемся и ждем, пока все панели загрузятся

В нужном месте панели, где происходит смена фона страницы пропишит следующий код:

_root.sendToJS('showBG', 'panel1', n);

где n – порядковый номер фонового рисунка, начиная с 0.

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

on (release) {
 _root.makeClick()
}

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

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

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

 _root.ar_comppath + 'flash_name.swf'

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

2.3. Скрипт

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

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

var ar_gif		     = '0.gif';
var ar_gif_href		 = '';
var ar_pix		     = '';
var ar_content_width = 995;
var ar_bg_images	 = ["sf_banner_Brasil_woman.jpg", "sf_banner_Thailand_woman.jpg", "sf_banner_tibet_woman.jpg"];
var ar_bg_colors	 = ["#66cbdf", "#f4e3d1", "#296e69"];
ar_gif
имя заглушки. Впишите ваше имя файла. Если заглушка располагается на стороннем сервере, впишите полный адрес, начинающийся с «http://» или «https://»
ar_gif_href
альтернативный клик по заглушке. Если не нужен, оставьте пустым
ar_pix
вызов стороннего счётчика для баннера. Если не нужен, оставьте пустым
ar_content_width
ширина конента сайта. Этот параметр нужно указывать для правильной работы кликовых областей
ar_bg_images
массив, содержащий имена фоновых рисунков
ar_bg_colors
массив, содержащий обозначения фоновых цветов (в формате Hex color)

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

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

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

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

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

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

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

  1. Страничка для тестирования на веб-сервере.
  2. Откройте тестовую страничку в браузере. Баннер должен показываться корректно, согласно задуманной логике взаимодействия, наложениям, таймингам, позиционированию панелей относительно друг друга и т.п.
  3. Кликните по баннеру, если происходит переход на сайт клиента или другой сайт, значит клик прописан неправильно.

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

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

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

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