Реклама в видеоплеере

Общие положения

VAST — это стандарт, описывающий процесс отображения баннеров видеоплеером и отправку статистики на рекламный сервер.

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

Показ рекламы выглядит следующим образом: плеер запрашивает видеобаннер, отображает содержимое VAST-ответа и отсылает статистику о показах и других событиях в Adfox (статистику также можно отправлять в сторонние системы с помощью пикселей). Это может происходить как напрямую между видеоплеером и Adfox, так и между видеоплеером, Adfox и сторонним рекламным сервером. При обращении к Adfox плеер получает VAST XML, пример.

Wrapper-ответ содержит тег Wrapper со ссылкой на сторонний сервер рекламы. Сторонний сервер может отдать баннер Linear Ad или Wrapper, который ссылается на еще один сервер рекламы. В конечном счете последний сервер в цепочке должен отдать все необходимые файлы для отображения рекламы.

Требования к рекламным материалам

Доступные предзаданные шаблоны

Linear Ads Video

Реклама на весь кадр, которая приостанавливает воспроизведение видеоконтента. Обычно это видеореклама, но могут использоваться статичные изображения, которые отображаются в определенное время. Такой тип рекламы может проигрываться до воспроизведения видеоконтента (pre-roll), в перерыве во время воспроизведения контента (mid-roll) или после воспроизведения видео (post-roll).

Тип содержимого — видеофайл.

Linear-Ad (Pre / Mid / Post-roll) VAST 3.0 Viewability

Шаблон с проверкой видимости. Если более 50% плеера находится в пределах области видимости, через 2 секунды срабатывает событие видимости. Статистика по событию доступна в отчетах.

Linear-Ad (Pre / Mid / Post-roll) VAST 2.0 Compatible No Click

Шаблон для видео без поддержки клика.

Linear-Ad (Pre / Mid / Post-roll) VAST 3.0

Шаблон с поддержкой клика.

Linear Ads Audio

Тип содержимого — аудиофайл.

Linear-Ad (Pre / Mid / Post-roll) Audio VAST 3.0

Шаблон для аудио без поддержки клика.

Nonlinear Ads

Наложенная реклама, отображаемая одновременно с воспроизведением основного видео. Обычно это статическое изображение, размещенное в проигрывателе и занимающее часть области плеера.

Non-Linear Adfox Overlay Image VAST 3.0

Шаблон для показа изображения поверх видео. Тип содержимого — изображение.

Параметры при добавлении в Adfox:

• Изображение — файл или ссылка на изображение.
• Ширина — ширина изображения.
• Высота — высота изображения.
• Нижний отступ — отступ от нижней границы плеера в процентах.
• URL перехода — ссылка, на которую осуществляется переход при клике.
• box-shadow — CSS-свойство, описывающее стиль тени, отбрасываемой изображением на видео.

Обязательные параметры — изображение, ширина и высота.

Пример VAST

Non-Linear Adfox Overlay HTML VAST 3.0

Шаблон для отображения произвольного HTML поверх видео. Тип содержимого — HTML-код. Вся область баннера кликабельная.

Параметры при добавлении в Adfox:

• HTML-код — HTML-код креатива.
• Ширина — ширина iframe-баннера.
• Высота — высота iframe-баннера.
• Нижний отступ — отступ от нижней границы плеера в процентах.
• URL перехода — ссылка, на которую осуществляется переход при клике.
• box-shadow — CSS-свойство, описывающее стиль тени, отбрасываемой изображением на видео.

Обязательные параметры — HTML-код, ширина и высота.

Пример VAST

Non-Linear Adfox Overlay HTML Custom VAST 3.0

Шаблон для отображения произвольного HTML поверх видео. Тип содержимого — HTML-код. Шаблон с возможностью задавать кликабельные области.

Параметры при добавлении в Adfox:

• HTML-код — HTML-код креатива.
• Ширина — ширина iframe-баннера.
• Высота — высота iframe-баннера.
• Нижний отступ — отступ от нижней границы плеера в процентах.
• URL перехода — ссылка, на которую осуществляется переход при клике.
• box-shadow — CSS-свойство, описывающее стиль тени, отбрасываемой изображением на видео.

Обязательные параметры — HTML-код, ширина и высота.

Пример VAST

Wrapper (VAST-редирект)

