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

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

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

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

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

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

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

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

Для баннеров на ActionScript 2

 

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

Для баннеров на ActionScript 3

 

Для упрощения подготовки стандартных баннеров согласно техническим требованиям 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
    вызов стороннего счётчика для заглушки. Если не нужен, оставьте поле пустым
  3. Если у вас есть только один код сторонней системы для подсчёта показов, то впишите его и как значение переменной ar_flash_pixel, и как значение переменной ar_gif_pixel
  4. Сохраните подготовленный файл 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"]
    список панелей с идентификаторами
  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		= '';
    

    Переменные:

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

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

    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. Ограничения на размер загружаемых файлов в системе AdRiver

 

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

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