Видеобаннер

Карточка баннера
Подготовка баннера
Загрузка баннера
Полезные ссылки

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

Описание:

баннер с подгружаемым видеофайлом.

Тип кода:

фреймовый, Poster, Ajax, Extension.

Пример:

https://www.adriver.ru/doc/ban/outdated/examples/videobanner/.

Подробнее:

видеобаннер представляет собой сочетание Flash-технологий и полноценного видео. Видеобаннер состоит из двух частей: загрузчика и самого видеоролика. Загрузчик оценивает скорость канала пользователя и взаимодействует с системой AdRiver.

Обсчёт внешними системами:

пиксель-аудит в Flash-баннерах.

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

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

2.1. Загрузчик

вес загрузчика должен быть 20-25 Кб для оценки скорости канала пользователя
загрузчик вызывается системой AdRiver с антикешированием

Для принятия решения о том, показывать видеоролик или нет, достаточно оценить скорость канала в двух диапазонах:

скорость менее 100 Кбит — видео не проигрывается и подгружается облегчённый вариант видеоролика или обычный Flash-баннер
скорость более 100 Кбит — видеоролик проигрывается в полном объёме

2.2. Баннер на ActionScript 2

Видеоролик может подгружаться следующими способами:

по клику кнопки Показать видео
по наведению на баннер курсора мыши
без дополнительных действий со стороны пользователя

Прошивка баннера

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

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

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

Подгрузка видеоролика

Если для хостинга видеороликов вы используете AdRiver (видеоролик загружается в AdRiver вместе с баннером), то подгружать видеоролик нужно следующим образом (при любом варианте подгрузки):

loadMovieNum(_root.ar_comppath + 'flash_name.swf', 500);

flash_name.swf – имя видеоролика, загруженного в AdRiver вместе с основным баннером.

Если видеоролик располагается на стороннем сервере и не загружен в AdRiver, подгружать его нужно следующим образом (при любом варианте подгрузки):

 loadMovie('http://www.example.com/video.swf');

http://www.example.com/video.swf – полный путь к видеофайлу, расположенному на стороннем сервере.

2.2.1. Подгрузка видеоролика по клику кнопки

В самом баннере должна быть кнопка Показать видео. Если пользователь нажимает на неё, то ему показывается видеоролик, если пользователь не нажимает на кнопку, то показывается обычный Flash-баннер. Во время воспроизведения видеоролика посетителю выводится кнопка Закрыть видео, по нажатию на которую воспроизведение видео прекращается, и пользователю демонстрируется Flash-ролик. Если пользователь уже видел видеоролик, то есть нажимал на кнопку Показать видео, то видеоролик будет закеширован.

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

Пропишите подгрузку видео на нажатие нужной кнопки. Пример:

on (release){
        loadMovie('http://www.example.com/video.swf');
}

Замените http://www.example.com/video.swf на полный путь к видеофайлу, расположенному на стороннем сервере.

2.2.2. Подгрузка видеоролика по наведению на баннер курсора мыши

Воспроизведение видеоролика начинается по наведению на баннер курсора мыши. При клике по баннеру происходит переход на сайт рекламодателя.

Пропишите подгрузку видео на наведение курсора на нужную кнопку. Пример:

on (rollOver){
        loadMovie('http://www.example.com/video.swf');
}

Замените http://www.example.com/video.swf на полный путь к видеофайлу, расположенному на стороннем сервере.

2.2.3. Подгрузка видеоролика без дополнительных действий со стороны пользователя

Воспроизведение видеоролика начинается в каком-либо кадре баннера. При клике по баннеру происходит переход на сайт рекламодателя.

Пропишите подгрузку видео в нужном кадре. Пример:

loadMovie('http://www.example.com/video.swf');

Замените http://www.example.com/video.swf на полный путь к видеофайлу, расположенному на стороннем сервере.

Для учёта взаимодействия посетителей (клик по кнопке, наведение курсора мыши) с баннером используется механизм событий.

2.3. Баннер на ActionScript 3

Видеоролик может подгружаться следующими способами:

по клику кнопки Показать видео
по наведению на баннер курсора мыши
без дополнительных действий со стороны пользователя

Прошивка баннера

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

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

Подгрузка видеоролика

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

import flash.display.Loader;
import flash.net.URLRequest;

