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

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

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

• โปรแกรมเล่นวิดีโอ HTML5 ที่ผสานรวม IMA HTML5 SDK หากยังไม่มี ให้ดูตั้งค่า IMA SDK

แก้ไข HTML

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

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

ลองเลย

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