Мой кабинет

Руководство по внедрению

Видео pre-roll

Pre-roll video ads

Видеореклама, которая воспроизводится в плеере перед видео, выбранным для просмотра.

  • Ad Manager
  • Ad Exchange
  • AdSense (через Ad Manager)
  • внутри видеоплеера (телефон и компьютер)
Десктоп
Мобильный

Понять за 1 минуту

Что такое видео pre-roll

Помните, как в кино перед началом фильма показывают трейлеры и рекламу? Видео pre-roll работает так же, только на вашем сайте. Человек нажимает «Воспроизвести», и перед появлением контента в том же плеере идёт реклама. Плеер, это окно, в котором показывается видео, с кнопками воспроизведения, паузы и громкости. Когда реклама заканчивается, начинается выбранное видео.

Чтобы это работало, плеер должен уметь запрашивать рекламу. Google предлагает набор кода IMA SDK, который подключается вместе с плеером. Он отправляет запрос в Ad Manager с помощью рекламного тега, то есть интернет-адреса с данными о рекламном месте, например о рекламном блоке и размере плеера. Ответ приходит в формате VAST, стандартном формате, похожем на рецепт: он говорит, какое видео показать и как считать просмотры. Если на сайте используются правила видеорекламы, ответ может прийти в формате VMAP. Это как телевизионная сетка вещания: она указывает, когда начинается каждый рекламный блок.

Google также поясняет важный момент про автоматический запуск видео, так называемый автовоспроизведение. У браузеров, таких как Chrome и Safari, есть собственные правила, и часто видео может запускаться само только без звука. Простого способа узнать, разрешит ли это браузер, нет: единственный вариант, попробовать воспроизвести. Поэтому в руководстве по IMA сказано, что на телефоне контейнер рекламы нужно запускать по действию человека, например по нажатию кнопки воспроизведения. А если плеер будет запускаться сам или без звука, он должен указать это в запросе, чтобы приходила только та реклама, которая может так воспроизводиться.

Pre-roll оправдан, когда видео является причиной визита, например урок, рецепт или видеоновость. В видеополитике Google это место называется In-stream, то есть внутри контента, который человек выбрал смотреть, и его нужно объявлять правильно. Всегда помните: человек пришел за видео, поэтому реклама не должна мешать элементам управления и блокировать контент.

Пошаговая инструкция

Как внедрить

  1. Создайте рекламный блок для видеоВ Ad Manager pre-roll использует блок видео- и аудиорекламы. Именно из этого блока берется тег, который будет использовать плеер.
  2. Сгенерируйте рекламный тегПерейдите в Инвентарь, Рекламные блоки, откройте блок и нажмите Теги. Выберите Google Publisher Tag для видео и аудио, пройдите шаги и скопируйте тег. Значения в квадратных скобках должен заполнить плеер в момент запроса.
  3. Добавьте IMA SDK на страницуЗагрузите скрипт IMA SDK до вашего кода. Создайте поверх видео контейнер для рекламы и свяжите его с видео через AdDisplayContainer, часть IMA, которая показывает рекламу.
  4. Запросите рекламуСоздайте AdsLoader и AdsRequest с вашим тегом. Укажите ширину и высоту места для линейной рекламы. Это помогает IMA выбрать подходящую рекламу, если их приходит несколько.
  5. Приостановите и возобновите контентКогда IMA запросит паузу (событие CONTENT_PAUSE_REQUESTED), поставьте видео на паузу. Когда попросит продолжить (CONTENT_RESUME_REQUESTED), запустите его снова. При ошибке уничтожьте менеджер рекламы и дайте видео воспроизводиться без рекламы.
  6. Начинайте по клику человекаПо кнопке воспроизведения запустите контейнер рекламы, затем инициализируйте и запустите AdsManager. В руководстве по IMA сказано, что на телефоне контейнер рекламы нужно запускать по действию человека.

Пример внедрения

