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

Khi sử dụng SDK IMA, sẽ có hai trình phát video riêng biệt, trình phát video nội dung và trình phát quảng cáo. SDK tự động quản lý việc phủ trình phát quảng cáo lê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 trực tiếp sẽ không hoạt động. Một giải pháp là hiển thị và ẩn vùng chứa quảng cáo, nhưng điều này có thể ảnh hưởng đến chức năng của SDK. Giải pháp tốt 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

  • Trình phát video HTML5 tích hợp SDK IMA HTML5. Nếu bạn chưa có, hãy xem bài viết Thiết lập SDK IMA.

Sửa đổi HTML

Trước tiên, bạn cần thay đổi HTML để thêm div bao bọc cả trình phát quảng cáo và trình phát video nội dung. Trong phần *Thiết lập SDK IMA*, bạn đã thực hiện việc này bằng 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, chẳng hạn như để phát hiện 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 hay không và lượt nhấp vào quảng cáo có hoạt động hay không.

Dùng thử

Bạn có thể xem cách triển khai đang hoạt động ở bên dưới.