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

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

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

• مشغّل فيديو HTML5 مع دمج حزمة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية وإذا لم يكن لديك حساب، يمكنك الاطّلاع على دليل البدء.

تعديل HTML

يجب أولاً تغيير رمز HTML لإضافة 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!');});
  ...
}
...

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

جرّبه الآن

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