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

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

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

Для встраивания рекламы используются международные стандарты IAB (Interactive Advertising Bureau), в т. ч. стандарты VAST 2.0, VAST 3.0 и VPAID 2.0. В этой статье описываются конечные решения в рамках этих стандартов.

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

Схема прямого взаимодействия плеера с ADFOX

  1. Запрос за рекламой — видеоплеер посылает запрос в ADFOX для получения VAST.
  2. VAST ответ — ADFOX присылает VAST, в котором содержатся ссылки на медиафайлы и события, необходимые для отображения и сбора статистики по баннеру.
  3. Отправка статистики — по мере наступления событий при воспроизведении рекламы (ролик загружен, первая четверть и т. д.) плеер отправляет статистику о них в ADFOX.
Схема взаимодействия, включающая сторонний сервер рекламы (Wrapper)

  1. Запрос за рекламой — видеоплеер делает запрос в ADFOX для получения VAST.
  2. VAST редирект (Wrapper) — ADFOX отправляет в ответ VAST, в котором содержатся ссылки на события, а так же URI стороннего сервера рекламы в тегах <VASTAdTagURI></VASTAdTagURI>.

    Пример Wrapper ответа от ADFOX:

    
    <?xml version="1.0" encoding="UTF-8"?>
    <VAST version="2.0">
         <Ad id="%campaignId%-%user1%">
         <Wrapper>
              <AdSystem>Adfox</AdSystem>
              <VASTAdTagURI>
                   <![CDATA[ССЫЛКА НА СТОРОННИЙ СЕРВЕР РЕКЛАМЫ]]>
              </VASTAdTagURI>
              <Error>
                   <![CDATA[%event20%]]>
              </Error>
              <Impression>
                   <![CDATA[%event3%]]>
              </Impression>
              <Creatives>
                   <Creative>
                        <Linear>
                             <TrackingEvents>
                                  ...
                             </TrackingEvents>
                             <VideoClicks>
                                  <ClickTracking>
                                       <!![CDATA[%reference%]]>
                                  </ClickTracking>
                             </VideoClicks>
                         </Linear>
                    </Creative>
               </Creatives>
               <Extensions>
                   ...
               </Extensions>
         </Wrapper>
    </Ad>
    </VAST>
                    
  3. Запрос за рекламой — после обработки VAST-ответа от ADFOX видеоплеер делает запрос к стороннему серверу рекламы, используя URI, который ADFOX прислал внутри тегов <VASTAdTagURI></VASTAdTagURI>.
  4. Отправка статистики — по мере наступления событий при воспроизведении рекламы (ролик загружен, первая четверть и т. д.) плеер отправляет статистику о них в ADFOX и на сторонний сервер рекламы путем отправки запросов по ссылкам из VAST.
Wrapper-ответ содержит тег Wrapper со ссылкой на сторонний сервер рекламы. Сторонний сервер может отдать баннер Linear Ad или Wrapper, который ссылается на еще один сервер рекламы. В конечном счете последний сервер в цепочке должен отдать все необходимые файлы для отображения рекламы.

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

Примечание. Перечисленные в этом разделе шаблоны доступны для баннеров с типом представления XML.

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

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

Ограничение. Шаблоны Overlay (VAST 3.0) Image, Overlay (VAST 3.0) HTML и Overlay (VAST 3.0) HTML Custom работают только со сторонними плеерами и не поддерживаются библиотекой Yandex Video Ads SDK.
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

Overlay TGO (ADSDK)

Текстово-графическое объявления в стиле Яндекса. Тип содержимого — текст, изображение. Работает только с библиотекой Yandex Video Ads SDK и не поддерживается сторонними плеерами.

Код шаблона
<?xml version="1.0" encoding="UTF-8" ?>
<VAST version="3.0">
    <Ad>
        <InLine>
            <AdSystem>ADFOX</AdSystem>
            <AdTitle>Overlay TGB</AdTitle>
            <Impression>
                <![CDATA[%event3%]]>
            </Impression>
            <Error>
                <![CDATA[%event20%]]>
            </Error>
            <Creatives>
                <Creative id="888" sequence="1">
                    <NonLinearAds>
                        <TrackingEvents>
                            <Tracking event="creativeView">
                                <![CDATA[%event2%]]>
                            </Tracking>
                        </TrackingEvents>
                        <NonLinear apiFramework="VPAID" width="300" height="60">
                            <NonLinearClickThrough>
                            </NonLinearClickThrough>
                            <StaticResource creativeType="application/javascript">
                                <![CDATA[
                                https://yastatic.net/awaps-ad-sdk-js/1_0/overlay_creative.js
                            ]]>
                            </StaticResource>
                            <AdParameters>
                                <![CDATA[
                                  {
    "trackingEvents":
    {
        "start": "%event1%"
    },
    "mediaFiles": [
    {
        "type": "overlay-creative/javascript",
        "url": "https://yastatic.net/awaps-ad-sdk-js/1_0/overlay_tgo.js"
    }],
    "adParameters":
    {
        "images": [
            [
                "%user1%",
                "125",
                "96"
            ]
        ],
        "title": "%user2%",
        "domain": "%user3%",
        "url": "%reference%"
    }
}
                                ]]>
                            </AdParameters>
                        </NonLinear>
                    </NonLinearAds>
                    <CreativeExtensions>
                    </CreativeExtensions>
                </Creative>
            </Creatives>
        </InLine>
    </Ad>
