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

عند استخدام أداة تطوير البرامج لإعلانات الوسائط التفاعلية، يتوفّر مشغّلا فيديو منفصلان، هما: مشغّل الفيديو للمحتوى ومشغّل الإعلانات. تدير حزمة 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!');});
  ...
}
...

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

تجربة السمات والبيانات

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