माउस क्लिक को ट्रैक करना

IMA SDK टूल का इस्तेमाल करते समय, दो अलग-अलग वीडियो प्लेयर होते हैं. पहला, आपका कॉन्टेंट वीडियो प्लेयर और दूसरा, विज्ञापन प्लेयर. SDK, कॉन्टेंट वीडियो प्लेयर पर विज्ञापन प्लेयर को ओवरले करने की सुविधा को अपने-आप मैनेज करता है. इस वजह से, वीडियो प्लेयर में सीधे तौर पर इवेंट लिसनर जोड़ने की सुविधा काम नहीं करती. विज्ञापन कंटेनर को दिखाने और छिपाने का एक तरीका है. हालांकि, इससे SDK टूल के काम करने में रुकावट आ सकती है. बेहतर तरीका यह है कि दोनों प्लेयर को पैरंट div में रैप करें और उसमें इवेंट लिसनर अटैच करें. इस गाइड में इसका तरीका बताया गया है.

ज़रूरी शर्तें

• IMA HTML5 SDK टूल के साथ इंटिग्रेट किया गया HTML5 वीडियो प्लेयर. अगर आपके पास IMA SDK नहीं है, तो IMA SDK सेट अप करना लेख पढ़ें.

अपने एचटीएमएल में बदलाव करना

सबसे पहले, आपको विज्ञापन प्लेयर और कॉन्टेंट वीडियो प्लेयर, दोनों को 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>
...

अपने JavaScript में इवेंट लिसनर जोड़ना

इसके बाद, अपने JavaScript कोड में इवेंट लिसनर जोड़ें. जैसे, वीडियो पर क्लिक करने वाले उपयोगकर्ता का पता लगाने के लिए. उदाहरण के लिए, ads.js में:

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

हो गया! वीडियो पर क्लिक करने पर, आपको पॉप-अप दिखेगा. इससे कोई फ़र्क़ नहीं पड़ता कि कोई विज्ञापन चल रहा है या नहीं. साथ ही, विज्ञापन पर क्लिक मिलने की सुविधा भी काम करती रहेगी.

इसे आज़माएं

यहां इस सुविधा को लागू करने का तरीका बताया गया है.