ردگیری کلیک‌های موشواره

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

پیش‌نیازها

اصلاح کردن HTML

ابتدا باید HTML خود را تغییر دهید تا یک div اضافه کنید که هر دو بازیکن آگهی و بازیکن ویدیو محتوا را دربرگیرد. در *راه‌اندازی کیت توسعه نرم‌افزار IMA*، این کار قبلاً با 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!');});
  ...
}
...

فقط همین! می‌توانید روی ویدیو کلیک کنید و ببینید که صرف‌نظر از اینکه آگهی درحال پخش است یا نه، بالاپری ظاهر می‌شود و همچنان کلیک‌گذرهای آگهی کار می‌کنند.

امتحان کنید

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