Mausklicks erfassen

Wenn Sie das IMA SDK verwenden, sind zwei separate Videoplayer verfügbar, Video- und Anzeigenplayer. Das SDK verwaltet die Überlagerung der Anzeige automatisch statt dem Content-Videoplayer. Das Hinzufügen von Ereignis-Listenern zum direkt im Videoplayer funktioniert. Eine Behelfslösung besteht darin, die Anzeige ein- und auszublenden. Container. Dies kann jedoch die SDK-Funktionalität beeinträchtigen. Eine bessere Lösung besteht darin, Fassen Sie beide Player in einem übergeordneten div zusammen und fügen Sie diesem Ereignis-Listener hinzu. In diesem Leitfaden erfahren Sie, wie das geht.

Vorbereitung

• HTML5-Videoplayer mit integriertem IMA HTML5 SDK Falls Sie noch keines haben, lesen Sie den Startleitfaden.

HTML ändern

Zunächst müssen Sie Ihren HTML-Code ändern, um ein div hinzuzufügen, das beide den Anzeigen-Player und den Content-Videoplayer. Im Startleitfaden ist dies bereits wurde für dich von mainContainer bearbeitet:

...
<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
    </video>
  </div>

  <div id="adContainer"></div>
</div>
...

Event-Listener zum JavaScript hinzufügen

Fügen Sie als Nächstes Ereignis-Listener zum JavaScript-Code hinzu, um beispielsweise wenn der Nutzer auf das Video klickt. Beispiel in ads.js:

...
function init() {
  videoContent = document.getElementById('contentElement');
  mainContainer = document.getElementById('mainContainer');
  mainContainer.addEventListener('click', function() { alert('I was clicked!');});
  ...
}
...

Fertig! Wenn du auf das Video klickst, wird ein Pop-up-Fenster angezeigt, ob eine Anzeige wiedergegeben wird und dennoch Klicks auf Anzeigen möglich sind.

Jetzt ausprobieren

Unten sehen Sie eine funktionierende Implementierung.