Diese Seite wurde von der Cloud Translation API übersetzt.

Anzeigenregeln

Das IMA HTML5 SDK unterstützt vollständig automatisierte Anzeigen-Playlists. Mit dieser Funktion werden beim Trafficking Ihrer Anzeigen Werbeunterbrechungen wie in Google Ad Manager angegeben in den Content eingefügt. Außerdem wird der Code des Videoplayers, der für Werbeunterbrechungen erforderlich ist, einschließlich Pre-Rolls, Mid-Rolls und Post-Rolls, erheblich vereinfacht.

Beim Erstellen von AdsManager wird ein contentPlayback-Objekt über den Aufruf getAdsManager übergeben. Dieses Objekt muss eine currentTime-Eigenschaft haben, die die aktuelle Abspielkopfposition des Videos zurückgibt. Wenn du ein HTML5-video-Element zum Anzeigen deiner Inhalte verwendest, kannst du dieses Element einfach an das SDK übergeben. Mit diesem Objekt wird der Fortschritt der Contentwiedergabe erfasst, sodass Werbeunterbrechungen zu den in Ad Manager angegebenen Zeiten automatisch eingefügt werden. Außerdem musst du dem SDK mitteilen, dass es den Inhaltsstatus in deinem Namen verarbeiten soll.
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
```

Damit Post-Rolls abgespielt werden, musst du das SDK informieren, wenn deine Inhalte beendet sind. Das ist etwas knifflig, da das SDK in einigen Fällen Ihren Videoplayer zur Wiedergabe von Anzeigen verwendet. Sie müssen dem SDK also nur mitteilen, wann der Content fertig ist und nicht, 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);
  ...
}

Die Ereignisse CONTENT_PAUSE_REQUESTED und CONTENT_RESUME_REQUESTED werden zum Pausieren und Fortsetzen des Inhalts verwendet, wenn Werbeunterbrechungen abgespielt werden.
Wenn dein Videoplayer das Ziehen zum Suchen unterstützt und die aktuelle Eigenschaft des Videoplayers aktualisiert wird, während der Nutzer zieht, kann das SDK nicht unterscheiden, ob der Inhalt normal abgespielt wird und ein Nutzer durch den Inhalt sucht. Sie müssen ein benutzerdefiniertes contentPlayback-Objekt als Parameter für getAdsManager verwenden. Ein Beispiel für diesen Anwendungsfall finden Sie unter The Trouble with Seeking.

Hinweis:Wenn die Wiedergabe des Inhalts abgeschlossen ist oder der Nutzer die Wiedergabe beendet hat, muss AdsLoader.contentComplete aufgerufen werden, um dem SDK zu signalisieren, dass der Inhalt fertig ist. 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. Beachten Sie außerdem, dass das Inhalts-Tracking mit dem Aufruf von init() beginnt und Sie vor der Wiedergabe von Inhalten immer init() aufrufen sollten.

Automatische Wiedergabe von Werbeunterbrechungen deaktivieren

Unter bestimmten Umständen kann es sinnvoll sein, die Wiedergabe von Werbeunterbrechungen über das SDK zu verhindern, bis du dazu bereit bist. In diesem Szenario kannst du die automatische Wiedergabe von Werbeunterbrechungen deaktivieren und das SDK darüber informieren, wenn du für eine Werbeunterbrechung bereit bist. Bei dieser Konfiguration wird ein AD_BREAK_READY-Ereignis ausgelöst, sobald das SDK eine Werbeunterbrechung geladen hat. Wenn der Player bereit ist, mit der Werbeunterbrechung zu beginnen, 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();
}

Ausprobieren

Unten sehen Sie eine funktionierende Implementierung.

Die Schwierigkeit beim Suchen

Wenn Sie Anzeigenregeln verwenden, können Probleme bei der Suche durch Klicken und Ziehen auftreten. Insbesondere wenn ein Nutzer klickt und zieht, um ein Video an mehreren Mid-Roll-Pods zu durchsuchen, kann es sein, dass zwei oder mehr dieser Pods nacheinander wiedergegeben werden, bevor der Inhalt fortgesetzt wird. Dies wird dadurch verursacht, dass die Abspielkopfzeit des Videos während der Suche des Nutzers aktualisiert wird. Wenn das SDK die aktuelle Zeit abfragt, während der Nutzer an einer Anzeige vorbeischaut, könnte es sein, dass diese Anzeige wiedergegeben werden sollte. Wenn der Content fortgesetzt wird, werden diese Anzeige und dann die letzte Anzeige seit der Suche wiedergegeben. Eine visuelle Darstellung dieses Problems finden Sie im folgenden Diagramm:

Die einfache Möglichkeit zur Behebung dieses Problems besteht darin, die aktuelle Zeit einzusparen, zu der der Nutzer mit der Suche beginnt, und diese Zeit zu melden, wenn das SDK danach fragt, bis der Nutzer die normale Wiedergabe fortsetzt. Eine visuelle Darstellung dieser Lösung finden Sie im folgenden Diagramm:

Mit dieser Lösung überspringen Sie die Mid-Roll-Anzeige von 0:10 und spielen nur die Mid-Roll von 0:20 ab. Dazu wird ein benutzerdefinierter Abspielkopf-Tracker verwendet, wie unten dargestellt. Der folgende 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 in Safari für Mobilgeräte

Diese Methode sollte bei allen Plattformen außer Safari für Mobilgeräte funktionieren. In Safari auf Mobilgeräten ist die Suche des Video-Tags nicht richtig implementiert. Es wird immer „false“ zurückgegeben. Um dies zu umgehen, müssen Sie selbst überprüfen, ob der Nutzer das Video durchsucht. Der Beispielcode für diese Methode ist unten dargestellt. Auch hier sind die unten fett formatierten Zeilen Änderungen an vorhandenem 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_);
};

Mit diesen Änderungen verwendet das SDK jetzt die Property „currentTime“ des Ads-Objekts, um zu bestimmen, wann Werbeunterbrechungen abgespielt werden sollen, und nicht die Eigenschaft currentTime des Contentvideoplayers.