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



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

Описание:
угловой баннер, расхлопывающийся по наведению курсора мыши.
Тип кода:
JavaScript, Ajax.
Подробнее:
топор с расхлопом — баннер, визуально состоящий из двух соединенных блоков: горизонтального (сходного по виду с TopLine) и вертикального, которые располагаются в верхней части страницы. В свёрнутом виде представляет собой угол, образованный двумя блоками. При наведении мыши раскрывается до своего полного размера, закрывая контент страницы. Изготавливается по технологии Flash, способен нести любую визуальную информацию и/или интерактивные элементы как в закрытом, так и в раскрытом виде. Баннер этого типа состоит из Flash-ролика, который раскрывается и сворачивается по наведению курсора мыши.
Обсчёт внешними системами:
пиксель-аудит в Flash-баннерах.

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом 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   = '';

    Переменные:

ar_flashver
минимальная версия Flash-плагина, необходимая посетителю для просмотра ваших Flash-роликов
ar_topor
имя Flash-ролика. Впишите ваше имя файла. Если вы загружаете Flash-ролик со стороннего сервера, впишите полный адрес, начинающийся с «http://» или «https://». В этом случае загружать файл в систему не придется
ar_w
ширина Flash-ролика. Этот параметр должен соответствовать размерам вашего ролика
ar_h
высота Flash-ролика. Этот параметр должен соответствовать размерам вашего ролика
ar_top_gif
имя верхней заглушки .gif. Впишите ваше имя файла. Если вы загружаете заглушку со стороннего сервера, впишите полный адрес, начинающийся с «http://» или «https://». В этом случае загружать её в систему не придется. Вы можете указать только одну заглушку. Если заглушки нет, оставьте поле пустым
ar_right_gif
имя правой заглушки .gif. Впишите ваше имя файла. Если вы загружаете заглушку со стороннего сервера, впишите полный адрес, начинающийся с «http://» или «https://». В этом случае загружать её в систему не придется. Вы можете указать только одну заглушку. Если заглушки нет, оставьте поле пустым
ar_target
впишите «id» блока, к которому будет привязан Flash-ролик. Либо впишите «null», если баннер привязан к тэгу <body>
ar_flash_pixel
вызов стороннего счётчика для Flash-ролика. Если не нужен, оставьте поле пустым
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();                                 //Останавливаемся и ждем, пока все панели загрузятся
    

    Описание:

function startScene(panel, sync)
диспетчер сценария. Реализует сценарий взаимодействия панелей
function initDone()
выполняет первичную инициализацию ролика. Выполняется автоматически, когда все панели загружены:
sync
метка синхронизации, с помощью неё мастер получает отчёты от панелей. Панель, отправившая команду sync, может остановиться, а может продолжать выполнение команд
showPanel
открыть панель
hidePanel
закрыть панель
sendToPanel
отправить панели команду перейти к определённой метке
sendEvent
сообщить AdRiver о событии
registerMaster(initDone, startScene, [«panel1», «panel2»])
регистрация мастера и ожидание подтверждения о загрузке панелей. В качестве аргументов указываются:
initDone
функция инициализации
startScene
функция диспетчера сценария
[«panel1», «panel2»]
список панелей с идентификаторами
  1. На кнопку для клика — элемент button, пропишите следующий код:
    on (rollOver) {
    	showPanel("panel1");	                //открыть panel1
    	sendToPanel("panel1","go","start");	// panel1 перейти к метке start. 
    }
    on(release){
    	makeClick()
    }
    
  2. Для создания собственного сценария взаимодействия панелей, используйте команды 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		= '';
    

Переменные:

ar_gif
имя заглушки. Укажите ваше имя файла. Заглушка может быть загружена со стороннего сервера — в этом случае впишите полный адрес, начинающийся с «http://» или «https://»
ar_gif_href
альтернативный клик по заглушке. Если не нужен, оставьте поле пустым
ar_pix
вызов стороннего счётчика для баннера. Если не нужен, оставьте поле пустым
  1. Дополнительные переменные, которые можно редактировать:
    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);
    

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

master.swf
имя мастера. Впишите ваше имя файла
panel1.swf
имя первой панели; Впишите ваше имя файла
panel2.swf
имя второй панели. Впишите ваше имя файла
width
ширина мастера и панелей. При необходимости, укажите ваши значения
height
высота мастера и панелей. При необходимости, укажите ваши значения
left
смещение мастера и панелей по горизонтали. При необходимости, укажите ваши значения
top
смещение мастера и панелей по вертикали. При необходимости, укажите ваши значения
position
позиционирование мастера и панелей. При необходимости, укажите ваши значения
zIndex
положение элементов по оси z

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

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

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

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