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à 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 đó, bạn không thể thêm trực tiếp trình nghe sự kiện vào trình phát video. Một giải pháp là hiển thị và ẩn vùng chứa quảng cáo. Tuy nhiên, việc 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 phần tử đó. Hướng dẫn này sẽ trình bày 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 một div gói cả trình phát quảng cáo và trình phát video nội dung. Trong hướng dẫn Bắt đầu sử dụng, bạn có thể dùng mainContainer để thực hiện các bước này:

...
<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 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à vẫn có thao tác nhấp vào quảng cáo.

Dùng thử

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