יצירת טיימר לספירה לאחור למודעה

מומלץ להשתמש בטיימר המובנה לספירה לאחור ש-HTML5 IMA SDK מספק דרך UIElements הקצר הזה. התשובות שלך יעזרו לנו להשתפר. אם אתם עדיין רוצים להטמיע מודעות משלכם, צריך לבצע את ההוראות שלמטה.

במדריך הזה מוסבר איך להוסיף טיימר לספירה לאחור בהטמעת HTML5 IMA SDK.

דרישות מוקדמות

מדריך זה מבוסס על ההנחה שהטמעתם את ה-SDK של IMA SDK בפורמט 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);
  }
}
  

רוצה לנסות?

בהמשך תוכלו לראות הטמעה פעילה.