1. Что такое VAST

VAST (Video Ad Serving Template) - стандарт IAB для передачи метаданных видеорекламы от рекламного сервера к плееру. Версия 4.0 - актуальная.

Работает так:

  1. Перед основным контентным видео плеер дёргает VAST URL
  2. Получает XML с описанием рекламы: где лежит mp4, длительность, через сколько секунд можно skip, куда вести по клику
  3. Играет рекламу (pre-roll)
  4. Шлёт impression-tracking pixel что показ засчитан
  5. Включает основное видео

Преимущество перед нашим JS-виджетом: работает в твоём существующем плеере. Не нужно ничего переделывать в UI.

2. Где взять VAST URL

VAST-формат доступен только для блоков формата video (in-stream 16:9). На странице блока /pub/zones/{id} увидишь розовую плашку «🎬 VAST URL - для своего видеоплеера»:

https://sladu.net/vast/{subid}.xml

Пример: https://sladu.net/vast/tvid9234f7.xml

3. Структура VAST-ответа

<?xml version="1.0" encoding="UTF-8"?>
<VAST version="4.0" xmlns="http://www.iab.com/VAST">
  <Ad id="impression-uuid-here">
    <InLine>
      <AdSystem version="1.0">Sladu Network</AdSystem>
      <AdTitle><![CDATA[Заголовок креатива]]></AdTitle>
      <Impression><![CDATA[https://sladu.net/openrtb/imptracker/impression-uuid]]></Impression>
      <Creatives>
        <Creative id="creative-id" sequence="1">
          <Linear skipoffset="00:00:05">
            <Duration>00:00:30</Duration>
            <MediaFiles>
              <MediaFile delivery="progressive" type="video/mp4" width="640" height="360">
                <![CDATA[https://cdn.advertiser.com/video.mp4]]>
              </MediaFile>
            </MediaFiles>
            <VideoClicks>
              <ClickThrough><![CDATA[https://sladu.net/c/impression-uuid/tracking-token]]></ClickThrough>
            </VideoClicks>
          </Linear>
        </Creative>
      </Creatives>
    </InLine>
  </Ad>
</VAST>

4. Поля VAST

  • <AdTitle> - заголовок креатива
  • <Impression> - URL pixel для подсчёта показов. Плеер дёргает когда реально показал рекламу.
  • <MediaFile> - URL mp4-видео, размеры (всегда 16:9), MIME-тип
  • <Duration> - длительность ролика в формате HH:MM:SS
  • skipoffset="00:00:05" - через 5 сек можно показать кнопку Skip
  • <ClickThrough> - URL куда вести юзера по клику. Уже содержит наш редирект на рекламодателя + click-tracking.

5. Пустой VAST (no_match)

Если нет подходящего креатива (нет активных кампаний на твоё гео, фильтр антифрода) - возвращаем валидный пустой VAST:

<?xml version="1.0" encoding="UTF-8"?>
<VAST version="4.0"></VAST>

Плеер должен обработать это как «рекламы нет» и сразу запустить основной контент. Все нормальные плееры так делают.

6. JW Player 8+

jwplayer("player").setup({
    file: "your-content.mp4",
    advertising: {
        client: "vast",
        tag: "https://sladu.net/vast/abc12345.xml"
    }
});

Для midroll / postroll:

advertising: {
    client: "vast",
    schedule: {
        preroll: { offset: "pre",  tag: "https://sladu.net/vast/abc12345.xml" },
        mid:     { offset: "50%",  tag: "https://sladu.net/vast/abc12345.xml" },
        postroll:{ offset: "post", tag: "https://sladu.net/vast/abc12345.xml" }
    }
}

7. video.js + videojs-ima

<link href="//vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.6.1/video.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="//unpkg.com/videojs-ima@2.3.0/dist/videojs.ima.js"></script>

<video id="my-player" class="video-js" controls preload="auto" data-setup='{}'>
  <source src="your-content.mp4" type="video/mp4">
</video>

<script>
const player = videojs("my-player");
player.ima({
    adTagUrl: "https://sladu.net/vast/abc12345.xml"
});
</script>

8. Google IMA SDK (универсальный)

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<script>
const adDisplayContainer = new google.ima.AdDisplayContainer(
    document.getElementById('ad-container'),
    document.getElementById('content-video')
);
adDisplayContainer.initialize();

const adsLoader = new google.ima.AdsLoader(adDisplayContainer);
const adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = "https://sladu.net/vast/abc12345.xml";
adsRequest.linearAdSlotWidth = 640;
adsRequest.linearAdSlotHeight = 360;

adsLoader.requestAds(adsRequest);

adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, function(e){
    const adsManager = e.getAdsManager(document.getElementById('content-video'));
    adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
    adsManager.start();
});
</script>

9. HLS.js + Google IMA

HLS.js не имеет встроенной VAST-поддержки. Используй комбинацию HLS.js (для контента) + IMA SDK (для рекламы):

if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('your-stream.m3u8');
    hls.attachMedia(videoElement);
}

// VAST через IMA SDK как в примере выше
const adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = "https://sladu.net/vast/abc12345.xml";
adsLoader.requestAds(adsRequest);

10. Plyr / Flowplayer / Bitmovin / Brightcove

  • Plyr - нет встроенного VAST, нужен plyr-ads плагин с поддержкой Google IMA
  • Flowplayer - VAST поддерживается из коробки в Commercial-версии, плагин flowplayer-ima
  • Bitmovin Player - встроенный AdsModule, конфиг: { ads: [{ tag: { url: "https://sladu.net/vast/...", type: "vast" }, position: "pre" }] }
  • Brightcove - через плагин bc-vast-ads-plugin
  • Shaka Player - shaka-player-ima добавляет Google IMA

11. Тестирование

Просто открой VAST URL в браузере

Должен показать XML. Если пусто (<VAST version="4.0"></VAST>) - значит нет подходящего креатива для твоего гео.

Google IMA Sample Player

googleads.github.io/googleads-ima-html5/vsi - вставь VAST URL, нажми Play - увидишь как IMA SDK обрабатывает наш VAST.

IAB VAST Inspector

vasttester.iabtechlab.com - официальный инспектор IAB. Проверяет соответствие XML спецификации.

curl

curl -v "https://sladu.net/vast/abc12345.xml" \
     -H "Referer: https://yoursite.com/page" \
     -H "User-Agent: Mozilla/5.0 (X11; Linux) Chrome/120"

12. Трекинг событий

Сейчас в VAST-ответе мы шлём минимальный набор трекеров:

  • <Impression> - показ засчитан
  • <ClickThrough> - URL с нашим click-tracking

По запросу можем добавить <TrackingEvents> для:

  • start - видео начало играть
  • firstQuartile, midpoint, thirdQuartile - 25/50/75% просмотрено
  • complete - видео досмотрели до конца
  • skip - юзер нажал skip
  • mute, unmute, pause, resume, fullscreen

Сейчас по дефолту они не нужны для биллинга - засчитываем сам показ. Если рекламодатель платит CPV (cost per view, 100% досмотра) - включаем по тикету в саппорт.

Не работает интеграция? Открой VAST URL в браузере - должен показать XML. Если пусто - нет креативов для гео. Если ошибка - пиши в @sladu_support с примером URL и плеером.