Экземпляр VAST, который переадресует на другой URL для получения рекламы и содержит дополнительные пиксели. Используется для проброса сторонней рекламы и промера событий в Adfox.

VAST 2.0 Wrapper может ссылаться на содержимое VAST 3.0, а VAST 3.0 Wrapper может ссылаться на VAST 2.0.

Тип содержимого — ссылка на VAST XML.

Доступные в Adfox предзаданные шаблоны InPage

Linear-Ad (Pre / Mid / Post-roll) VAST 2.0 for InPage

Шаблон для содержимого типа «видеофайл».

Linear-Ad (Pre / Mid / Post-roll) VAST 3.0 for InPage Viewability

Шаблон для содержимого «видеофайл» c проверкой видимости.

Wrapper VAST 2.0 for InPage

Шаблон для содержимого «Wrapper VAST XML».

Подробнее об использовании шаблонов см. раздел InPage video.

Получение ссылки на VAST XML

Ссылку на VAST можно получить как и обычные коды вставки Adfox.

Вместо кода будет ссылка следующего вида:

https://yandex.ru/ads/adfox/168627/getCode?p1=bigha&p2=eojh&puid1=&puid2=&puid3=

Проверка ссылок

Проверить ссылки можно на специальной странице.

Использование собственного плеера

1. Подключите библиотеку ADSDK внутри тега <head>.

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <script
            type="text/javascript"
            charset="utf-8"
            src="https://yandex.ru/ads/system/adsdk.js">
       </script>
   </head>
   </html>
   

2. Объявите переменную: объект с параметрами Adfox.

   var adFoxParameters = {
       adFoxParameters: {
           ownerId: 168627,
           // ID родительского контейнера тега <video></video>
           containerId: 'videoParent',
           // Параметры Adfox
           params: {
               p1: 'bdcfe',
               p2: 'ekza',
               pfc: 'bupfm',
               pfb: 'frtqn'
           },
       }
    }
   

3. Для старта проигрывания вызовите метод play, передав в него конфигурацию Adfox.

   ya.videoAd.play({
       // Видеоэлемент
       videoSlot: document.querySelector('#video'),
       // Элемент для показа контролов. Элемент не должен быть статически позиционирован.
       // Можно использовать родительский элемент видео.
       slot: document.querySelector('#videoParent'),
       // Конфиг загрузки и конфиг проигрывания рекламы.
       config: adFoxParameters,
   });
   

Инструкции по интеграции:

• Стандартная интеграция
• Интеграция с Adfox

Рекламная метка

Рекламная метка и указание на рекламодателя и (или) его сайт являются обязательными, если вы запускаете рекламу для показа на территории России. Подробнее о метке и о рекламном меню читайте в разделе Рекламная метка и рекламное меню на баннерах в Adfox.

Чтобы добавить рекламную метку в плеер, где подключена библиотека Yandex Video Ads SDK, в списке Метка рекламы в параметрах баннера выберите Реклама или Соцреклама. Рекламная метка будет отображаться автоматически.

Включите опцию Добавить рекламное меню, если вы заполнили информацию о рекламодателе в параметрах рекламной кампании. На баннер будет добавлено рекламное меню в виде значка с информацией о рекламодателе и токеном (если в настройках баннера включена маркировка или указан сторонний токен).

В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации».

Если вы не используете библиотеку Yandex Video Ads SDK для показа рекламы, добавьте в плеер поддержку тега extension в формате:

<Extensions>
        <Extension type="AdTitle">
                <![CDATA[
                        {
                                "show": %banner.ad_label%,
                                "domain": "%banner.domain:jsenc%",
                                "socialAdvertising": %banner.ad_label_social%
                        }
                ]]>
        </Extension>
        <Extension type="AdTune">
                <![CDATA[
                        {
                                "show": %banner.ad_tune%, 
                                "token": "%banner.token:jsenc%", 
                                "advertiserInfo": "%campaign.advertiser:jsenc%"
                        }
                ]]>
        </Extension>
</Extensions>

В зависимости от настроек рекламной метки в баннере макросы принимают следующие значения:

Примеры тега extension:

<Extensions>
        <Extension type="AdTitle">
                <![CDATA[
                        {
                                "show": 1,
                                "domain": "",
                                "socialAdvertising": 0
                        }
                ]]>
        </Extension>
        <Extension type="AdTune">
                <![CDATA[
                        {
                                "show": 1, 
                                "token": "token", 
                                "advertiserInfo": "Информация о рекламодателе"
                        }
                ]]>
        </Extension>
