追蹤滑鼠點擊

使用 IMA SDK 時，會有兩個獨立的影片播放器，分別是內容影片播放器和廣告播放器。SDK 會自動管理廣告播放器重疊在內容影片播放器上方。因此，直接將事件監聽器新增至影片播放器無法運作。一個解決方法是顯示和隱藏廣告容器，但這可能會干擾 SDK 功能。更好的做法是將兩個播放器包裝在父項 div 中，並將事件監聽器附加至該項。本指南將說明如何操作。

必要條件

  • 已整合 IMA HTML5 SDK 的 HTML5 影片播放器。如果沒有，請參閱「設定 IMA SDK」一文。

修改 HTML

首先，您需要變更 HTML 並新增 div，將廣告播放器和內容影片播放器包裝起來。在「設定 IMA SDK」中，您已透過 mainContainer 完成這項操作：

...
<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>
...

在 JavaScript 中新增事件監聽器

接著，請在 JavaScript 程式碼中加入事件監聽器，例如用於偵測使用者點選影片。例如，在 ads.js 中：

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

大功告成！無論廣告是否正在播放，只要廣告點閱率仍在運作，點選影片即可看到彈出式視窗。

立即試用

您可以在下方查看可運作的實作方式。