মাউস ক্লিক ট্র্যাক করা

IMA SDK ব্যবহার করার সময়, দুটি আলাদা ভিডিও প্লেয়ার থাকে, আপনার কন্টেন্ট ভিডিও প্লেয়ার এবং বিজ্ঞাপন প্লেয়ার। SDK অটোমেটিক কন্টেন্ট ভিডিও প্লেয়ারের উপরে বিজ্ঞাপন প্লেয়ার ওভারলে করার কাজটি ম্যানেজ করে। এর ফলে, ভিডিও প্লেয়ারে সরাসরি ইভেন্ট লিসেনার যোগ করা কাজ করে না। একটি বিকল্প হল বিজ্ঞাপন কন্টেনার দেখানো ও লুকানো, কিন্তু এটি SDK ফাংশনালিটিতে বাধা দিতে পারে। এর থেকে ভালো সমাধান হল, দুটি প্লেয়ারকেই একটি পেরেন্ট div এলিমেন্টের মধ্যে র‍্যাপ করা এবং সেটিতে ইভেন্ট লিসনার অ্যাটাচ করা। এই নির্দেশিকা থেকে আপনি জানতে পারবেন কীভাবে এটি করতে হয়।

পূর্বশর্ত

• IMA HTML5 SDK ইন্টিগ্রেট করা HTML5 ভিডিও প্লেয়ার। আপনার কাছে এটি না থাকলে, 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>
...

আপনার জাভাস্ক্রিপ্টে ইভেন্ট লিসনার যোগ করুন

এরপরে, আপনার JavaScript কোডে ইভেন্ট লিসনার যোগ করুন, যেমন কোনও ব্যবহারকারী ভিডিওতে ক্লিক করেছেন কিনা তা শনাক্ত করতে। যেমন, ads.js-এ:

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

ব্যস, এটুকুই যথেষ্ট! আপনি ভিডিওতে ক্লিক করতে পারেন এবং বিজ্ঞাপন চলছে কিনা তা নির্বিশেষে পপ-আপ দেখতে পারেন এবং এখনও বিজ্ঞাপন ক্লিক-থ্রু কাজ করে।

এটি ব্যবহার করে দেখুন

নিচে একটি কার্যকরী প্রয়োগ দেখতে পাবেন।