</Extensions>

<Extensions>
        <Extension type="AdTitle">
                <![CDATA[
                        {
                                "show": 1,
                                "domain": "example.ru",
                                "socialAdvertising": 0
                        }
                ]]>
        </Extension>
        <Extension type="AdTune">
                <![CDATA[
                        {
                                "show": 1, 
                                "token": "token", 
                                "advertiserInfo": "Информация о рекламодателе"
                        }
                ]]>
        </Extension>
</Extensions>

<Extensions>
        <Extension type="AdTitle">
                <![CDATA[
                        {
                                "show": 0,
                                "domain": "example.ru",
                                "socialAdvertising": 1
                        }
                ]]>
        </Extension>
        <Extension type="AdTune">
                <![CDATA[
                        {
                                "show": 0, 
                                "token": "token", 
                                "advertiserInfo": "Информация о рекламодателе"
                        }
                ]]>
        </Extension>
</Extensions>           

<Extensions>
        <Extension type="AdTitle">
                <![CDATA[
                        {
                                "show": 1,
                                "domain": "",
                                "socialAdvertising": 1
                        }
                ]]>
        </Extension>
        <Extension type="AdTune">
                <![CDATA[
                        {
                                "show": 0, 
                                "token": "token", 
                                "advertiserInfo": "Информация о рекламодателе"
                        }
                ]]>
        </Extension>
</Extensions>           

События

Предзаданные шаблоны в Adfox содержат контейнер <TrackingEvents>, внутри которого лежат теги <Tracking>. Каждый элемент <Tracking>содержит URI Adfox, по которому видеоплеер должен делать запрос, когда наступает определенное событие. Название события передается в атрибуте event.

Список событий:

• Начало просмотра (start).
• Ролик выбран (creativeView).
• Ролик загружен (impression).
• Первая четверть просмотра (firstQuartile).
• Середина просмотра (midpoint).
• Третья четверть просмотра (thirdQuartile).
• Полный просмотр (complete).
• Выключить звук (mute).
• Включить звук (unmute).
• Пауза (pause).
• Просмотр сначала (rewind).
• Продолжение просмотра (resume).
• Переход в полный экран (fullscreen).
• Развернуть (expand).
• Свернуть (collapse).
• Перейти к следующему ролику (acceptInvitationLinear).
• Клик по кнопке Закрыть, уход пользователя (close).
• Клик по плашке Пропустить рекламу (skip).
• Клик по плашке Перейти на сайт рекламодателя (addclick).
• Ошибка (Error).
• Прогресс (progress) — доступен начиная с VAST 3.0.

Ответ в случае отсутствия рекламы

Когда нет подходящей рекламы для показа, Adfox возвращает следующий XML:

• Тип баннера InStream:

  <?xml version=”1.0”?><nobanner></nobanner>
  

• Тип баннера InPage:

  <?xml version=”1.0”?><VAST version="2.0"/>
  

Чтобы добавить баннер по умолчанию для плеерной рекламы VAST, у вас должна быть ссылка запроса рекламы. Поместите эту ссылку между квадратными скобками в блок VASTAdTagURI:

<?xml version="1.0" encoding="UTF-8"?>
<VAST version="2.0">
    <Ad id="%placeId%">
        <Wrapper>
            <AdSystem>Adfox.ru</AdSystem>
            <VASTAdTagURI>
                <![CDATA[//yandex.ru/ads/adfox/XXXXXX/getCode?p1=xxx&p2=xxx&pfc=a&pfb=a&plp=a&pli=a&pop=a&puid1=%userValue1%]]>
            </VASTAdTagURI>
            <Impression></Impression>
            <Creatives></Creatives>
        </Wrapper>
    </Ad>
</VAST>

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

• для значений пользовательских характеристик: puidN со значением %request.puidN%, где N — номер характеристики. Пример: &puid1=%request.puid1%;
• для передачи referer: dl со значением %request.referrer:urlenc%. Пример: &dl=%request.referrer:urlenc%.

Полученный код скопируйте и установите в поле XML-код баннера по умолчанию площадки и/или типа баннера.

Обратиться в службу поддержки

Написать в чат

Написать письмо