تتبُّع نقرات الماوس

عند استخدام أداة تطوير البرامج لإعلانات الوسائط التفاعلية، يكون هناك مشغّلَا فيديو منفصلَين، مشغّل الفيديو الخاص بالمحتوى ومشغّل الإعلانات. تدير حزمة تطوير البرامج (SDK) تلقائيًا عملية تراكب مشغّل الإعلانات فوق مشغّل فيديو المحتوى. نتيجةً لذلك، لا تعمل إضافة مستمعي الأحداث إلى مشغّل الفيديو مباشرةً. ومن بين الحلول البديلة عرض حاوية الإعلان ونقلها، ولكن يمكن أن يتداخل ذلك مع وظيفة حزمة SDK. إنّ الحلّ الأفضل هو لفّ كلا اللاعبين في div رئيسي وإرفاق أدوات معالجة الأحداث به. يوضّح لك هذا الدليل كيفية إجراء ذلك.

المتطلبات الأساسية

تعديل رمز 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

بعد ذلك، أضِف أدوات الاستماع إلى الأحداث إلى رمز JavaScript، مثلاً لرصد نقرات المستخدم على الفيديو. على سبيل المثال، في ads.js: 

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

هذا كل شيء! يمكنك النقر على الفيديو ورؤية النافذة المنبثقة تظهر بغض النظر عمّا إذا كان يتم عرض إعلان أم لا، وسيظلّ بإمكانك النقر على الإعلانات.

جرّبه الآن

يمكنك الاطّلاع أدناه على مثال لعملية تنفيذ ناجحة.