Theo dõi lượt nhấp chuột

Khi sử dụng SDK IMA, có hai trình phát video riêng biệt là nội dung của bạn trình phát video và trình phát quảng cáo. SDK tự động quản lý việc phủ quảng cáo trình phát trên trình phát video nội dung. Do đó, việc thêm trình nghe sự kiện vào trình phát video không hoạt động. Một giải pháp tạm thời là hiện và ẩn quảng cáo nhưng điều này có thể ảnh hưởng đến chức năng của SDK. Một giải pháp hay hơn là gói cả hai trình phát trong một div mẹ và đính kèm trình nghe sự kiện vào đó. Hướng dẫn này sẽ chỉ cho bạn cách thực hiện.

Điều kiện tiên quyết

Sửa đổi HTML của bạn

Trước tiên, bạn cần thay đổi HTML để thêm div gói cả hai trình phát quảng cáo và trình phát video của nội dung. Trong Hướng dẫn bắt đầu sử dụng, bước này đã đã làm cho bạn với 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>
...

Thêm trình nghe sự kiện vào JavaScript

Tiếp theo, hãy thêm trình nghe sự kiện vào mã JavaScript của bạn, chẳng hạn như để phát hiện khi người dùng nhấp vào video. Ví dụ: trong ads.js: 

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

Vậy là xong! Bạn có thể nhấp vào video và thấy cửa sổ bật lên xuất hiện bất kể quảng cáo có đang phát mà vẫn có lượt nhấp vào quảng cáo hoạt động hay không.

Dùng thử

Bạn có thể xem cách triển khai hiệu quả ở bên dưới.