Habilita los anuncios gráficos lineales

El SDK de IMA para HTML5 admite anuncios gráficos lineales, además de anuncios de video lineales. Para obtener detalles sobre los anuncios de video lineales, consulta la descripción general de la publicidad de Soluciones de video.

Habilitar los anuncios gráficos lineales puede generar una demanda adicional para tu espacio publicitario, ya que estos anuncios compiten con los anuncios de video lineales por tu espacio publicitario. El SDK de IMA controla la renderización de los anuncios gráficos lineales, pero requiere que configures la detección de contenido de video. La implementación de la detección de contenido de IMA varía según si creas tu reproductor de contenido en el mismo marco de origen que el reproductor de anuncios o si creas tu reproductor de anuncios en un marco de origen cruzado.

En esta guía, se explica cómo configurar la detección de contenido para habilitar los anuncios gráficos lineales, cambiar el reproductor de video de contenido y detener la recopilación de indicadores de contenido.

Configura la detección de contenido

Para habilitar los anuncios gráficos lineales en las solicitudes de anuncios, haz lo siguiente:

Mismo origen

Si el SDK de IMA comparte el mismo origen que tu reproductor de contenido, haz lo siguiente:

  • Preferido: Pasa el reproductor de video a la llamada AdsManagerLoadedEvent.getAdsManager(). Aunque getAdsManager() te permite pasar un objeto que contiene una propiedad currentTime, debes pasar una instancia de HTMLVideoElement a getAdsManager() para admitir la detección de contenido.

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

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

  • Si no puedes proporcionar el reproductor de contenido durante la llamada a AdsManagerLoadedEvent.getAdsManager(), llama al método AdsManager.configureAdsManager() con el reproductor de video. Para que la detección de contenido funcione, debe ser un HTMLVideoElement.

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

Si no configuras la detección de contenido, es posible que los servidores de anuncios de Google dejen de publicar anuncios gráficos lineales.

Si tu reproductor de contenido se encuentra en el mismo origen en el que cargas el SDK de IMA, no necesitas realizar ningún cambio en tu implementación de IMA para controlar el cambio del reproductor de contenido o detener la recopilación de indicadores de contenido.

Origen cruzado

Si el SDK de IMA tiene un origen cruzado con tu reproductor de contenido, el SDK de IMA puede recopilar indicadores de detección de contenido a través de la clase CrossOriginProxy. Esta clase permite que el SDK de IMA verifique la posición correcta del anuncio gráfico lineal y recopile indicadores relacionados con el tema del contenido de video. Si colocas el SDK de IMA en un iframe multidominio, debes implementar la clase CrossOriginProxy.

Si sigues colocando tu reproductor de contenido en un origen cruzado con el SDK de IMA sin implementar la clase CrossOriginProxy, es posible que los servidores de anuncios de Google dejen de publicar anuncios gráficos lineales.

Para cargar la clase CrossOriginProxy en tu app, haz lo siguiente:

  1. En tu archivo HTML, importa el archivo 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. En el archivo main.js, obtén la instancia de CrossOriginProxy.

  3. Llama al método setVideoElements() con un array de todos los reproductores de video que muestran anuncios en tu página o app.

Antes de realizar una solicitud de anuncio, debes pasar los elementos de video a la instancia de CrossOriginProxy con la llamada setVideoElements(). En el siguiente ejemplo, se pasa un array que contiene un solo reproductor de video de contenido:

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

Cambia el reproductor de video del contenido

Si cambias a otro reproductor de video de contenido o agregas uno, debes pasar un array nuevo al método setVideoElements(). Cuando realizas la nueva llamada a setVideoElements(), el SDK de IMA comienza a recopilar indicadores para el nuevo reproductor de contenido y deja de recopilar indicadores para los reproductores de contenido que se pasaron en llamadas anteriores.

En el siguiente ejemplo, se pasa el nuevo elemento de video a la clase CrossOriginProxy:

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

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

Detén la recopilación de indicadores cuando se completen los anuncios

Cuando termines de reproducir anuncios y llames al método AdsLoader.destroy(), también deberás llamar al método setVideoElements() con un array vacío. Realizar la llamada a setVideoElements() con un array vacío quita la referencia a los reproductores de contenido que contiene IMA y evita problemas de fuga de memoria.