ردیابی کلیک های ماوس

هنگام استفاده از IMA SDK، دو پخش کننده ویدیوی جداگانه وجود دارد، پخش کننده ویدیوی محتوای شما و پخش کننده آگهی. SDK به‌طور خودکار پخش‌کننده آگهی را روی پخش‌کننده ویدیوی محتوا مدیریت می‌کند. در نتیجه، افزودن مستقیم شنوندگان رویداد به پخش کننده ویدیو کار نمی کند. یکی از راه‌حل‌ها نشان دادن و پنهان کردن ظرف تبلیغات است، اما این کار می‌تواند در عملکرد SDK اختلال ایجاد کند. راه حل بهتر این است که هر دو بازیکن را در یک div والد قرار دهید و شنوندگان رویداد را به آن متصل کنید. این راهنما به شما نشان می دهد که چگونه.

پیش نیازها

• پخش کننده ویدئو HTML5 با IMA HTML5 SDK یکپارچه. اگر ندارید، راهنمای شروع ما را بررسی کنید.

HTML خود را اصلاح کنید

ابتدا باید HTML خود را تغییر دهید تا یک div wrapping هم پخش کننده آگهی و هم پخش کننده ویدیوی محتوا را اضافه کنید. در راهنمای شروع، این کار قبلاً با 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>
...

شنوندگان رویداد را به جاوا اسکریپت خود اضافه کنید

در مرحله بعد، شنوندگان رویداد را به کد جاوا اسکریپت خود اضافه کنید، مانند شناسایی کاربر که روی ویدیو کلیک می کند. به عنوان مثال، در ads.js :

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

همین! می‌توانید روی ویدیو کلیک کنید و بدون در نظر گرفتن اینکه آیا تبلیغی پخش می‌شود و باز هم تعداد کلیک‌های تبلیغاتی کار می‌کند، پنجره بازشو ظاهر می‌شود.

آن را امتحان کنید

در زیر می توانید یک پیاده سازی کار را مشاهده کنید.