L'SDK IMA HTML5 supporta le playlist di annunci completamente automatiche. Questa funzionalità inserisce interruzioni pubblicitarie nei contenuti come specificato in Google Ad Manager durante la gestione del traffico degli annunci. Inoltre, semplifica notevolmente il codice del video player necessario per supportare le interruzioni pubblicitarie, inclusi pre-roll, mid-roll e post-roll.
- Quando viene creato
AdsManager, viene passato un oggettocontentPlaybacktramite la chiamata getAdsManager. Questo oggetto deve avere una proprietàcurrentTimeche restituisce la posizione corrente del cursore di riproduzione del video. Se utilizzi un elementovideoHTML5 per visualizzare i tuoi contenuti, puoi semplicemente trasmetterlo all'SDK. Questo oggetto viene utilizzato per monitorare l'avanzamento della riproduzione dei contenuti in modo che le interruzioni pubblicitarie vengano inserite automaticamente nei momenti specificati in Ad Manager. Devi anche comunicare all'SDK 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 i post-roll vengano riprodotti, devi comunicare all'SDK quando i contenuti sono terminati. Questo è un po' complicato, perché in alcuni casi l'SDK utilizza il tuo media player per riprodurre gli annunci, quindi devi assicurarti di comunicare all'SDK solo quando i contenuti sono terminati e non quando termina un annuncio. Puoi farlo utilizzando il seguente codice:
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); ... }
- Gli eventi
CONTENT_PAUSE_REQUESTEDeCONTENT_RESUME_REQUESTEDvengono utilizzati per mettere in pausa e riprendere i contenuti quando vengono riprodotte le interruzioni pubblicitarie. - Se il video player supporta la funzionalità di scorrimento trascinando e la proprietà dell'ora corrente del video player si aggiorna mentre l'utente esegue il trascinamento, l'SDK non è in grado di distinguere tra il normale avanzamento dei contenuti e la ricerca all'interno dei contenuti da parte dell'utente. Devi utilizzare un oggetto contentPlayback personalizzato come parametro per
getAdsManager. Per un esempio di questo caso d'uso, consulta The Trouble with Seeking.
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. L'evento ALL_ADS_COMPLETED viene attivato quando sono state riprodotte TUTTE le interruzioni pubblicitarie. Inoltre, tieni presente che il monitoraggio dei contenuti inizia quando viene chiamata init() e devi chiamare sempre init() prima di riprodurre i contenuti.
Disattivare la riproduzione automatica delle interruzioni pubblicitarie
In alcuni casi, potresti voler impedire all'SDK di riprodurre le interruzioni pubblicitarie finché non è tutto pronto. In questo caso, puoi disattivare la riproduzione automatica delle interruzioni pubblicitarie in favore di un avviso all'SDK quando è il momento di riprodurre un'interruzione pubblicitaria. Con questa configurazione, dopo che l'SDK ha caricato un'interruzione pubblicitaria, viene attivato un evento AD_BREAK_READY. 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
Per un'implementazione funzionante, consulta il codice seguente.
I problemi di ricerca
Se utilizzi le regole per gli annunci, potresti riscontrare un problema con la ricerca tramite clic e trascinamento. Nello specifico, dopo che un utente fa clic e trascina per scorrere il video oltre più annunci midroll, potrebbe vedere 2 o più di questi annunci riprodotti uno dopo l'altro prima che i contenuti riprendino. Questo accade perché l'ora del cursore di riproduzione del video viene aggiornata mentre l'utente esegue la ricerca. Se l'SDK esegue il polling per l'ora corrente mentre l'utente supera un annuncio, potrebbe pensare che l'annuncio debba essere riprodotto. Quando i contenuti riprendono, viene riprodotto l'annuncio e poi l'annuncio più recente dall'inizio della ricerca. Per una representatione visiva di questo problema, consulta il seguente diagramma:
Salvare l'ora corrente quando l'utente avvia la ricerca e segnalarla quando l'SDK lo richiede fino a quando l'utente non riprende la riproduzione normale. Per una rappresentazione visiva di questa soluzione, consulta il seguente diagramma:
Con questa soluzione, puoi saltare correttamente l'annuncio mid-roll di 10 secondi e riprodurre solo quello di 20 secondi. Per farlo, utilizza un tracker del cursore di riproduzione personalizzato nel seguente snippet di codice. Questo codice contiene le modifiche (in grassetto) di ads.js nell'esempio HTML5 avanzato disponibile nella nostra 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 con Safari mobile
Questo metodo dovrebbe funzionare su ogni piattaforma, ad eccezione di Safari mobile. Su Safari per dispositivi mobili, la proprietà di ricerca del tag video non è implementata correttamente (restituisce sempre false). Per ovviare a questo problema, devi eseguire un controllo per verificare se l'utente sta cercando nel video. Di seguito è riportato il codice di esempio per questo metodo. Ancora una volta, le linee in grassetto 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 ora utilizza la proprietà currentTime dell'oggetto Ads per determinare quando riprodurre le interruzioni pubblicitarie, non la proprietà currentTime del video player dei contenuti.