إنشاء موقّت العد التنازلي للإعلان

ننصح باستخدام الموقّت المضمّن للعد التنازلي الذي تقدّمه أداة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية باستخدام UIElements . إذا أردت تنفيذ استراتيجية خاصة بك، اتّبِع الخطوات التالية.

يرشدك هذا الدليل إلى كيفية إضافة موقّت للعد التنازلي إلى عملية تنفيذ حزمة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية.

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

يفترض هذا الدليل أنّك قد نفّذت حزمة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية. إذا لم يكن الأمر كذلك، راجِع مقالة إعداد حزمة تطوير البرامج لإعلانات الوسائط التفاعلية.

إنشاء الموقّت

لا تتطلّب إضافة موقّت للعد التنازلي إلى مشغّل الفيديو المزوّد بواجهة IMA سوى إضافة بضعة أسطر من JavaScript لاستطلاع سمة remainingTime لمثيل AdsManager. نستخدم طريقة setInterval() لمحاولة تنفيذ دالة كل ثانية للتحقّق من adsManager.remainingTime.

// Global countdown timer
var countdownTimer;
...
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.STARTED,
      onAdsStarted);
}
...
function onAdsStarted(adEvent) {
  countdownTimer = setInterval(function() {
    var timeRemaining = adsManager.getRemainingTime();
    // Update UI with timeRemaining
  }, 1000);
}
...
function onContentResumeRequested(adEvent) {
  ...
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
}
  

جرّبه الآن

اطّلِع على هذا التنفيذ.