Как включить линейные медийные объявления

IMA SDK для HTML5 поддерживает не только линейные видеообъявления, но и линейные медийные объявления. Подробную информацию о линейных видеообъявлениях можно найти в статье Общие сведения о Решениях для видеорекламы.

Включив линейные медийные объявления, вы можете повысить спрос на рекламные места, поскольку такие объявления будут конкурировать за них с линейными видеообъявлениями. IMA SDK обрабатывает отрисовку линейных медийных объявлений, но вам нужно настроить обнаружение видеоконтента. Реализация обнаружения контента IMA зависит от того, создаете ли вы проигрыватель контента в том же фрейме источника, что и проигрыватель объявлений, или же проигрыватель объявлений создается в перекрестном фрейме.

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

Как настроить обнаружение контента

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

Тот же источник

Если IMA SDK и проигрыватель контента имеют один и тот же источник, выполните одно из следующих действий:

  • Рекомендуемый вариант. Передайте видеопроигрыватель в вызов AdsManagerLoadedEvent.getAdsManager(). Хотя getAdsManager() позволяет передавать объект, содержащий свойство currentTime, для поддержки обнаружения контента необходимо передать экземпляр HTMLVideoElement в getAdsManager().

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • Если вы не можете предоставить проигрыватель контента во время вызова AdsManagerLoadedEvent.getAdsManager(), вызовите метод AdsManager.configureAdsManager() с видеопроигрывателем. Чтобы обнаружение контента работало, это должен быть HTMLVideoElement.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

Если вы не настроите обнаружение контента, серверы объявлений Google могут прекратить показ линейных медийных объявлений.

Если проигрыватель контента находится в том же источнике, из которого вы загружаете IMA SDK, то вам не нужно вносить изменения в реализацию IMA, чтобы изменить проигрыватель контента или прекратить сбор сигналов контента.

Из разных источников

Если IMA SDK и проигрыватель контента находятся в разных источниках, IMA может собирать сигналы обнаружения контента с помощью класса CrossOriginProxy. Этот класс позволяет IMA SDK проверять правильность размещения линейных медийных объявлений и собирать сигналы, связанные с тематикой видеоконтента. Если вы размещаете IMA SDK в междоменном фрейме iframe, то необходимо реализовать класс CrossOriginProxy.

Если вы продолжите размещать проигрыватель контента в источнике, отличном от IMA SDK, и не реализуете класс CrossOriginProxy, серверы объявлений Google могут прекратить показ линейных медийных объявлений.

Чтобы загрузить класс CrossOriginProxy в приложение, выполните следующие действия:

  1. Импортируйте файл ima_proxy.js в HTML-файл:

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. В файле main.js получите экземпляр CrossOriginProxy.

  3. Вызовите метод setVideoElements() с массивом всех видеопроигрывателей, которые показывают рекламу на вашей странице или в приложении.

Прежде чем отправлять запрос объявления, необходимо передать элементы видео в экземпляр CrossOriginProxy с помощью вызова setVideoElements(). В примере ниже передается массив, содержащий один видеопроигрыватель:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

Как изменить видеопроигрыватель для контента

Если вы перейдете на другой видеопроигрыватель или добавите ещё один, вам нужно будет передать новый массив в метод setVideoElements(). Когда вы вызываете метод setVideoElements(), IMA начинает собирать сигналы для нового проигрывателя контента и прекращает сбор сигналов для проигрывателей, переданных в предыдущих вызовах.

В примере ниже новый элемент video передается в класс CrossOriginProxy.

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Прекращать сбор сигналов после завершения показа объявлений

Когда показ объявлений завершится и вы вызовете метод AdsLoader.destroy(), вам также нужно будет вызвать метод setVideoElements() с пустым массивом. Вызов setVideoElements() с пустым массивом удаляет ссылку на проигрыватели контента, которые хранит IMA, и предотвращает утечку памяти.