MenuOverlay

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

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

Для баннера необходимо подготовить следующие компоненты:

• размерный Flash-баннер (фиксированной ширины и высоты)
• заглушку (.gif или .jpeg)
• файл со стилями (bannerMenu.css)
• скрипт (script.js).

Скачайте пример комплекта файлов для баннера.

2.1. Файл стилей

В зависимости от желаемого вида меню необходимо самостоятельно отредактировать файл стилей bannerMenu.css. Меню разворачивается по наведению на пункты курсора мыши. Для разворачивающихся пунктов в bannerMenu.css к текущему классу необходимо дописать приставку Over. Эти классы имеют атрибуты visibility: visible; (можно использовать display: block;), а обычные классы имеют атрибуты visibility: hidden;, чтобы в обычном состоянии меню было скрыто.

2.2. Скрипт

Структура меню описывается в файле script.js. Параметры, редактируемые в скрипте:

var ar_img	 = '0.gif',
    ar_swf	 = '300x250.swf',
    ar_width     = '300',
    ar_height	 = '250',
    ar_wmode	 = 'opaque',
    ar_flashver	 = '8',
    ar_align	 = '4',
    ar_pixel	 = '';

var ar_count_rle   = 'http://ad.adriver.ru/cgi-bin/rle.cgi?sid=103134&bt=21&rnd=![rnd]';
var ar_count_click = 'http://ad.adriver.ru/cgi-bin/click.cgi?sid=103134&bt=21&rnd=![rnd]';
var ar_css	   = 'bannerMenu.css';
var ar_menu	   = []

Описание:

Пример описания структуры меню:

var ar_menu = [        //_ основной уровень меню, содержит несколько пунктов
    { // _1 первый пункт меню
        className: 'adriver_level1', // имя класса (стиль) данного пункта для установки форматирования в bannerMenu.css. Для первого уровня - своё, для второго своё и т.д.
        text: 'Menu 1', // содержимое (текст или html)
        menu: [ // наполнение пункта меню.  Структура подменю повторяет структуру основного меню. Может быть menu или click. Если menu, то открывается вложенное подменю. Если click, то данный пункт кликается.
            { // _1_1
                className: 'adriver_level2',
                text: 'Menu 1.1 <br><span style="font-size:10px;color:#5555FF;">Другое оформление - произвольный html</span>',
                click: 'http://www.adriver.ru/' // клик по данному пункту. Если данное свойство не указано, то пункт не кликается.
            },
            { // _1_2
                className: 'adriver_level2',
                text: 'Menu 1.2',
                click: 'http://www.adriver.ru/'
            },
            { // _1_3
                className: 'adriver_level2',
                text: 'Menu 1.3',
                click: 'http://www.adriver.ru/'
            }
        ]
    },
    { // _2 второй пункт меню. Всё то же самое, что и в первом пункте
        className: 'level1',
        text: 'Menu 2',
        menu: [
            { // _2_1
                className: 'adriver_level2',
                text: 'Menu 2.1',
                click: 'http://www.adriver.ru/'
            },
            { // _2_2
                className: 'adriver_level2',
                text: 'Menu 2.2',
                click: 'http://www.adriver.ru/'
            }
        ]
    },
    { // _3
        className: 'adriver_level1',
        text: 'Menu 3',
        menu: [
            { // _3_1
                className: 'adriver_level2',
                text: 'Menu 3.1',
                click: 'http://www.adriver.ru/'
            }
        ]
    },
    { // _4 четвёртый пункт. Не имеет подменю, зато кликабельный.
        className: 'adriver_level1',
        text: 'Go to RLE from the first level menu',
        click: 'http://www.rle.ru/'
    }
]

2.2. Оформление пунктов меню

Пункты меню могут содержать простой текст, flash-ролики с видео или играми, ссылкми на скачивание файла. Ниже показано, как вставить в пункт меню flash-ролик с видео и ссылку на скачивание PDF-файла.

2.2.1. Видеоролик в пункте меню

Видеоролик вставляется в меню (в метку text) средствами html.

Пример:

{ // _1_1
        className: 'level2',
        text: 'Flash-ролик с видео:<br><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="ширина в px" height="высота в px" ID="ca1"><param name="movie" value="ссылка на flash-ролик"><param name="quality"value="high"><param name="menu" value="false"><param name="loop" value="0"><embed src="ссылка на flash-ролик"  width="ширина в px" height="высота в px" loop="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false"></embed></object>',
        click: 'http://www.adriver.ru/' // клик по данному пункту. Если данное свойство не указано, то пункт не кликается.
}

2.2.2. Ссылка на скачивание PDF-файла в пункте меню

Чтобы разместить ссылку на скачивание PDF-файла, в метке click впишите ссылку на PDF-файл, расположенный на стороннем сервере. Ссылка должна начинаться с http://.