var ldr:Loader = new Loader();
var ar_comppath:String = LoaderInfo(this.root.loaderInfo).parameters['ar_comppath’];
var url:String = ar_comppath + 'flash_name.swf';
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
addChild(ldr);

flash_name.swf – имя видеоролика, загруженного в AdRiver вместе с основным баннером.

var ldr:Loader = new Loader();
var url:String = 'http://www.example.com/video.swf';
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
addChild(ldr);

http://www.example.com/video.swf – полный путь к видеофайлу, расположенному на стороннем сервере.

2.3.1. Подгрузка видеоролика по клику кнопки

В самом баннере должна быть кнопка Показать видео. Если пользователь нажимает на неё, то ему показывается видеоролик, в другом случае показывается обычный Flash-баннер. Во время воспроизведения видеоролика посетителю выводится кнопка Закрыть видео, по нажатию на которую воспроизведение видео прекращается и показывается Flash-ролик. Если пользователь уже видел видеоролик, то есть нажимал на кнопку Показать видео, то видеоролик будет закеширован.

Пропишите подгрузку видео на нажатие нужной кнопки. Пример:

var btnLoad = function(e:MouseEvent){
   var ldr:Loader = new Loader();
   var url:String = 'http://www.example.com/video.swf';
   var urlReq:URLRequest = new URLRequest(url);
   ldr.load(urlReq);
   addChild(ldr);	
}
btn.addEventListener(MouseEvent.CLICK,btnLoad);

Замените http://www.example.com/video.swf на полный путь к видеофайлу, расположенному на стороннем сервере.

2.3.2. Подгрузка видеоролика по наведению на баннер курсора мыши

Пропишите подгрузку видео на наведение курсора на нужную кнопку. Пример:

var btnLoad = function(e:MouseEvent){
   var ldr:Loader = new Loader();
   var url:String = 'http://www.example.com/video.swf';
   var urlReq:URLRequest = new URLRequest(url);
   ldr.load(urlReq);
   addChild(ldr);	
}	
btn.addEventListener(MouseEvent.ROLL_OVER,btnLoad);

Замените http://www.example.com/video.swf на полный путь к видеофайлу, расположенному на стороннем сервере.

2.3.3. Подгрузка видеоролика без дополнительных действий со стороны пользователя

Пропишите подгрузку видео в нужном кадре. Пример:

var ldr:Loader = new Loader();
var url:String = 'http://www.example.com/video.swf';
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
addChild(ldr);

Замените http://www.example.com/video.swf на полный путь к видеофайлу, расположенному на стороннем сервере.

Для учёта взаимодействия посетителей (клик по кнопке, наведение курсора мыши) с баннером используется механизм событий. Подробная инструкция по использованию событий в AS3.

2.4. Учёт событий в баннере

Для того чтобы сообщать AdRiver о действиях пользователя и учитывать события в AdRiver:

скачайте файл events.as и сохраните его в папку с разрабатываемым Flash-роликом
в первом кадре Flash-ролика пропишите следующий код:
```
#include "events.as"
```
в тех местах ролика, где происходит какое-либо действие, инициированное пользователем (клик по кнопке, наведение курсора мыши), добавьте в код команду с номером закладки:
```
_root.ar_TrackStage(#)
```
где # – номер события. Может быть от 1 до 9. Использовать 0 нельзя, так как это событие зарезервировано под показ баннера и вызывается автоматически

Примеры:

событие 1 зарезервируем, например, для учёта посетителей, скорость у которых недостаточна для проигрывания видео. Для этого, когда скорость ниже необходимой, необходимо вызвать событие:
```
_root.ar_TrackStage(1)
```
событие 2 зарезервируем, например, для учёта количества нажатий на кнопку Показать видео. Для этого пропишите следующий код на нажатие кнопки Показать видео:
```
on (release){
	_root.ar_TrackStage(2)
        loadMovie('http://www.example.com/video.swf');
}
```

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

_root.ar_TrackStage(3);

Оставшиеся события можно использовать для учёта посещения промежуточных контрольных точек. Если же ролик интерактивный, события можно использовать для учёта внутренних взаимодействий и переходов по альтернативным ссылкам.

Примечания: Так как в видеобаннере предполагается использование небольших видеороликов (1 Мб), то рекомендуем не использовать Streaming Video. Так как пользователь загружает видеоролики – закешируем их на диске для дальнейшего показа. Для этого используется progressive download. Рекомендуемый размер видеофайла – не более 1 Мб (если на площадке установлены ограничения по весу видеофайлов, то видео должно соответствовать этим ограничениям). Видеоролик располагается на стороннем сервере или видеохостинге. Видеоролик должен иметь название вида name.swf

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

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

Подготовьте баннер согласно п. 2 инструкции.
Добавьте баннер:
- для кода Ajax — special -> AjaxJS -> Flash-AjaxJS
- для кода Poster — special -> poster -> flash-poster
- для кода Extension — special -> extension -> flash-extension
Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры.
Нажмите на кнопку Добавить баннер. Вы попадете на страницу редактирования параметров баннера.
Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных настроек нажмите на кнопку Сохранить.
Кликните по ссылке Загрузить баннер.
Выберите с помощью кнопки Обзор все файлы баннера.
Если необходимо указать ссылки для сторонних счетчиков, заполните соответствующие поля, следуя инструкции. Если необходимо указать несколько ссылок для счетчиков, нажмите еще под соответствующим полем.
Нажмите на кнопку Загрузить.

Видеобаннер

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

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

2.1. Загрузчик

2.2. Баннер на ActionScript 2

Прошивка баннера

Подгрузка видеоролика

2.2.1. Подгрузка видеоролика по клику кнопки

2.2.2. Подгрузка видеоролика по наведению на баннер курсора мыши

2.2.3. Подгрузка видеоролика без дополнительных действий со стороны пользователя

2.3. Баннер на ActionScript 3

Прошивка баннера

Подгрузка видеоролика

2.3.1. Подгрузка видеоролика по клику кнопки

2.3.2. Подгрузка видеоролика по наведению на баннер курсора мыши

2.3.3. Подгрузка видеоролика без дополнительных действий со стороны пользователя

2.4. Учёт событий в баннере

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

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