Native Video



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

Описание:
баннер VAST 3, который показывается по доскроллу до баннерного места.
Допустимые форматы видео:
mp4, webm, ogv и т.п. Плеер не поддерживает Flash-файлы.
Подробнее:
по доскроллу до баннерного места появляется видеоплеер HTML5, начинается проигрывание баннера VAST3 с учетом всех стандартных событий. Плеер вычисляет ширину родительского элемента без рамок и отступов. В том случае, если указанные в VAST баннере размеры превышают размеры элемента, в который вставляется баннер, ширина баннера принимается равной ширине контента, а высота вычисляется пропорционально. Если ширина видео меньше, то устанавливаются размеры из VAST баннера, баннер позиционируется по центру родительского элемента. Если размеры по какой-то причине не пришли в VAST баннере, то берутся размеры, указанные в коде вызова на странице. Формат может быть встроен в страницу по заданным критериям. Можно указать, открывать баннерное место сразу или только при попадании указанного процента баннерного места в поле видимости. Можно указать изображения, которые будут показаны до и после воспроизведения. Воспроизведение рекламного ролика может быть начато сразу или по клику на изображении. Можно указать таймаут для закрытия или отменить таймаут закрытия видео после проигрывания вообще.

Важно: Данный формат доступен в случае предоставления видео баннеров с ресурсов AdRiver. За подробностями подключения услуги обращайтесь в клиентский отдел account@adriver.ru.

2. Особенности работы плеера на десктопных компьютерах и мобильных устройствах

  • На десктопных компьютерах и устройствах Windows Phone плеер открывается по доскроллу до места размещения и сразу начинает воспроизведение
  • На мобильных устройствах c Android и iOS начало воспроизведения регулируется параметром ar_MobilePlayStyle (по клику или автоматически). При клике видео плеер раскрывается на весь экран и начинается воспроизведение рекламного ролика.
  • На мобильных устройствах с iOS при клике на видео переход на сайт рекламодателя осуществляться не будет. Для мобильных устройств с iOS можно разместить ссылку на сайт рекламодателя под плеером.

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

3.1. Подготовка VAST Video баннера

  1. Подготовьте баннер VAST Video и загрузите его в систему AdRiver в соответствии с данной инструкцией
  2. Сгенерируйте общий код сайта для издателей
  3. Скопируйте ссылку ролика и добавьте перед параметром rnd параметр &tuid=1
  4. Заключите ссылку в одиночные кавычки от начала до значения параметра rnd
  5. Замените значение ![rnd] на + RndNum4NoCash

Например, ссылка из сгенерированного кода:

https://ad.adriver.ru/cgi-bin/erle.cgi?sid=189268&target=top&bt=61&pz=0&rnd=![rnd]

Отредактированный код:

'https://ad.adriver.ru/cgi-bin/erle.cgi?sid=189268&target=top&bt=61&pz=0&tuid=1&rnd='+RndNum4NoCash

Данную ссылку необходимо будет указать в коде вызова баннера.

Примечание: Значения параметров в вашем коде могут отличаться от примера.

3.1.1. Продажа VAST-трафика на RTB

Для реализации VAST-трафика через RTB необходимо отредактировать ссылку, подготовленную в п. 3.1.

К стандартной ссылке вида:

'https://ad.adriver.ru/cgi-bin/erle.cgi?sid=123456&target=top&bt=61&pz=0&tuid=1&rnd='+RndNum4NoCash
необходимо добавить следующие параметры:
vmindn
минимальная длина ролика в секундах
vmaxdn
максимальная длина ролика в секундах
vminbtr
минимальный битрейт
vmaxbtr
максимальный битрейт
vz
позиция ролика. Возможные значения:
1
Pre-Roll
2
Generic Mid-Roll
3
Generic Post-Roll

Параметры с соответствующими значениями добавляются в конец ссылки, перед параметром tuid, через символ &: vmindn=знач&vmaxdn= знач&vminbtr= знач&vmaxbtr= знач&vz= знач.

Пример отредактированной ссылки:

'https://ad.adriver.ru/cgi-bin/erle.cgi?sid=123456&target=top&bt=61&pz=1&bn=1&sz=video&vmindn=5&vmaxdn=60&vminbtr=300&vmaxbtr=4500&vz=1&tuid=1&rnd='+RndNum4NoCash

3.2. Размещение кода вызова баннера