</VAST>
Содержимое шаблона
{"name":{"id":"name","type":"text","value":"TU9ERVJOIE9WRVJMQVk=","tagName":"INPUT","isChecked":"","selectedIndex":""},"description":{"name":"description","type":"textarea","value":"TU9ERVJOIE9WRVJMQVk=","tagName":"TEXTAREA","isChecked":"","selectedIndex":""},"event1Name":{"id":"event1Name","type":"text","value":"0J3QsNGH0LDQu9C+INC/0YDQvtGB0LzQvtGC0YDQsCAoc3RhcnQp","tagName":"INPUT","isChecked":"","selectedIndex":""},"event2Name":{"id":"event2Name","type":"text","value":"0KDQvtC70LjQuiDQstGL0LHRgNCw0L0gKGNyZWF0aXZlVmlldyk=","tagName":"INPUT","isChecked":"","selectedIndex":""},"event3Name":{"id":"event3Name","type":"text","value":"0KDQvtC70LjQuiDQt9Cw0LPRgNGD0LbQtdC9IChpbXByZXNzaW9uKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event4Name":{"id":"event4Name","type":"text","value":"0J/QtdGA0LLQsNGPINGH0LXRgtCy0LXRgNGC0Ywg0L/RgNC+0YHQvNC+0YLRgNCwIChmaXJzdFF1YXJ0aWxlKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event5Name":{"id":"event5Name","type":"text","value":"0KHQtdGA0LXQtNC40L3QsCDQv9GA0L7RgdC80L7RgtGA0LAgKG1pZHBvaW50KQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event6Name":{"id":"event6Name","type":"text","value":"0KLRgNC10YLRjNGPINGH0LXRgtCy0LXRgNGC0Ywg0L/RgNC+0YHQvNC+0YLRgNCwICh0aGlyZFF1YXJ0aWxlKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event7Name":{"id":"event7Name","type":"text","value":"0J/QvtC70L3Ri9C5INC/0YDQvtGB0LzQvtGC0YAgKGNvbXBsZXRlKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event8Name":{"id":"event8Name","type":"text","value":"0JLRi9C60LvRjtGH0LjRgtGMINC30LLRg9C6IChtdXRlKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event9Name":{"id":"event9Name","type":"text","value":"0JLQutC70Y7Rh9C40YLRjCDQt9Cy0YPQuiAodW5tdXRlKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event10Name":{"id":"event10Name","type":"text","value":"0J/QsNGD0LfQsCAocGF1c2Up","tagName":"INPUT","isChecked":"","selectedIndex":""},"event11Name":{"id":"event11Name","type":"text","value":"0J/RgNC+0YHQvNC+0YLRgCDRgdC90LDRh9Cw0LvQsCAocmV3aW5kKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event12Name":{"id":"event12Name","type":"text","value":"0J/RgNC+0LTQvtC70LbQtdC90LjQtSDQv9GA0L7RgdC80L7RgtGA0LAgKHJlc3VtZSk=","tagName":"INPUT","isChecked":"","selectedIndex":""},"event13Name":{"id":"event13Name","type":"text","value":"0J/QtdGA0LXRhdC+0LQg0LIg0L/QvtC70L3Ri9C5INGN0LrRgNCw0L0gKGZ1bGxzY3JlZW4p","tagName":"INPUT","isChecked":"","selectedIndex":""},"event14Name":{"id":"event14Name","type":"text","value":"0KDQsNC30LLQtdGA0L3Rg9GC0YwgKGV4cGFuZCk=","tagName":"INPUT","isChecked":"","selectedIndex":""},"event15Name":{"id":"event15Name","type":"text","value":"0KHQstC10YDQvdGD0YLRjCAoY29sbGFwc2Up","tagName":"INPUT","isChecked":"","selectedIndex":""},"event16Name":{"id":"event16Name","type":"text","value":"0J/QtdGA0LXQudGC0Lgg0Log0YHQu9C10LTRg9GO0YnQtdC80YMg0YDQvtC70LjQutGDIChhY2NlcHRJbnZpdGF0aW9uKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event17Name":{"id":"event17Name","type":"text","value":"0JrQu9C40Log0L/QviDQutC90L7Qv9C60LUgwqvQt9Cw0LrRgNGL0YLRjMK7IChjbG9zZSk=","tagName":"INPUT","isChecked":"","selectedIndex":""},"event18Name":{"id":"event18Name","type":"text","value":"0JrQu9C40Log0L/QviDQv9C70LDRiNC60LUgwqvQv9GA0L7Qv9GD0YHRgtC40YLRjCDRgNC10LrQu9Cw0LzRg8K7IChza2lwQWQp","tagName":"INPUT","isChecked":"","selectedIndex":""},"event19Name":{"id":"event19Name","type":"text","value":"0JrQu9C40Log0L/QviDQv9C70LDRiNC60LUgwqvQn9C10YDQtdC50YLQuCDQvdCwINGB0LDQudGCINGA0LXQutC70LDQvNC+0LTQsNGC0LXQu9GPwrsgKGFkZGNsaWNrKQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"event20Name":{"id":"event20Name","type":"text","value":"0J7RiNC40LHQutCwIChFcnJvcik=","tagName":"INPUT","isChecked":"","selectedIndex":""},"userParameters-0[name]":{"id":"userParameters-0[name]","type":"text","value":"0JjQt9C+0LHRgNCw0LbQtdC90LjQtQ==","tagName":"INPUT","isChecked":"","selectedIndex":""},"userParameters[0][type]":{"id":"userParameters[0][type]","type":"select-one","value":"ZmlsZQ==","tagName":"SELECT","isChecked":"","selectedIndex":2},"userParameters-1[name]":{"id":"userParameters-1[name]","type":"text","value":"0JfQsNCz0L7Qu9C+0LLQvtC6","tagName":"INPUT","isChecked":"","selectedIndex":""},"userParameters[1][type]":{"id":"userParameters[1][type]","type":"select-one","value":"c3RyaW5n","tagName":"SELECT","isChecked":"","selectedIndex":""},"userParameters[1][default]":{"name":"userParameters[1][default]","type":"textarea","value":"","tagName":"TEXTAREA","isChecked":"","selectedIndex":""},"userParameters-2[name]":{"id":"userParameters-2[name]","type":"text","value":"0KLQtdC60YHRgg==","tagName":"INPUT","isChecked":"","selectedIndex":""},"userParameters[2][type]":{"id":"userParameters[2][type]","type":"select-one","value":"c3RyaW5n","tagName":"SELECT","isChecked":"","selectedIndex":""},"userParameters[2][default]":{"name":"userParameters[2][default]","type":"textarea","value":"","tagName":"TEXTAREA","isChecked":"","selectedIndex":""},"codeType":{"id":"codeType","type":"select-one","value":"MA==","tagName":"SELECT","isChecked":"","selectedIndex":""},"impressionCode":{"name":"impressionCode","type":"textarea","value":"PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+CjxWQVNUIHZlcnNpb249IjMuMCI+CiAgICA8QWQ+CiAgICAgICAgPEluTGluZT4KICAgICAgICAgICAgPEFkU3lzdGVtPkFERk9YPC9BZFN5c3RlbT4KICAgICAgICAgICAgPEFkVGl0bGU+T3ZlcmxheSBUR0I8L0FkVGl0bGU+CiAgICAgICAgICAgIDxJbXByZXNzaW9uPgogICAgICAgICAgICAgICAgPCFbQ0RBVEFbJWV2ZW50MyVdXT4KICAgICAgICAgICAgPC9JbXByZXNzaW9uPgogICAgICAgICAgICA8RXJyb3I+CiAgICAgICAgICAgICAgICA8IVtDREFUQVslZXZlbnQyMCVdXT4KICAgICAgICAgICAgPC9FcnJvcj4KICAgICAgICAgICAgPENyZWF0aXZlcz4KICAgICAgICAgICAgICAgIDxDcmVhdGl2ZSBpZD0iODg4IiBzZXF1ZW5jZT0iMSI+CiAgICAgICAgICAgICAgICAgICAgPE5vbkxpbmVhckFkcz4KICAgICAgICAgICAgICAgICAgICAgICAgPFRyYWNraW5nRXZlbnRzPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRyYWNraW5nIGV2ZW50PSJjcmVhdGl2ZVZpZXciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwhW0NEQVRBWyVldmVudDIlXV0+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1RyYWNraW5nPgogICAgICAgICAgICAgICAgICAgICAgICA8L1RyYWNraW5nRXZlbnRzPgogICAgICAgICAgICAgICAgICAgICAgICA8Tm9uTGluZWFyIGFwaUZyYW1ld29yaz0iVlBBSUQiIHdpZHRoPSIzMDAiIGhlaWdodD0iNjAiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPE5vbkxpbmVhckNsaWNrVGhyb3VnaD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvTm9uTGluZWFyQ2xpY2tUaHJvdWdoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPFN0YXRpY1Jlc291cmNlIGNyZWF0aXZlVHlwZT0iYXBwbGljYXRpb24vamF2YXNjcmlwdCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPCFbQ0RBVEFbCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaHR0cHM6Ly95YXN0YXRpYy5uZXQvYXdhcHMtYWQtc2RrLWpzLzFfMC9vdmVybGF5X2NyZWF0aXZlLmpzCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBdXT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvU3RhdGljUmVzb3VyY2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8QWRQYXJhbWV0ZXJzPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwhW0NEQVRBWwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgewogICAgInRyYWNraW5nRXZlbnRzIjoKICAgIHsKICAgICAgICAic3RhcnQiOiAiJWV2ZW50MSUiCiAgICB9LAogICAgIm1lZGlhRmlsZXMiOiBbCiAgICB7CiAgICAgICAgInR5cGUiOiAib3ZlcmxheS1jcmVhdGl2ZS9qYXZhc2NyaXB0IiwKICAgICAgICAidXJsIjogImh0dHBzOi8veWFzdGF0aWMubmV0L2F3YXBzLWFkLXNkay1qcy8xXzAvb3ZlcmxheV90Z28uanMiCiAgICB9XSwKICAgICJhZFBhcmFtZXRlcnMiOgogICAgewogICAgICAgICJpbWFnZXMiOiBbCiAgICAgICAgICAgIFsKICAgICAgICAgICAgICAgICIldXNlcjElIiwKICAgICAgICAgICAgICAgICIxMjUiLAogICAgICAgICAgICAgICAgIjk2IgogICAgICAgICAgICBdCiAgICAgICAgXSwKICAgICAgICAidGl0bGUiOiAiJXVzZXIyJSIsCiAgICAgICAgImRvbWFpbiI6ICIldXNlcjMlIiwKICAgICAgICAidXJsIjogIiVyZWZlcmVuY2UlIgogICAgfQp9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgXV0+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0FkUGFyYW1ldGVycz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9Ob25MaW5lYXI+CiAgICAgICAgICAgICAgICAgICAgPC9Ob25MaW5lYXJBZHM+CiAgICAgICAgICAgICAgICAgICAgPENyZWF0aXZlRXh0ZW5zaW9ucz4KICAgICAgICAgICAgICAgICAgICA8L0NyZWF0aXZlRXh0ZW5zaW9ucz4KICAgICAgICAgICAgICAgIDwvQ3JlYXRpdmU+CiAgICAgICAgICAgIDwvQ3JlYXRpdmVzPgogICAgICAgIDwvSW5MaW5lPgogICAgPC9BZD4KPC9WQVNUPg==","tagName":"TEXTAREA","isChecked":"","selectedIndex":""},"previewCode":{"name":"previewCode","type":"textarea","value":"JWdsb2JhbC5wcmV2aWV3VmFzdCU=","tagName":"TEXTAREA","isChecked":"","selectedIndex":""}}

Пример 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://ads.adfox.ru/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 содержат контейнер <TrackingEvents>, внутри которого лежат теги <Tracking>. Каждый элемент <Tracking>содержит URI ADFOX, по которому видеоплеер должен делать запрос, когда наступает определенное событие. Название события передается в атрибуте event.

Название Событие
Ролик выбран creativeView
Начало просмотра start
Первая четверть просмотра firstQuartile
Середина просмотра midpoint
Третья четверть просмотра thirdQuartile
Окончание просмотра complete
Клик на крестик закрытия close
Выключить звук Mute (слайдер управления громкостью рекламных роликов по умолчанию выставляется на 40%)
Включить звук Unmute (слайдер управления громкостью рекламных роликов по умолчанию выставляется на 40%)

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

Когда нет подходящей рекламы для показа, 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[//ads.adfox.ru/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-код баннера по умолчанию площадки и/или типа баннера.