Regras de anúncio

O SDK para HTML5 do IMA é compatível com playlists de anúncios totalmente automatizadas. Esse recurso insere intervalos de anúncio no conteúdo, conforme especificado no Google Ad Manager ao programar os anúncios. Isso também simplifica bastante o código do player de vídeo necessário para oferecer suporte a intervalos de anúncios, incluindo anúncios precedentes, intermediários e finais.

  • Ao criar o AdsManager, um objeto contentPlayback é transmitido por meio da chamada getAdsManager. Esse objeto precisa ter uma propriedade currentTime que retorne a posição atual do marcador do vídeo. Se você estiver usando um elemento video HTML5 para exibir seu conteúdo, basta transmitir esse elemento para o SDK. Ele é usado para acompanhar o progresso da reprodução do conteúdo. Assim, os intervalos de anúncios são inseridos automaticamente nos momentos especificados no Ad Manager. Também é necessário informar ao SDK que você quer que ele processe o estado do conteúdo em seu nome.
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager = adsManagerLoadedEvent.getAdsManager(
        videoContent, adsRenderingSettings); // See API reference for
        
        contentPlayback.
    
  • Para garantir que os anúncios finais sejam reproduzidos, é necessário informar ao SDK quando o conteúdo foi concluído. Isso é um pouco complicado, porque, em alguns casos, o SDK usa seu player de vídeo para reproduzir anúncios. Portanto, você precisa informar ao SDK apenas quando o conteúdo foi concluído, e não quando um anúncio terminar. Para isso, use o código abaixo:
    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);
      ...
    }
  • Os eventos CONTENT_PAUSE_REQUESTED e CONTENT_RESUME_REQUESTED são usados para pausar e retomar o conteúdo quando os intervalos comerciais são reproduzidos.
  • Se o player de vídeo for compatível com o recurso de arrastar para procurar e a propriedade de tempo atual dele for atualizada enquanto o usuário estiver arrastando, o SDK não poderá diferenciar entre o conteúdo que está progredindo normalmente e o usuário que procura o conteúdo. É preciso usar um objeto contentPlayback personalizado como parâmetro para getAdsManager. Para ver um exemplo desse caso de uso, consulte O problema de procurar (link em inglês).

Observação: quando a reprodução do conteúdo terminar ou o usuário interromper a reprodução, chame AdsLoader.contentComplete para sinalizar ao SDK que o conteúdo foi concluído. Em seguida, o SDK reproduzirá o intervalo de anúncio final, se um tiver sido programado. O evento ALL_ADS_COMPLETED é gerado quando TODOS os intervalos de anúncio forem reproduzidos. Além disso, o rastreamento de conteúdo começa quando init() é chamado, e você precisa sempre chamar init() antes de reproduzir o conteúdo.

Como desativar a reprodução automática de intervalos de anúncio

Em algumas circunstâncias, pode ser necessário evitar que o SDK reproduza intervalos de anúncios até que você esteja pronto para usá-los. Nesse cenário, é possível desativar a reprodução automática de intervalos de anúncio para informar ao SDK quando você está pronto para exibir um intervalo de anúncio. Com essa configuração, depois que o SDK carrega um intervalo de anúncio, ele aciona um evento AD_BREAK_READY. Quando o player estiver pronto para o início do intervalo de anúncio, chame 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();
}

Testar

Confira abaixo uma implementação em funcionamento.

O problema de procurar

Se você usar regras de anúncios, poderá ter problemas com a busca de clicar e arrastar. Especificamente, depois que um usuário clica e arrasta para procurar o vídeo em vários conjuntos intermediários, é possível que dois ou mais deles sejam reproduzidos um após o outro antes do conteúdo ser retomado. Isso é causado pela atualização do tempo de reprodução do vídeo enquanto o usuário está buscando. Se o SDK pesquisa o horário atual enquanto o usuário busca um anúncio, ele pode pensar que o anúncio precisa ser reproduzido. Quando o conteúdo é retomado, ele exibe o anúncio e, em seguida, o anúncio mais recente desde a busca. Para uma representação visual desse problema, consulte o diagrama abaixo:

A maneira simples de resolver isso é economizar o horário atual em que o usuário começa a procurar e informar esse horário quando o SDK solicitar até que o usuário retome a reprodução normal. Para uma representação visual dessa solução, consulte o diagrama abaixo:

Com essa solução, você pula corretamente o anúncio intermediário de 0:10 e só reproduz o anúncio intermediário de 0:20. Isso é feito usando um rastreador de marcador personalizado, conforme mostrado abaixo. O código abaixo contém modificações (mostradas em negrito) de ads.js no exemplo de HTML5 avançado disponível na nossa página de download.

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 conhecidos com o Safari para dispositivos móveis

Esse método deve funcionar em todas as plataformas, exceto no Safari para dispositivos móveis. No Safari para dispositivos móveis, a propriedade de busca da tag de vídeo não foi implementada corretamente (sempre retorna "false"). Para contornar isso, você precisa fazer sua própria verificação para ver se o usuário está procurando no vídeo. Veja a seguir o exemplo de código para esse método. Novamente, as linhas em negrito abaixo são modificações no 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_);
};

Com essas mudanças, o SDK agora está usando a propriedade currentTime do seu objeto Ads para determinar quando exibir os intervalos de anúncio, não a propriedade currentTime do player de vídeo do conteúdo.