Melacak klik mouse

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

Prasyarat

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

Mengubah HTML

Pertama, Anda harus mengubah HTML untuk menambahkan div yang menggabungkan keduanya pemutar iklan dan pemutar video konten. Dalam panduan Memulai, 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

Berikutnya, tambahkan pemroses peristiwa ke kode JavaScript, misalnya untuk mendeteksi pengguna 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 {i>pop-up<i} muncul, terlepas dari apakah iklan diputar dan masih memiliki klik-tayang iklan yang berfungsi.

Cobalah

Anda dapat melihat implementasi yang berfungsi di bawah.