Anzeigenplaylists automatisieren

Das IMA HTML5 SDK unterstützt vollständig automatisierte Anzeigenplaylists. Bei dieser Funktion werden Werbeunterbrechungen gemäß den in Google Ad Manager angegebenen Vorgaben in die Inhalte eingefügt, wenn du Anzeigen schaltest. Außerdem wird der Videoplayer-Code, der für die Unterstützung von Werbeunterbrechungen erforderlich ist, einschließlich Pre-Rolls, Mid-Rolls und Post-Rolls, stark vereinfacht.

• Beim Erstellen von AdsManager wird über den Aufruf getAdsManager ein contentPlayback-Objekt übergeben. Dieses Objekt muss eine currentTime-Property haben, die die aktuelle Position des Wiedergabe-Cursors des Videos zurückgibt. Wenn du ein HTML5-video-Element verwendest, um deine Inhalte anzuzeigen, kannst du dieses Element einfach an das SDK übergeben. Mit diesem Objekt wird der Fortschritt der Wiedergabe der Inhalte erfasst, damit Werbeunterbrechungen automatisch zu den in Ad Manager angegebenen Zeitpunkten eingefügt werden. Außerdem musst du dem SDK mitteilen, dass es den Inhaltsstatus in deinem Namen verwalten soll.

  var adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings); // See API reference for contentPlayback.

• Damit Post-Rolls wiedergegeben werden, musst du dem SDK mitteilen, wann deine Inhalte zu Ende sind. Das ist etwas schwierig, da in einigen Fällen das SDK deinen Videoplayer zum Abspielen von Anzeigen verwendet. Du musst also darauf achten, dem SDK nur mitzuteilen, wenn deine Inhalte zu Ende sind, nicht aber, wenn eine Anzeige zu Ende ist. Dazu können Sie den folgenden Code verwenden:

  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);
    ...
  }

• Mit den Ereignissen CONTENT_PAUSE_REQUESTED und CONTENT_RESUME_REQUESTED werden die Inhalte pausiert und fortgesetzt, wenn Werbeunterbrechungen wiedergegeben werden.
• Wenn dein Videoplayer das Ziehen zum Suchen unterstützt und die aktuelle Zeit des Videoplayers aktualisiert wird, während der Nutzer zieht, kann das SDK nicht zwischen normalem Vor- und Zurückspulen und dem Suchen durch den Inhalt unterscheiden. Du musst ein benutzerdefiniertes contentPlayback-Objekt als Parameter für getAdsManager verwenden. Ein Beispiel für diesen Anwendungsfall finden Sie unter Die Probleme mit der Suche.

Hinweis:Wenn die Wiedergabe der Inhalte beendet ist oder der Nutzer die Wiedergabe beendet hat, rufe AdsLoader.contentComplete auf, um dem SDK zu signalisieren, dass die Inhalte fertig sind. Das SDK spielt dann die Post-Roll-Werbeunterbrechung ab, sofern eine geplant wurde. Das Ereignis ALL_ADS_COMPLETED wird ausgelöst, wenn ALLE Werbeunterbrechungen wiedergegeben wurden. Außerdem beginnt das Inhalts-Tracking, wenn init() aufgerufen wird. Du solltest init() immer vor der Wiedergabe von Inhalten aufrufen.

Automatische Wiedergabe von Werbeunterbrechungen deaktivieren

Unter bestimmten Umständen möchtest du vielleicht verhindern, dass das SDK Werbeunterbrechungen wiedergibt, bis du dazu bereit bist. In diesem Fall kannst du die automatische Wiedergabe von Werbeunterbrechungen deaktivieren und dem SDK mitteilen, wann eine Werbeunterbrechung wiedergegeben werden soll. Bei dieser Konfiguration wird ein AD_BREAK_READY-Ereignis ausgelöst, sobald das SDK eine Werbeunterbrechung geladen hat. Wenn der Player bereit ist, dass die Werbeunterbrechung beginnt, kannst du 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

Im folgenden Code finden Sie eine funktionierende Implementierung.

Die Probleme mit der Suche

Wenn Sie Anzeigenregeln verwenden, kann es beim Suchen per Ziehen und Klicken zu Problemen kommen. Wenn ein Nutzer mehrere Mid-Roll-Pods überspringt, indem er sie anklickt und bei gedrückter Maustaste zieht, werden möglicherweise zwei oder mehr dieser Pods hintereinander abgespielt, bevor der Videocontent fortgesetzt wird. Das liegt daran, dass die Zeit des Video-Playheads aktualisiert wird, während der Nutzer vorspult. Wenn das SDK zufällig nach der aktuellen Zeit fragt, während der Nutzer eine Anzeige überspringt, wird möglicherweise angenommen, dass die Anzeige wiedergegeben werden soll. Wenn die Wiedergabe fortgesetzt wird, wird diese Anzeige und dann die neueste Anzeige seit dem Suchvorgang abgespielt. Eine visuelle Darstellung dieses Problems finden Sie im folgenden Diagramm:

Speichere die aktuelle Zeit, wenn der Nutzer mit der Suche beginnt, und melde diese Zeit, wenn das SDK danach fragt, bis der Nutzer die normale Wiedergabe fortsetzt. Eine visuelle Darstellung dieser Lösung finden Sie im folgenden Diagramm:

Bei dieser Lösung wird die Mid-Roll-Anzeige von 0:10 min korrekt übersprungen und nur die Mid-Roll-Anzeige von 0:20 min wiedergegeben. Dazu wird im folgenden Code-Snippet ein benutzerdefinierter Wiedergabestandort-Tracker verwendet. Dieser Code enthält Änderungen (fett dargestellt) an ads.js im erweiterten HTML5-Beispiel, das auf unserer Downloadseite verfügbar ist.

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 mit Safari auf Mobilgeräten

Diese Methode sollte auf allen Plattformen funktionieren, mit Ausnahme von Safari auf Mobilgeräten. In der mobilen Safari-Version ist die Sucheigenschaft des Video-Tags nicht richtig implementiert (es gibt immer den Wert „falsch“ zurück). Du musst also selbst prüfen, ob der Nutzer sich im Video vorwärts oder rückwärts bewegt. Im Folgenden finden Sie den Beispielcode für diese Methode. Die fett formatierten Zeilen sind wieder Änderungen am vorhandenen Code.

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_);
};

Durch diese Änderungen verwendet das SDK jetzt das Attribut „currentTime“ des Ads-Objekts, um zu bestimmen, wann Werbeunterbrechungen wiedergegeben werden sollen, und nicht das Attribut „currentTime“ des Videoplayers.