Das IMA HTML5 SDK unterstützt vollständig automatisierte Anzeigenplaylists. Diese Funktion fügt Werbeunterbrechungen in den Content ein, wie unter Google Ad Manager beim Trafficking Ihrer Anzeigen. Außerdem wird der Code des Videoplayers stark vereinfacht. die zur Unterstützung von Werbeunterbrechungen wie Pre-Rolls, Mid-Rolls und Post-Rolls erforderlich sind.
- Beim Erstellen der
AdsManager
wird eincontentPlayback
wird mit dem getAdsManager-Objekt übergeben. aufrufen. Dieses Objekt muss haben eincurrentTime
-Attribut, das den aktuellen Abspielkopf zurückgibt. die Position des Videos. Wenn Sie ein HTML5-video
-Element für Content anzuzeigen, können Sie dieses Element einfach an das SDK übergeben. Dieses Objekt wird der Fortschritt der Content-Wiedergabe erfasst, damit Werbeunterbrechungen automatisch zu den in Ad Manager angegebenen Zeiten eingefügt werden. Außerdem müssen die SDK wissen, dass es den Inhaltsstatus in Ihrem Namen verarbeiten soll.var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // See API reference for contentPlayback.
- Damit Post-Roll-Anzeigen wiedergegeben werden, musst du dem SDK mitteilen,
abgeschlossen ist. Dies ist etwas schwierig, da das SDK in einigen Fällen Ihr Video verwendet.
zum Abspielen von Anzeigen. Das SDK
muss nur darüber informiert werden,
erst am Ende des Contents und nicht am Ende einer Anzeige. Dazu können Sie die
Code unten:
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); ... }
- Das
CONTENT_PAUSE_REQUESTED
undCONTENT_RESUME_REQUESTED
-Ereignisse werden verwendet, um den Content bei der Wiedergabe von Werbeunterbrechungen zu pausieren und fortzusetzen. - Wenn Ihr Videoplayer Drag-to-Seek unterstützt und die aktuelle Zeiteigenschaft
wird der Videoplayer aktualisiert, während der Nutzer zieht, kann das SDK nicht zwischen
zwischen Inhalten, die normal weiterlaufen, und einem Nutzer, der die Inhalte durchsucht.
Du musst ein benutzerdefiniertes contentWiedergabe-Objekt als Parameter für
getAdsManager
verwenden. Ein Beispiel für diesen Anwendungsfall finden Sie in diesem Blogartikel.
Hinweis:Wenn der Inhalt abgespielt wurde oder
Der Nutzer hat die Wiedergabe gestoppt. Rufen Sie AdsLoader.contentComplete auf.
um dem SDK zu signalisieren, dass der Inhalt fertig ist. Das SDK gibt dann
die Post-Roll-Werbeunterbrechung, falls eine geplant wurde Das ALL_ADS_COMPLETED
wird ausgelöst, wenn ALLE Werbeunterbrechungen wiedergegeben wurden. Beachten Sie außerdem,
dass das Inhalts-Tracking beginnt, wenn init()
aufgerufen wird. Sie sollten
immer init()
aufrufen, bevor Inhalte wiedergegeben werden.
Automatische Wiedergabe von Werbeunterbrechungen deaktivieren
Unter Umständen müssen Sie verhindern, dass das SDK Werbeunterbrechungen wiedergibt, bis
sind Sie bereit für sie. In diesem Fall kannst du die automatische Wiedergabe von Werbeunterbrechungen deaktivieren.
. Damit
wird vom SDK nach dem Laden einer Werbeunterbrechung ein
AD_BREAK_READY
-Ereignis. Wenn der Player bereit für die Werbeunterbrechung ist,
können Sie adsManager.start() aufrufen:
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(); }
Jetzt ausprobieren
Unten sehen Sie eine funktionierende Implementierung.
<ph type="x-smartling-placeholder">Das Problem beim Suchen
Wenn Sie Anzeigenregeln verwenden, treten möglicherweise Probleme bei der Suche per Klick und Ziehen auf. Wenn ein Nutzer auf ein Video klickt und zieht, Mid-Roll-Pods eingeblendet werden, sehen sie möglicherweise, dass zwei oder mehr dieser Pods unmittelbar nacheinander wiedergegeben werden, wenn der Inhalt wieder aufgenommen wird. Der Grund dafür ist, dass die Zeit für den Abspielkopf des Videos aktualisiert wird, während der die der Nutzer sucht; Ob das SDK die aktuelle Zeit abfragt, während der Nutzer über eine Anzeige hinausgeht, denkt sie möglicherweise, dass diese Anzeige wiedergegeben werden sollte. Wenn der Inhalt wird diese Anzeige und dann die letzte seit der Suche wiedergegeben. Für eine visuelle Darstellung dieses Problems, siehe folgendes Diagramm:
![](https://developers.google.cn/static/interactive-media-ads/images/seeking_issue.jpg?authuser=9&hl=de)
Die einfache Lösung besteht darin, beim Start der App die aktuelle Zeit zu sparen. und melden diesen Zeitpunkt, wenn das SDK danach fragt, setzt die normale Wiedergabe fort. Eine visuelle Darstellung dieser Lösung finden Sie in der Diagramm unten:
![](https://developers.google.cn/static/interactive-media-ads/images/seeking_fix.jpg?authuser=9&hl=de)
Bei dieser Lösung überspringen Sie die Mid-Roll-Anzeige im Format 0:10 richtig und spielen nur die Mid-Roll-Anzeige im Format 0:20 ab.
Dazu wird ein benutzerdefinierter Abspielkopf-Tracker verwendet (siehe unten). Der folgende Code
enthält Änderungen (fett dargestellt) von ads.js
in der erweiterten HTML5-Version
in unserer
Downloadseite.
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_); };
Bekannte Probleme bei Safari für Mobilgeräte
Diese Methode sollte mit Ausnahme der mobilen Safari auf allen Plattformen funktionieren. Auf Mobilgeräten Safari die Sucheigenschaft des Video-Tags nicht ordnungsgemäß implementiert wurde (sie gibt immer false zurück). Um das zu umgehen, musst du selbst ob der Nutzer das Video durchsucht. Der Beispielcode für diese Methode folgt. Auch hier handelt es sich um Änderungen am vorhandenen Code, die unten fett hervorgehoben sind.
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_); };
Mit diesen Änderungen verwendet das SDK jetzt das Attribut „currentTime“ deines Ads
.
Objekt, um zu bestimmen, wann Werbeunterbrechungen wiedergegeben werden sollen, und nicht die Eigenschaft currentTime
des
Content-Videoplayer.