Ativar anúncios de display lineares

O SDK do IMA para HTML5 é compatível com anúncios de display lineares, além de anúncios em vídeo lineares. Para detalhes sobre anúncios em vídeo lineares, consulte Visão geral da publicidade no Video Solutions.

Ativar os anúncios de display linear pode criar uma demanda adicional para seu espaço publicitário, porque eles concorrem com os anúncios em vídeo linear pela sua demanda de anúncios. O IMA processa a renderização de anúncios de display lineares, mas exige que você configure a detecção de conteúdo de vídeo. A implementação da detecção de conteúdo do IMA varia dependendo de você criar o player de conteúdo no mesmo frame de origem do player de anúncios ou em um frame entre origens.

Este guia aborda como configurar a detecção de conteúdo para ativar anúncios de display lineares, mudar o player de vídeo de conteúdo e interromper a coleta de indicadores de conteúdo.

Configurar a detecção de conteúdo

Para ativar os anúncios de display lineares em solicitações de anúncio, faça o seguinte:

Mesma origem

Se o SDK do IMA compartilhar a mesma origem que o player de conteúdo, siga um destes procedimentos:

  • Preferencial: transmita o player de vídeo para a chamada AdsManagerLoadedEvent.getAdsManager(). Embora o getAdsManager() permita transmitir um objeto que contém uma propriedade currentTime, é necessário transmitir uma instância HTMLVideoElement para getAdsManager() para oferecer suporte à detecção de conteúdo.

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

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

  • Se não for possível fornecer o player de conteúdo durante a chamada AdsManagerLoadedEvent.getAdsManager(), chame o método AdsManager.configureAdsManager() com o player de vídeo. Para que a detecção de conteúdo funcione, ela precisa ser um HTMLVideoElement.

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

Se você não configurar a detecção de conteúdo, os servidores de anúncios do Google poderão parar de veicular anúncios de display lineares.

Se o player de conteúdo estiver na mesma origem em que você carrega o SDK do IMA, não será necessário fazer mudanças na implementação do IMA para lidar com a mudança do player de conteúdo ou interromper a coleta de indicadores de conteúdo.

Entre origens

Se o SDK do IMA tiver uma origem diferente do player de conteúdo, ele poderá coletar indicadores de detecção de conteúdo pela classe CrossOriginProxy. Essa classe permite que o SDK do IMA verifique a posição correta do anúncio de display linear e colete indicadores relacionados ao assunto do conteúdo do vídeo. Se você colocar o SDK do IMA em um iframe de vários domínios, será necessário implementar a classe CrossOriginProxy.

Se você continuar a colocar o player de conteúdo entre origens para o SDK do IMA sem implementar a classe CrossOriginProxy, os servidores de anúncios do Google poderão parar de veicular anúncios de display lineares.

Para carregar a classe CrossOriginProxy no app, faça o seguinte:

  1. No arquivo HTML, importe o arquivo ima_proxy.js:

    <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. No arquivo main.js, acesse a instância CrossOriginProxy.

  3. Chame o método setVideoElements() com uma matriz de todos os players de vídeo que mostram anúncios na sua página ou app.

Antes de fazer uma solicitação de anúncio, transmita os elementos de vídeo para a instância CrossOriginProxy com a chamada setVideoElements(). O exemplo a seguir transmite uma matriz que contém um único player de vídeo de conteúdo:

// 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);
});

Mudar o player de vídeo do conteúdo

Se você mudar ou adicionar outro player de vídeo de conteúdo, transmita uma nova matriz para o método setVideoElements(). Quando você faz a nova chamada setVideoElements(), o IMA começa a coletar indicadores para o novo player de conteúdo e para de coletar indicadores para os players de conteúdo transmitidos em chamadas anteriores.

O exemplo a seguir transmite o novo elemento de vídeo para a classe CrossOriginProxy:

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

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

Parar de coletar indicadores quando os anúncios forem concluídos

Ao terminar de reproduzir anúncios e chamar o método AdsLoader.destroy(), você também precisa chamar o método setVideoElements() com uma matriz vazia. Fazer a chamada setVideoElements() com uma matriz vazia descarta a referência aos players de conteúdo que o IMA mantém e evita problemas de vazamento de memória.