- Справка баннеры
- Переименованные типы кодов
- HTML-Banner (HTML5)
- HTML-Fullsreen
- Flash banner
- Synchronized flash banners
- ScreenGlide
- FullScreen
- Expandable
- TopLine
- PeelDown
- Hatchet
- BackGround
- ScreenGlideClick
- ExpandableClick
- Expandable “Hatchet”
- Polite banner
- Pop-Under (Pop-Up)
- XML-banner
- MPU banners
- Rich-media
- Flash banner preparation for further AdRiver pixel insertion
- Video banner
- TopLine с растягивающимся Flash-роликом на коде extension
- TopLine с отдельными элеменатми на коде extension
- TopLine на коде poster
- TopLine на коде AjaxJS
- Rich-media на коде AjaxJS
- Slider
- MediaText (Комод) на коде html240x400
- PictContext на коде AjaxJS
- HTML-баннер на коде HTML 728×90
- HTML-баннер на коде AjaxJS
- Пример реализации дублирования баннера
- ExpandableMove на коде extension
- ExpandableMove на коде poster
- ExpandableMove на коде AjaxJS
- Expandable на коде AjaxJS
- ScreenGlide на коде AjaxJS
- ScreenGlideMove на коде AjaxJS
- ExpandableScreenGlide на коде AjaxJS
- ExpandableScreenGlideMove на коде AjaxJS
- Текстовый блок
- Баннер нестандартного размера
- Форма в HTML-баннере
- Тизерный блок
- LinkContext
- Графический баннер
- Общие технические требования к баннерам
- CatFish
- Slider
- Пример баннера HTML-FullScreen
- Пример HTML MPU баннера, раскрывающегося при наведении, закрывающегося по клику
- Пример HTML MPU баннера с большой панелью, раскрывающейся на 100% экрана
- Варианты снижения расхождений вызова кода ajax с системами веб-аналитики
- Доп. возможности баннеров
- Спецификации
- Видео VAST VPAID
- Видео VAST
- HTML-баннер (HTML5)
- CatFish
- HTML-FullScreen
- Click BackGround
- Брендирование
- Native Video
- HTML MPU
- Топор
- TopLine
- Expandable
- Rich-media
- BackGround
- ExpandableClick
- PictContext
- MediaText (Комод)
- ScreenGlide
- Баннер нестандартного размера
- ScreenGlideClick
- ScreenGlideMove
- ExpandableMove
- ExpandableScreenGlideMove
- XML-баннер
- ExpandableScreenGlide
- Текстово-графический блок
- Тизерный блок
- LinkContext
- Графический баннер
- Слайдер
- Аудио-баннер DAAST
- Баннер по положению устройства
- Примеры баннеров
- Пример баннера HTML-FullScreen
- Пример баннера HTML
- Пример баннера CatFish
- Пример баннера Click BackGround
- Пример баннера Брендирование
- Пример баннера HTML MPU
- Пример баннера Топор
- Пример баннера Native Video
- Пример баннера TopLine
- Пример баннера VAST
- Пример баннера VAST VPAID
- Пример баннера Expandable
- Пример баннера Rich-Media
- Пример баннера BackGround
- Пример баннера ExpandableClick
- Пример баннера PictContext
- Пример баннера MediaText (Комод)
- Пример баннера ScreenGlide
- Пример баннера нестандартного размера
- Пример баннера ScreenGlideClick
- Пример баннера ScreenGlideMove
- Пример баннера ExpandableMove
- Пример баннера ExpandableScreenGlideMove
- Пример баннера ExpandableScreenGlide
- Пример баннера Текстово-графический блок
- Пример баннера LinkContext
- Пример графического баннера
- Пример баннера Слайдер
- Пример баннера по положению устройства
- Пример баннера Тизерный блок
- Устаревшие форматы
- Спецификации устаревших форматов
- Мультипанельные баннеры (MPU, FlyScreen, OverLay)
- SideKick
- ShowCase
- MenuOverlay
- Видеобаннер
- Радиобаннер
- FlashFull
- Баннер в приложении для iPhone/iPad
- MultiScreen
- Сессионный Poster
- Minisite
- MPU-баннер, меняющий фон страницы
- Баннер наблюдатель
- SideKick из Rich-Media
- Баннер, ведущий на разные страницы в зависимости от геозоны
- Flash-баннер
- PoliteBanner
- Pop-Under (Pop-Up)
- Топор с расхлопом
- BackOver
- PeelDown (уголок)
- FullScreen
- Инструменты
- Функциональности устаревших форматов
- Flash-AjaxJS
- Flash468x60
- Pop-Under на коде JavaScript
- Pop-Under на коде AjaxJS
- Топор с расхлопом на коде JavaScript
- PeelDown на коде JavaScript
- PeelDown на коде AjaxJS
- FullScreen на коде AjaxJS
- SideKick на коде AjaxJS
- Видеобаннер на коде flash 240×400
- FlashFull на коде AjaxJS
- Топор с расхлопом на коде ajax
- MultiScreen
- Баннер наблюдатель
- FullScreen на коде extension
- Примеры устаревших форматов
- Пример баннера Сессионный Poster
- Пример MPU-баннера, меняющего фон страницы
- Пример баннера-наблюдателя
- Пример баннера, ведущего на разные страницы в зависимости от геозоны
- Пример Flash-баннера
- Пример баннера Pop-Under (Pop-Up)
- Пример баннера Топор с расхлопом
- Пример баннера FullScreen
- Пример мультипанельного баннера (MPU, FlySreen, Overlay)
- Пример баннера SideKick
- Пример баннера ShowCase
- Пример баннера MenuOverlay
- Пример видеобаннера
- Пример радиобаннера
- Пример баннера FlashFull
- Пример баннера PeelDown (уголок)
- AdRiver Creative Toolkit
- Спецификации устаревших форматов
HTML MPU
1. Карточка баннера
Описание:
несколько взаимосвязанных HTML-креативов.
Тип кода:
Ajax.
Подробнее:
HTML MPU баннер состоит из нескольких HTML-панелей и управляющего скрипта баннера script.js. Как только все панели загружены, вызывается функция ar_initDone, указанная в script.js. Эта функция запускает логический сценарий ролика. Из каждой панели отправляются сообщения управляющему скрипту script.js о том, что панель загружена и готова принимать команды. Панели взаимодействуют друг с другом только через script.js. Для этого используется команда sendSync (метка синхронизации). Диспетчер сценария (функция ar_startScene) отслеживает команды от панелей и выполняет необходимые действия.
Примечание: Данная инструкция описывает наиболее часто используемые функциональности баннера mpu, при которых баннер состоит из двух панелей. Если данная инструкция не позволяет реализовать задуманное поведение html mpu баннера, или вам требуется использовать более двух панелей, вы можете скачать по ссылке инструкцию по подготовке html mpu баннера в общем виде, которая дает возможность разработать баннер с абсолютной любой логикой работы.
2. Подготовка баннера
Баннер состоит из нескольких файлов: управляющего файла script.js, скриптов panel.js и mpuhtml.js, нескольких HTML-панелей (в примерах ниже – panelBig.html и panelSmall.html) и одного или нескольких изображений (в примерах – adriver_logo.png).
2.1. Подготовка скрипта
2.1.1. Скрипт для MPU с панелями заданного размера
Скачайте архив с примером.
Откройте текстовым редактором файл script.js. В редактируемой части скрипта укажите нужные значения:
var ar_big_name = 'panelBig.html',
ar_big_width = '1000px',
ar_big_height = '400px',
ar_small_name = 'panelSmall.html',
ar_small_width = '300px',
ar_small_height = '400px',
ar_align = '3',
ar_gif = '0.png',
ar_gif_href = '',
ar_gif_width = '240px',
ar_gif_height = '400px',
ar_pix = '';
Переменные:
Сохраните измененный файл script.js.
По умолчанию показывается маленькая панель, по наведению раскрывается большая. Если показ баннера необходимо начинать с раскрытия большой панели, необходимо внести следующие изменения в функцию initDone(), описанную в файле script.js:
ar_initDone = function initDone() {
console.log('initDone');
sendEvent(0);
showPanel('panelBig');
sendToPanel('panelBig', 'go', 'test');
}
2.1.2. Скрипт для MPU с большой панелью, раскрывающейся на 100% экрана
Скачайте архив с примером.
Откройте текстовым редактором файл script.js. В редактируемой части скрипта укажите нужные значения:
var ar_big_name = 'panelBig.html',
ar_big_width = '100%',
ar_big_height = '100%',
ar_small_name = 'panelSmall.html',
ar_small_width = '300px',
ar_small_height = '400px',
ar_gif = '0.png',
ar_gif_href = '',
ar_gif_width = '240px',
ar_gif_height = '400px',
ar_pix = '';
Переменные:
Сохраните измененный файл script.js.
По умолчанию показ баннера начинается с раскрытия большой панели. Если показ баннера необходимо начинать с маленькой панели, а раскрывать большую панель необходимо по какому-либо действию пользователя (например, наведению), необходимо внести следующие изменения в функцию initDone(), описанную в файле script.js:
ar_initDone = function initDone() {
console.log('initDone');
sendEvent(0);
showPanel('panelSmall');
sendToPanel('panelSmall', 'go', 'test');
}
2.2. Подготовка HTML-панелей
В файлах panelSmall.html и panelBig.html в тегах <head></head> необходимо подключить файл panel.js:
<script src="panel.js"></script>
Примечание: При необходимости, файл panel.js можно не загружать в баннер, а разместить у себя на сервере. В таком случае, в параметре src необходимо прописать полный путь к файлу на сервере, например: <script src=”http://www.samplesite.com/scripts/banners/htmlmpu/panel.js”></script>
Также каждую панель необходимо зарегистрировать соответствующей командой:
registerPanel('panelSmall');
panelSmall — это соответствующее имя панели (panelSmall, panelBig или другое).
Взаимодействие между панелями происходит при помощи следующих команд:
sendSync('hidePanelBig'); // сворачивание большой панели
sendSync('showPanelSmall'); // отображение маленькой панели
sendSync('hidePanelSmall'); // сворачивание маленькой панели
sendSync('showPanelBig'); // отображение большой панели
Осуществление перехода на сайт рекламодателя и учет клика реализуются вызовом следующей функции:
makeClick();
Если в баннере присутствуют кнопки с альтернативными адресами перехода, то адрес перехода следует указывать в функции makeClick() в качестве параметра. Клик по таким кнопкам будет учитываться в статистике баннера, а переход произойдет на указанный URL-адрес. Например:
makeClick("http://adriver.ru");
Отслеживание событий (клик по баннеру, клик по кнопке закрыть, наведение на креатив) осуществляется разработчиком в коде панели любым удобным для него способом. Например:
clickArea.onclick = function () {
sendSync('hidePanelBig');
sendSync('showPanelSmall');
makeClick();
}
В примере отслеживается клик по области clickArea (определенной ранее), закрывается большая панель, показывается малая и осуществляется переход по ссылке рекламодателя, указанной в поле баннера Url ссылки.
Для обозначения любого из обязательных элементов, необходимо присвоить содержащему этот элемент HTML-тэгу соответствующий ID:
- id button – назначается элементу, при клике (наведении) по которому осуществляется показ большой панели
- id close – назначается элементу, при клике по которому большая панель закрывается
- id creative – назначается элементу, при клике по которому осуществляется переход на сайт рекламодателя
Пример назначения элемента, при щелчке по которому открывается большая панель:
<p id="button">Открыть Большую панель</p>
<script>
window.onload = function () {
var button = document.getElementById('button');
button.onclick = function () {
sendSync('showPanelBig');
}
}
</script>
Иногда требуется учитывать разные события в баннере, например, открытие вкладки и т.д. Всего доступно 10 событий с номерами от 0 до 9. Событие ноль (0) является служебным и сообщает о том, что баннер готов к показу. Перед тем, как регистрировать события 1 — 9, необходимо зарегистрировать событие ноль (0). Обычно это делается в функции initDone. Для регистрации событий используется команда sendEvent(eventId). Если учитывать события не планируется, то команду sendEvent(0) в функции initDone можно не использовать.
Подробнее об учёте событий в баннерах.
3. Загрузка баннера
- Добавьте баннер special → AjaxJS → Generic-AjaxJS.
- Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры.
- Нажмите на кнопку Добавить. Вы попадете на страницу редактирования параметров баннера.
- Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных значений нажмите на кнопку Сохранить.
- Кликните по ссылке Загрузить баннер.
- Выберите с помощью кнопки Обзор файл script.js и файлы panelBig.html, panelSmall.html, файл заглушки, файлы panel.js и mpuhtml.js, а также другие компоненты баннера, при их наличии.
- Нажмите на кнопку Загрузить.
Размер загружаемых файлов должен соответствовать спецификации.