Melacak klik mouse

Saat menggunakan IMA SDK, ada dua pemutar video terpisah, yaitu pemutar video konten dan pemutar iklan. SDK secara otomatis mengelola overlay pemutar iklan di atas pemutar video konten. Akibatnya, menambahkan pemroses peristiwa ke pemutar video secara langsung tidak akan berfungsi. Salah satu solusinya adalah menampilkan dan menyembunyikan penampung iklan, tetapi hal ini dapat mengganggu fungsi SDK. Solusi yang lebih baik adalah menggabungkan kedua pemain dalam div induk dan melampirkan pemroses peristiwa ke sana. Panduan ini menunjukkan caranya.

Prasyarat

• Pemutar video HTML5 dengan IMA HTML5 SDK yang terintegrasi. Jika Anda belum memilikinya, lihat Menyiapkan IMA SDK.

Memodifikasi HTML

Pertama, Anda perlu mengubah HTML untuk menambahkan div yang menggabungkan pemutar iklan dan pemutar video konten. Di bagian *Menyiapkan IMA SDK*, hal ini sudah dilakukan untuk Anda dengan 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>
...

Menambahkan pemroses peristiwa ke JavaScript

Selanjutnya, tambahkan pemroses peristiwa ke kode JavaScript Anda, seperti untuk mendeteksi pengguna yang mengklik video. Misalnya, dalam ads.js:

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

Selesai. Anda dapat mengklik video dan melihat pop-up muncul, terlepas dari apakah iklan sedang diputar atau tidak, dan tetap dapat melakukan klik-tayang iklan.

Cobalah

Anda dapat melihat penerapan yang berfungsi di bawah.