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

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

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

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

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

दोनों में 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>
...

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

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

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

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

इसे आज़माएं

आप नीचे इसका काम करने का तरीका देख सकते हैं.