追蹤滑鼠點擊

使用 IMA SDK 時，有兩個不同的影片播放器：您的內容 影片播放器和廣告播放器。SDK 會自動管理重疊廣告 影片播放器上方。因此，將事件監聽器新增至 就無法直接播放。其中一種解決方法是顯示及隱藏廣告 但可能會幹擾 SDK 功能。更好的方法是 將兩個播放器納入父項 div，然後附加至該事件監聽器。 本指南將說明相關做法。

必要條件

• 已整合 IMA HTML5 SDK 的 HTML5 影片播放器。如果沒有，請參閱入門指南。

修改 HTML

首先，您必須變更 HTML，加入這兩種結尾的 div 廣告播放器和內容影片播放器中的廣告。在「入門指南」中 已完成 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!');});
  ...
}
...

大功告成！點進影片後 且廣告點閱程序是否正常運作。

立即試用

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