Melacak klik mouse

Saat menggunakan IMA SDK, ada dua pemutar video terpisah, yaitu pemutar video konten dan pemutar iklan. SDK secara otomatis mengelola penempatan 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 pemutar di div induk dan menambahkan pemroses peristiwa ke sana. Panduan ini akan menunjukkan caranya.

Prasyarat

• Pemutar video HTML5 dengan IMA HTML5 SDK yang terintegrasi. Jika Anda tidak memilikinya, lihat panduan Memulai.

Mengubah HTML

Pertama, Anda harus mengubah HTML untuk menambahkan div yang menggabungkan pemutar iklan dan pemutar video konten. Dalam panduan Memulai, mainContainer sudah dilakukan untuk Anda:

...
<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 Anda

Selanjutnya, tambahkan pemroses peristiwa ke kode JavaScript Anda, misalnya 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 diputar dan masih memiliki fungsi klik-tayang iklan.

Cobalah

Anda dapat melihat implementasi yang berfungsi di bawah.