Пример:

{ // _4 четвёртый пункт.
        className: 'adriver_level1',
        text: 'Download the PDF-file.',
        click: 'http://www.example.com/files/file.pdf'
}

3. Настройка сайта в AdRiver для учёта статистики

1. Заведите на аккаунте клиента сайт. Сайт используется для учёта событий. Один сайт соответствует одному формату баннера в одной рекламной кампании. Если однотипных форматов баннеров размещается несколько, то отдельные сайты в этом случае заводить не нужно! То есть, если есть два формата баннера, то надо заводить два сайта. Если есть одна кампания и в ней три баннера одного формата, то надо заводить только один сайт. Если потом будет проводиться ещё одна рекламная кампания, то необходимо будет снова повторить все действия.
2. Выделите на сайте столько сайтзон, сколько пунктов и всех вложенных подпунктов в меню. Дополнительно создайте зону меню открыто. Например, в баннере 10 пунктов меню:
   1. Menu 1
   2. Menu 1.1
   3. Menu 1.2
   4. Menu 1.3
   5. Menu 2
   6. Menu 2.1
   7. Menu 2.2
   8. Menu 3
   9. Menu 3.1
   10. Go to RLE from the first level menu

   Выделять сайтзоны проще именно в таком порядке. Для нумерации сайтзон используются алиасы. Зона меню меню открыто получает алиас _. Все последующие пункты нумеруются как _1, _2, _3 и т. д. Подпункты меню нумеруются как _1_1, _1_2, _1_3 и т. д.

   Например, для пункта меню Menu 2.2 будет алиас _2_2, т.е. второй пункт главного меню, подпункт два. Пример:

   алиас   название сайтзоны 
   _		Меню открыто
   _1		Menu 1 
   _1_1		Menu 1.1
   _1_2		Menu 1.2
   _1_3		Menu 1.3
   
   _2		Menu 2
   _2_1		Menu 2.1
   _2_2		Menu 2.2
   	
   _3		Menu 3
   _3_1		Menu 3.1
   
   _4		Go to RLE from the first level menu

   Баннер сам вызывает нужные пиксели по наведению мышки на элементы меню. Пиксель срабатывает не сразу, а через 0,3 секунды после наведения. Это сделано для того, чтобы исключить случайные срабатывания.

3. После того, как вы завели сайт и выделили сайтзоны, настройте файл скрипта для баннера. В файл script.js впишите следующие данные:
   • id заведённого сайта-счётчика впишите в переменную ar_count_rle (сайтовый код показа) вместо 103134:

     var ar_count_rle = 'http://ad.adriver.ru/cgi-bin/rle.cgi?sid=103134&bt=21&rnd=![rnd]';
     

   • id заведённого сайта-счётчика впишите в переменную ar_count_click (сайтовый код клика) вместо 103134:

     var ar_count_click = 'http://ad.adriver.ru/cgi-bin/rle.cgi?sid=103134&bt=21&rnd=![rnd]';
     

Баннер показывается на сайте. При открытии различных пунктов меню, баннер вызывает счётчики, соответствующие нужному уровню меню. Показы и клики по каждому уровню меню отображаются в статистике сайта. Если в кампании, например, 10 позиций, то баннер сам подставляет при запросе счётчика параметр bn, который равен bid баннера, по которому сейчас водит мышкой пользователь. Статистика отображается в статистике сайта по bn нужного номера и по сайтзонам.

4. Настройка рекламной кампании в AdRiver для получения расширенного отчёта

Для получения статистики в расширенном отчёте выполните следующие действия.

1. Заведите одну рекламную кампанию (для каждого сайта должна быть своя зеркальная рекламная кампания)
2. Передайте с этого сайта один слайс формата counter(zeropixel) в эту кампанию. Скорость распределения в течение дня — максимальная, без ограничений.
3. В кампании создайте столько же сценариев, сколько пунктов меню. По-возможности, названия должны совпадать.
4. В каждый сценарий загрузите по баннеру counter(zeropixel). Ссылку поставьте на сайт клиента (как основная ссылка в баннере).
5. Привяжите каждый сценарий к сайтзоне, соответствующей пункту меню, за который отвечает сценарий.

Теперь все показы и клики на сайте будут зеркально дублироваться в рекламной кампании. Соответственно, если эту кампанию добавить в фильтр, то по ней можно будет сделать отчёт по bid/bn, такой же, какой используется для контекстных размещений. Каждый bn — это «отдельный баннер» в основной рекламной кампании.

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

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

Проверьте работу баннера, разместив код на тестовой странице. При клике по баннеру переход должен быть по ссылке, указанной в интерфейсе. Проверьте, что при показе баннера корректно обсчитываются показы и клики по всем пунктам меню на сайте.

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

• Типы кодов в AdRiver