Топор с расхлопом

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

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом Poster или специальным кодом Ajax. В остальных случаях используйте стандартные коды Ajax или Extension.

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

2.1. Подготовка Flash-ролика

Подготовьте Flash-ролик, который будет раскрываться по наведению курсора мыши.

Подготовьте кликовую область Flash-ролика согласно инструкции.

Для упрощения подготовки стандартных баннеров согласно техническим требованиям AdRiver вы можете воспользоваться специальным приложением AdRiver Creative Toolkit.

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

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

1. Распакуйте пример
2. Откройте текстовым редактором файл script.js. Внесите изменения только в верхнюю часть скрипта, отмеченную как Editable block:

   var ar_flashver    = 8;
   
   var ar_topor       = 'topor.swf';
   var ar_w           = 733;
   var ar_h           = 400;
   
   var ar_top_gif     = 'top.gif';
   var ar_right_gif   = 'right.gif';
   
   var ar_target      = 'aidi';
   
   var ar_flash_pixel = '';
   var ar_gif_pixel   = '';

   Переменные:

1. Если у вас есть только один код сторонней системы для подсчёта показов, то впишите его и как значение переменной ar_flash_pixel, и как значение переменной ar_gif_pixel
2. Сохраните подготовленный файл script.js. Баннер готов к загрузке

Если баннер привязан к блоку, то обязательно указывайте в параметрах блока position: relative или position: absolute для правильного позиционирования баннера.

Размеры заглушек должны совпадать с размерами Flash-ролика: верхняя заглушка по ширине должна быть равна ar_w, а по высоте — верхней части неразвёрнутого Flash-ролика, боковая заглушка по ширине должна быть равна правой части неразвёрнутого Flash-ролика, а по высоте — ar_h.

Устанавливайте код для баннера после блока, к которому привязан баннер.

Рекомендуем ставить код JavaScript в самый конец документа, перед закрывающим тегом </html>, чтобы код не мешал грузиться странице даже при плохой связи с AdRiver.

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

3.1. Подготовка Flash-ролика

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

Мастер

1. Скачайте пример комплекта файлов
2. Сохраните в одну папку файл master1.as и исходники мастера
3. В первый фрейм мастера пропишите следующий код:

   #include "master1.as"
   _root.deb.text = "";
   
   function debug(txt){
       trace(txt);
       _root.deb.text += txt + "n";     
   }
   function startScene(panel, sync){
        debug ("received: " + sync + " from: " + panel);
        switch (sync){
   	case "showPanel1": 		//пришла метка showPanel1
   	     showPanel("panel1");	//показать элемент panel1
   	     sendToPanel("panel1","go","start"); //просим первую панель перейти к метке start
   		     break;
           case "hidePanel1":		//пришла метка hidePanel1
                hidePanel("panel1");	//прячем элемент panel1
   	     break;
   	}	
   }
   function initDone(){
           debug ("initDone");
   	sendEvent(0);		        //сообщить AdRiver, что ролик полностью загружен
   	hidePanel("panel1");
   	ExternalInterface.call("adriver('" + _root.ar_ph + "').MPU.dispatch", "master", "show");
   	showPanel("panel2");
   }
   registerMaster(initDone, startScene, ["panel1", "panel2"]);
   stop();                                 //Останавливаемся и ждем, пока все панели загрузятся
   

   Описание:

4. На кнопку для клика — элемент button, пропишите следующий код:

   on (rollOver) {
   	showPanel("panel1");	                //открыть panel1
   	sendToPanel("panel1","go","start");	// panel1 перейти к метке start. 
   }
   on(release){
   	makeClick()
   }
   

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

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

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

Панели

1. Сохраните в одну папку файл panels1.as и исходники всех панелей (из скачанного выше примера)
2. При начальной загрузке панелей слои, в которые они загружены, открыты (значение visible), поэтому первый кадр панели обычно делается пустым;
3. В Flash-ролике для первой панели пропишите следующие команды:

   В первом кадре:

   #include "panels1.as"
   registerPanel("panel1");	
   

   В нужном кадре (например, в третьем для избежания прохода в первый кадр панели):

   gotoAndStop(2);

   Кнопка должна быть на весь размер Flash-ролика:

   on (release) {
   	makeClick()
   }
   on (rollOut) {
   	sendSync("hidePanel1")
   }
   

4. В первом кадре второй панели пропишите команды:

   #include "panels1.as"
   registerPanel("panel2");
   stop();
   

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

1. Откройте текстовым редактором файл script.js
2. Аккуратно внесите изменения в скрипт. Пример:

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

Переменные:

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

   var m_html  = a.makeFlash('master.swf',{wmode:"opaque"}),
   var p1_html = a.makeFlash('panel1.swf',{wmode:"opaque"}),
   var p2_html = a.makeFlash('panel2.swf',{wmode:"opaque"});
   			
   a.MPU.addPanel("master", {width:"120px", height:"600px", left:"1000px", top:"90px", position:"absolute", zIndex:1}, m_html);
   a.MPU.addPanel("panel1", {width:"1120px", height:"600px", position:"absolute", left:"0px", top:"90px", zIndex:2}, p1_html);
   a.MPU.addPanel("panel2", {width:"1120px", height:"90px", position:"absolute", left:"0px", top:"0px", zIndex:1}, p2_html);
   

Дополнительные переменные:

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

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

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

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

• Типы кодов в AdRiver
• Баннер топор
• Приложение для подготовки баннеров согласно тех. требованиям AdRiver