L'SDK IMA per HTML5 supporta playlist di annunci completamente automatizzate. Questa funzionalità consente di inserire interruzioni pubblicitarie all'interno dei 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.
- Durante la creazione di
AdsManager
, un oggettocontentPlayback
viene trasmesso tramite la chiamata getAdsManager. Questo oggetto deve avere una proprietàcurrentTime
che restituisce la posizione corrente della testina di riproduzione del video. Se utilizzi un elementovideo
HTML5 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 negli orari specificati in Ad Manager. Devi inoltre 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 la fine dei contenuti. La procedura è un po' complessa: in alcuni casi, infatti, l'SDK utilizza il video player per riprodurre gli annunci, pertanto devi assicurarti di comunicare all'SDK solo la fine dei contenuti e non la fine dell'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_REQUESTED
eCONTENT_RESUME_REQUESTED
vengono utilizzati per mettere in pausa e riprendere i contenuti quando vengono riprodotte le interruzioni pubblicitarie. - Se il tuo video player supporta il trascinamento e la proprietà temporale corrente del video player viene aggiornata mentre l'utente esegue il trascinamento, l'SDK non è in grado di distinguere tra i contenuti che avanzano normalmente e quelli che li cercano.
Devi utilizzare un oggetto contentPlayback personalizzato come parametro per
getAdsManager
. Per un esempio di questo caso d'uso, consulta Problemi con la ricerca.
Nota: quando la riproduzione dei contenuti ha terminato o l'utente ha interrotto la riproduzione, assicurati di chiamare AdsLoader.contentComplete per segnalare all'SDK che l'operazione è terminata. L'SDK poi riproduce
l'interruzione pubblicitaria post-roll, se ne è stata pianificata una. L'evento ALL_ADS_COMPLETED
viene sollevato quando sono state riprodotte TUTTE le interruzioni pubblicitarie. Inoltre, tieni presente che il monitoraggio dei contenuti inizia quando viene chiamato init()
e che dovresti sempre chiamare 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
per consentire all'SDK di sapere quando è tutto pronto per un'interruzione pubblicitaria. Con questa configurazione, dopo aver caricato un'interruzione pubblicitaria, l'SDK attiva 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
Di seguito puoi vedere un'implementazione funzionante.
Il problema di cercare
Se utilizzi le regole per gli annunci, potresti riscontrare problemi con la ricerca di clic e trascinamento. In particolare, dopo che un utente fa clic e trascina per cercare un video dopo più pod mid-roll, può vedere due o più di questi pod riprodotti uno dopo l'altro prima che i contenuti riprendano. Ciò è causato dall'aggiornamento del tempo di riproduzione del video durante la ricerca dell'utente; se l'SDK esegue il polling per l'ora corrente mentre l'utente cerca di superare un annuncio, potrebbe pensare che l'annuncio debba essere riprodotto. Quando il contenuto riprende, viene riprodotto l'annuncio e poi l'annuncio più recente dalla ricerca. Per una rappresentazione visiva del problema, consulta il diagramma seguente:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_issue.jpg?authuser=3&hl=it)
Il modo più semplice per risolvere il problema è salvare il tempo attuale in cui l'utente inizia a cercare e indicare quel momento in cui l'SDK lo richiede finché l'utente non riprende la riproduzione normale. Per una rappresentazione visiva di questa soluzione, vedi lo schema riportato di seguito:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_fix.jpg?authuser=3&hl=it)
Con questa soluzione, puoi saltare correttamente il mid-roll 0:10 e riprodurre solo il mid-roll 0:20.
A tale scopo, utilizza un tracker personalizzato con la testina di riproduzione, come mostrato di seguito. Il codice riportato di seguito contiene modifiche (mostrate in grassetto) di ads.js
nell'esempio avanzato HTML5 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 di Safari per dispositivi mobili
Questo metodo dovrebbe funzionare su tutte le piattaforme, ad eccezione di Safari per dispositivi mobili. Su Safari per dispositivi mobili, la proprietà di ricerca del tag video non è implementata correttamente (restituisce sempre false). Per risolvere il problema, devi eseguire una verifica personale per vedere se l'utente sta cercando il video. Di seguito è riportato il codice campione per questo metodo. Anche in questo caso, le righe in grassetto riportate di seguito corrispondono a modifiche del 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 dell'oggetto Ads
per determinare quando riprodurre le interruzioni pubblicitarie, non la proprietà currentTime
del video player dei contenuti.