Баннер может быть вставлен в страницу по заданным критериям:

  • По ID элемента – в этом случае баннер будет вставляться в элемент с указанным ID, как в баннерное место
  • По ID элемента и порядковому номеру – в этом случае баннер вставляется после элемента, порядковый номер которого указан. Учитываются все элементы кроме тех у которых не определён tagName, а также тэг BR
  • Если указать ID, номер и название тэга – в этом случае баннер отсчитывает только определённые тэги и вставляется после этого тэга с указанным порядковым номером
  1. Скачайте архив с комплектом файлов для баннера
  2. Разместите все файлы из архива в одной папке на вашем сервере
  3. В нужном месте страницы разместите код вызова, задающий параметры баннера (укажите ваши собственные параметры):
    <script type="text/javascript">
    	var RndNum4NoCash 	= Math.round(Math.random() * 1000000000);
    	var Adriver_Native_Video_Params = {
    		
    	/* Native Video Parameters Start */
    		ar_folder: 'http://путь до папки с файлами/',
    		ar_VAST_link: 'https://ad.adriver.ru/cgi-bin/erle.cgi?...&tuid=1&rnd='+RndNum4NoCash,
    		ar_MobileImgNameStart: '1.png',
    		ar_MobileImgNameEnd: '',
    		ar_MobilePlayStyle: 2,
    		ar_iClickText: encodeURIComponent('Перейти на сайт рекламодателя'),
    		ar_width: 300,
    		ar_height: 200,
    		ar_open: 30,
    		ar_close: 0,
    		ar_speed: 2,
    		ar_pix: '',
    		ar_divid: 'content',
    		ar_tag: '',
    		ar_num: 13,
    	/* Native Video Parameters End*/
    	
    		init: function(){var head=document.getElementsByTagName('head')[0],s = document.createElement('script');s.setAttribute('type', 'text/javascript');s.setAttribute('charset', 'windows-1251');s.setAttribute('src', Adriver_Native_Video_Params.ar_folder+'native.video.vast.ad.js');s.onreadystatechange = function(){if(/loaded|complete/.test(this.readyState)){s.onload = null;Adriver_Native_Video.Native_Video(0);}};s.onload = function(e){if(head&&s) {Adriver_Native_Video.Native_Video(0);}};head.insertBefore(s, head.firstChild);}
    	};
    		Adriver_Native_Video_Params.init();
    </script>

    Описание переменных:

  4. ar_folder
    полный путь до папки, в которой расположены все файлы баннера
    ar_VAST_link
    ссылка на VAST баннер с параметром tuid (см. 3.1.)
    ar_MobileImgNameStart
    название файла с изображением, которое будет показано до начала воспроизведения (если изображение располагается в папке, указанной в переменной ar_folder). Изображение может быть загружено со стороннего сервера, в этом случае укажите полный путь до него, начинающийся с http[s]://
    ar_MobileImgNameEnd
    название файла с изображением, которое будет показано после воспроизведения (если изображение располагается в папке, указанной в переменной ar_folder). Изображение может быть загружено со стороннего сервера, в этом случае укажите полный путь до него, начинающийся с http[s]://

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

    ar_MobilePlayStyle
    параметр отвечает за начало воспроизведения на мобильных устройствах: 1 – воспроизведение начинается по клику, 2 – воспроизведение начинается автоматически
    ar_iClickText
    текст ссылки перехода на сайт рекламодателя
    ar_width
    ширина плеера (в том случае, когда размеры не указаны в VAST баннере)
    ar_height
    высота плеера (в том случае, когда размеры не указаны в VAST баннере)
    ar_open
    процент видимости, при котором запускается показ баннера. Если установить 0, то баннерное место будет открыто сразу
    ar_close
    задержка до закрытия блока после проигрывания (-1 – блок не закрывается, 0 – блок закрывается сразу, любое целое число – время задержки в секундах)
    ar_speed
    скорость расхлопа в секундах
    ar_pix
    ссылка на сторонний счетчик
    ar_divid
    id элемента, выделенного на странице под баннер, или элемента, в котором требуется искать место под баннер
    ar_tag
    название тэга, по которому нужно искать место для баннера (если не требуется, оставить пустым – ”)
    ar_num
    порядковый номер тэга, после которого нужно вставить баннер (если не требуется, выставить 0)
    • Замените значение параметра ar_VAST_link на вашу ссылку, подготовленную в п. 3.1.
    • В том месте, где планируется показ баннера, задайте соответствующий элемент, например:
      <div id="content"></div>
      Элемент должен быть пустым, т.к. его содержимое перезапишется плеером.

      Примечание: Значение параметра ar_divid в коде вызова должно соответствовать id элемента, в который будет вставлен баннер.

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