Reglas de anuncios

El SDK de IMA HTML5 admite listas de reproducción de anuncios completamente automatizadas. Esta función inserta pausas publicitarias en el contenido como se especifica en Google Ad Manager cuando se coordina el tráfico de tus anuncios. También simplifica en gran medida el código del reproductor de video necesario para admitir pausas publicitarias, incluidos los anuncios previos al video, durante el video y al final del video.

  • Cuando se crea el AdsManager, se pasa un objeto contentPlayback mediante la llamada getAdsManager. Este objeto debe tener una propiedad currentTime que muestre la posición actual del cabezal de reproducción del video. Si usas un elemento video de HTML5 para mostrar tu contenido, puedes pasar ese elemento al SDK. Se usa para hacer un seguimiento del progreso de la reproducción de contenido, de modo que las pausas publicitarias se inserten automáticamente en los momentos especificados en Ad Manager. También debes informarle al SDK que quieres que maneje el estado del contenido por ti.
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager = adsManagerLoadedEvent.getAdsManager(
        videoContent, adsRenderingSettings); // See API reference for
        
        contentPlayback.
    
  • Para asegurarte de que se reproduzcan anuncios al final del video, debes informar al SDK cuando termine el contenido. Esto es un poco complicado, ya que, en algunos casos, el SDK usa tu reproductor de video para reproducir anuncios. Por ello, debes asegurarte de informar al SDK solo cuando termine el contenido y no cuando finalice un anuncio. Puedes hacerlo con el siguiente código:
    var videoContent = document.getElementById('contentElement');
    var contentEndedListener = function() {adsLoader.contentComplete();};
    
    videoContent.addEventListener('ended', contentEndedListener);
    
    function onContentPauseRequested() {
      contentElement.removeEventListener('ended', contentEndedListener);
      ...
    }
    
    function onContentResumeRequested() {
      contentElement.addEventListener('ended', contentEndedListener);
      ...
    }
  • Los eventos CONTENT_PAUSE_REQUESTED y CONTENT_RESUME_REQUESTED se usan para pausar y reanudar el contenido cuando se reproducen las pausas publicitarias.
  • Si tu reproductor de video admite la función de arrastrar para buscar y la propiedad de tiempo actual del reproductor de video se actualiza mientras el usuario arrastra, el SDK no puede diferenciar entre contenido que avanza normalmente y un usuario que busca a través del contenido. Debes usar un objeto contentPlayback personalizado como parámetro para getAdsManager. Para ver un ejemplo de este caso de uso, consulta El problema con la búsqueda.

Nota: Cuando el contenido termine de reproducirse o el usuario haya detenido la reproducción, asegúrate de llamar a AdsLoader.contentComplete para indicarle al SDK que el contenido terminó. Luego, el SDK reproduce la pausa publicitaria al final del video, si se programó. El evento ALL_ADS_COMPLETED se genera cuando se reproducen TODAS las pausas publicitarias. Además, ten en cuenta que el seguimiento de contenido comienza cuando se llama a init() y siempre debes llamar a init() antes de reproducir contenido.

Cómo inhabilitar la reproducción automática de pausas publicitarias

En algunas circunstancias, es posible que quieras evitar que el SDK reproduzca pausas publicitarias hasta que estés listo para ellas. En este caso, puedes inhabilitar la reproducción automática de pausas publicitarias para permitir que el SDK sepa cuándo quieres que se reproduzca una pausa publicitaria. Con esta configuración, una vez que el SDK carga una pausa publicitaria, se activa un evento AD_BREAK_READY. Cuando el reproductor esté listo para que comience la pausa publicitaria, puedes llamar a adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Probar

A continuación, puedes ver una implementación funcional.

El problema con buscar

Si usa reglas de anuncios, es posible que tenga problemas con la búsqueda de hacer clic y arrastrar. Específicamente, después de que un usuario hace clic y arrastra para buscar por el video más allá de varios Pods de anuncios durante el video, es posible que vea 2 o más de esos Pods de reproducción consecutivos antes de que se reanude el contenido. Esto se debe a que el tiempo de reproducción de video se actualiza mientras el usuario lo busca. Si el SDK sondea la hora actual mientras el usuario busca la hora actual, es posible que piense que ese anuncio debería reproducirse. Cuando se reanuda el contenido, se reproduce ese anuncio y, luego, el anuncio más reciente desde la búsqueda. Para obtener una representación visual de este problema, consulta el siguiente diagrama:

La manera más sencilla de solucionar este problema es guardar el tiempo actual cuando el usuario comienza a buscar y, luego, informar ese tiempo cuando el SDK lo solicita hasta que el usuario reanude la reproducción normal. Para obtener una representación visual de esta solución, consulta el siguiente diagrama:

Con esta solución, puedes omitir correctamente el anuncio durante el video de 0:10 y solo reproducir el de 0:20 durante el video. Para ello, se usa un seguimiento de cabezal de reproducción personalizado, como se muestra a continuación. El siguiente código contiene modificaciones (en negrita) de ads.js en la muestra avanzada de HTML5 disponible en nuestra página de descargas.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Problemas conocidos con Safari para dispositivos móviles

Este método debería funcionar en todas las plataformas, excepto en Safari para dispositivos móviles. En Safari para dispositivos móviles, la propiedad de búsqueda de la etiqueta de video no se implementó correctamente (siempre muestra "false"). Para evitarlo, debes hacer tu propia comprobación y ver si el usuario está buscando a través del video. A continuación, se incluye el código de muestra para este método. Una vez más, las líneas en negrita que aparecen a continuación son modificaciones en el código existente.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Con estos cambios, el SDK ahora usa la propiedad currentTime de tu objeto Ads para determinar cuándo reproducir las pausas publicitarias, y no la propiedad currentTime del reproductor de video de contenido.