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

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

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

แก้ไข HTML ของคุณ

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

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

ลองเลย

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