Regole per gli annunci

L'SDK IMA per HTML5 supporta le playlist di annunci completamente automatizzate. Questa funzionalità inserisce interruzioni pubblicitarie nei contenuti come specificato Google Ad Manager quando gestisci il traffico degli annunci. Inoltre, semplifica notevolmente il codice del video player necessarie per supportare le interruzioni pubblicitarie, tra cui pre-roll, mid-roll e post-roll.

  • Durante la creazione di AdsManager, un contentPlayback viene passato tramite il comando getAdsManager chiamata. Questo oggetto deve avere una proprietà currentTime che restituisce la testina di riproduzione corrente posizione del video. Se utilizzi un elemento video HTML5 per visualizzare i tuoi contenuti, puoi passare quell'elemento all'SDK. Questo oggetto viene utilizzato per monitorare l'avanzamento della riproduzione dei contenuti in modo che le interruzioni pubblicitarie inserite automaticamente nei momenti specificati in Ad Manager. Devi inoltre consentire alla L'SDK sappia che vuoi che gestisca lo stato dei contenuti per tuo conto. 
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
  • Per assicurarti che vengano riprodotti i post-roll, devi comunicare all'SDK quando i tuoi contenuti l'operazione. Questo è un po' complicato perché in alcuni casi l'SDK utilizza il tuo video di riprodurre gli annunci, quindi devi assicurarti di comunicare all'SDK solo alla fine dei contenuti e non alla fine di un annuncio. Puoi farlo utilizzando seguente: 
    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);
  ...
}
  • CONTENT_PAUSE_REQUESTED e CONTENT_RESUME_REQUESTED vengono utilizzati per mettere in pausa e riprendere la riproduzione dei contenuti durante la riproduzione delle interruzioni pubblicitarie.
  • Se il video player supporta la funzionalità di trascinamento e la proprietà temporale corrente di il video player si aggiorna mentre l'utente sta trascinando, l'SDK non riesce tra i contenuti che procedono normalmente e un utente che li cerca. Devi utilizzare un oggetto contentPlayback personalizzato come parametro per getAdsManager. Per un esempio di questo caso d'uso, consulta The Problemi con la ricerca.

Nota:al termine della riproduzione dei contenuti o Se l'utente ha interrotto la riproduzione, assicurati di chiamare AdsLoader.contentComplete per segnalare all'SDK che i contenuti sono stati completati. L'SDK riproduce quindi l'interruzione pubblicitaria post-roll, se ne è stata pianificata una. ALL_ADS_COMPLETED viene generato quando sono state riprodotte TUTTE le interruzioni pubblicitarie. Inoltre, tieni presente il monitoraggio dei contenuti inizia quando viene chiamato init() e dovresti chiama sempre init() prima di riprodurre i contenuti.

Disattivazione della riproduzione automatica delle interruzioni pubblicitarie

In alcuni casi potresti voler impedire all'SDK di riprodurre le interruzioni pubblicitarie fino a quando sei pronto. In questo caso, puoi disattivare la riproduzione automatica delle interruzioni pubblicitarie. in favore di far sapere all'SDK quando è tutto pronto per un'interruzione pubblicitaria da riprodurre. Con questo configurazione, dopo che l'SDK ha caricato un'interruzione pubblicitaria, attiva un AD_BREAK_READY evento. Quando il player è pronto per l'inizio dell'interruzione pubblicitaria, puoi chiamare 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();
}

Prova

Di seguito puoi vedere un'implementazione funzionante.

Il problema della ricerca

Se utilizzi le regole per gli annunci, potresti incorrere in un problema di ricerca tramite clic e trascinamento. In particolare, dopo che un utente fa clic e trascina per scorrere il video per i pod mid-roll, possono vedere che 2 o più pod vengono riprodotti in sequenza prima i contenuti riprendono. Ciò è causato dall'aggiornamento del tempo della testina di riproduzione del video mentre che l'utente sta cercando; se l'SDK esegue il polling per il momento corrente mentre l'utente cerca oltre un annuncio, potrebbe pensare che l'annuncio debba essere riprodotto. Quando i contenuti riprende, l'annuncio viene riprodotto e poi l'annuncio più recente dalla ricerca. Per un rappresentazione visiva di questo problema, vedi il diagramma seguente:

Il modo semplice per risolvere questo problema è salvare l'ora attuale quando l'utente inizia ricerca e segnala il momento in cui l'SDK richiede la richiesta consente di riprendere la riproduzione normale. Per una rappresentazione visiva di questa soluzione, consulta diagramma seguente:

Con questa soluzione, salti correttamente il mid-roll 0:10 e riproduci solo il mid-roll 0:20. Per eseguire questa operazione, usa un tracker delle testine di riproduzione personalizzato, come mostrato di seguito. Il codice riportato di seguito contiene modifiche (mostrate in grassetto) di ads.js nell'HTML5 avanzato campione disponibile nel nostro pagina di 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_);
};

Problemi noti relativi a Safari per dispositivi mobili

Questo metodo dovrebbe funzionare su tutte le plaform, ad eccezione di Safari sui dispositivi mobili. Su dispositivo mobile Safari, la proprietà di ricerca del tag video non è implementata correttamente (il tag restituisce sempre false). Per aggirare questa limitazione, devi effettuare un tuo controllo per vedere se l'utente sta cercando attraverso il video. Il codice campione per questo metodo . Anche in questo caso, le righe in grassetto sottostanti sono modifiche al codice esistente.

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 queste modifiche, l'SDK utilizza la proprietà currentTime di Ads per determinare quando riprodurre le interruzioni pubblicitarie, non la proprietà currentTime video player di contenuti.