กําลังติดตามการคลิกเมาส์

เมื่อใช้ IMA SDK จะมีโปรแกรมเล่นวิดีโอ 2 โปรแกรมแยกกัน ได้แก่ โปรแกรมเล่นวิดีโอเนื้อหาและโปรแกรมโฆษณา SDK จะจัดการการวางซ้อนโปรแกรมเล่น โฆษณาบนโปรแกรมเล่นวิดีโอเนื้อหาโดยอัตโนมัติ ด้วยเหตุนี้ การเพิ่ม Listener เหตุการณ์ลงใน โปรแกรมเล่นวิดีโอโดยตรงจึงไม่ได้ผล วิธีแก้ปัญหาเบื้องต้นอย่างหนึ่งคือการแสดงและซ่อนคอนเทนเนอร์โฆษณา แต่ก็อาจรบกวนฟังก์ชันการทำงานของ SDK ได้ วิธีแก้ปัญหาที่ดีกว่าคือการรวมโปรแกรมเล่นทั้งสองไว้ใน div ระดับบนสุดและแนบ Listener เหตุการณ์ คู่มือนี้จะแสดงวิธีดำเนินการ

ข้อกำหนดเบื้องต้น

แก้ไข HTML

ก่อนอื่นคุณต้องเปลี่ยน HTML เพื่อเพิ่ม div ที่รวมทั้งโปรแกรมเล่นโฆษณาและโปรแกรมเล่นวิดีโอเนื้อหา ในคู่มือเริ่มต้นใช้งาน คุณไม่ต้องดำเนินการใดๆ กับ 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>
...

เพิ่ม Listener เหตุการณ์ลงใน JavaScript

ถัดไป ให้เพิ่ม Listener เหตุการณ์ลงในโค้ด JavaScript เช่น เพื่อตรวจหาการที่ผู้ใช้คลิกวิดีโอ ตัวอย่างเช่น ใน ads.js:

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

เท่านี้ก็เรียบร้อย คุณสามารถคลิกที่วิดีโอและดูป๊อปอัปปรากฏขึ้นได้ ไม่ว่าโฆษณาจะกำลังเล่นอยู่หรือไม่และยังคงมีการคลิกผ่านโฆษณาอยู่

ลองเลย

ดูการใช้งานที่ใช้งานได้ด้านล่าง