Код и как это выглядит на экране

Это делается на странице с видео: скрипт IMA вверху, плеер с контейнером рекламы поверх него и код, который запрашивает pre-roll, когда человек нажимает «Смотреть».
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
На компьютереРеклама воспроизводится в плеере, на том же месте, где пойдёт видео, до начала контента. Когда она заканчивается, начинается выбранное видео.
На мобильныхРеклама также отображается в плеере, обычно после того, как человек нажмёт «Воспроизвести». На iPhone для воспроизведения внутри страницы, а не в полноэкранном плеере, видео нужен атрибут playsinline.

Что рекомендует Google

Что можно и что нельзя

Можно

  • Проигрывать рекламу перед видео, которое выбрал человек, внутри плеера, с помощью IMA SDK, одного из инструментов, которые Google требует для слотов In-stream.
  • Запускать рекламу по клику человека на кнопку воспроизведения, как рекомендует руководство по IMA для телефонов.
  • Использовать автовоспроизведение, в том числе без звука, если плеер указывает в запросе, что запустится сам и будет ли воспроизведение без звука.
  • Позволять видео воспроизводиться как обычно, если реклама выдала ошибку, как в примере Google.

Нельзя

  • Нельзя объявлять слот неверно: реклама в плеере с видео должна быть объявлена как In-stream или Сопровождающий контент (видео, которое идет вместе с основным контентом).
  • Нельзя закрывать, скрывать или отключать элементы управления рекламой и видео.
  • Нельзя запускать одновременно больше одного видео со звуком без действия человека, а также показывать на экране больше одного автоматически воспроизводимого плеера.
  • Реклама не должна запускаться сама, пока не видно хотя бы 50% её места.
  • Нельзя использовать продукты IMA, чтобы зарабатывать на видео YouTube.

Советы

Как сделать правильно

Осторожно

Частые ошибки

Открывать файл прямо на компьютере

В руководстве по IMA сказано, что страницу нужно отдавать через веб-сервер, даже локальный. Если открыть HTML-файл напрямую, тест может не пройти.

Запускать без действия человека на телефоне

На телефоне контейнер рекламы нужно запускать по действию человека, например по нажатию на кнопку воспроизведения. Без этого реклама может не воспроизвестись.

Не обрабатывать ошибку рекламы

Некорректный ответ VAST может вызвать ошибку. В примере Google менеджер рекламы уничтожается и запускается видео, чтобы человек не застрял на неподвижном экране.

Забыть про изменение размера

Когда размер окна меняется, пример Google вызывает изменение размера AdsManager по размеру видео. Без этого реклама может получиться неправильного размера.

Частые вопросы

Нужны ли мне правила рекламы для pre-roll?

Нет. Плеер может запросить тег VAST через IMA. Google говорит, что параметр правил рекламы (ad_rule) не обязателен для показа рекламы, а нужен только для использования правил видеорекламы.

Чем VAST отличается от VMAP?

VAST, это ответ, который сообщает, какую рекламу показать. VMAP, это ответ для правил рекламы, в котором указано, когда начинаются рекламные блоки. Формат выбирается в теге параметром output, например со значениями vast и vmap.

Может ли pre-roll запускаться сам?

Может, если браузер это разрешает. Chrome и Safari ограничивают автовоспроизведение, особенно со звуком. Плеер должен проверить это, указать в запросе, что запустится сам и без звука, а на телефоне начинать рекламу по действию человека.

Что будет, если реклама не загрузится?

Руководство Google требует, чтобы видео продолжало играть, когда реклама не загружается. В примере менеджер рекламы уничтожается, и видео играет без рекламы.

Библиотека

Официальный источник Google

Всё на этой странице основано на официальной документации Google. Читайте прямо в источнике:

Ваш сайт правильно использует этот формат?

Аудит читает сайт как посетитель, ничего не нажимая, и показывает, что исправить.

Запустить аудит