כללי מודעות

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

  • כשיוצרים את AdsManager, אובייקט contentPlayback מועבר באמצעות הקריאה ל-getAdsManager. לאובייקט הזה חייב להיות מאפיין currentTime שמחזיר את המיקום הנוכחי של הסרטון. אם משתמשים ברכיב video של HTML5 כדי להציג את התוכן, אפשר פשוט להעביר את הרכיב הזה ל-SDK. האובייקט הזה משמש למעקב אחר ההתקדמות של הפעלת התוכן, כך שההפסקות למודעות יתווספו באופן אוטומטי בזמנים שצוינו ב-Ad Manager. צריך גם לציין לערכת ה-SDK שאתם רוצים שהיא תטפל במצב התוכן בשמכם.
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager = adsManagerLoadedEvent.getAdsManager(
        videoContent, adsRenderingSettings); // See API reference for
        
        contentPlayback.
    
  • כדי להבטיח שמודעות לאחר הסרטון (post-roll) יופעלו, עליך ליידע את ה-SDK מתי התוכן שלך מוכן. זה קצת מסובך, כי במקרים מסוימים ה-SDK משתמש בנגן הווידאו כדי להפעיל מודעות, לכן צריך לוודא שאתם מודיעים ל-SDK רק כשהתוכן שלכם מסתיים, ולא לגבי סיום המודעה. אפשר לעשות זאת באמצעות הקוד הבא:
    var videoContent = document.getElementById('contentElement');
    var contentEndedListener = function() {adsLoader.contentComplete();};
    
    videoContent.addEventListener('ended', contentEndedListener);
    
    function onContentPauseRequested() {
      contentElement.removeEventListener('ended', contentEndedListener);
      ...
    }
    
    function onContentResumeRequested() {
      contentElement.addEventListener('ended', contentEndedListener);
      ...
    }
  • האירועים CONTENT_PAUSE_REQUESTED ו-CONTENT_RESUME_REQUESTED משמשים להשהיה ולהמשך של התוכן כשמופעלות הפסקות למודעות.
  • אם נגן הווידאו שלך תומך בגרירה לחיפוש, ומאפיין הזמן הנוכחי של נגן הווידאו מתעדכן בזמן שהמשתמש גורר, ה-SDK לא יכול להבחין בין תוכן שמתקדם רגיל לבין משתמש שגולש בתוכן. צריך להשתמש באובייקט contentPlayback בהתאמה אישית בתור הפרמטר ל-getAdsManager. דוגמה לתרחיש כזה זמינה במאמר הבעיות בניסיון לחפש.

הערה: לאחר סיום ההפעלה של התוכן או כשהמשתמש הפסיק את ההפעלה, חשוב לקרוא ל-AdsLoader.contentcomplete כדי להודיע ל-SDK שהתוכן מוכן. לאחר מכן, ה-SDK מפעיל את ההפסקה למודעות בסוף הסרטון, אם תזמנתם הפסקה כזו. האירוע ALL_ADS_COMPLETED מועלה אחרי שמפעילים את כל ההפסקות למודעות. כמו כן, שימו לב שהמעקב אחרי התוכן מתחיל כשמתבצעת קריאה ל-init(), ותמיד צריך להפעיל את init() לפני הפעלת התוכן.

השבתה של הפעלה אוטומטית של הפסקות למודעות

בנסיבות מסוימות, כדאי למנוע מ-SDK להפעיל הפסקות למודעות עד שתהיו מוכנים להפעיל אותן. בתרחיש הזה, תוכלו להשבית את ההפעלה האוטומטית של ההפסקות למודעות כדי להודיע ל-SDK מתי אתם מוכנים להפעלה של הפסקה למודעות. עם ההגדרות האלה, אחרי שה-SDK טוען הפסקה למודעה, הוא מפעיל אירוע AD_BREAK_READY. כשהנגן יהיה מוכן להפסקה למודעה, תוכל להפעיל את adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

אני רוצה לנסות

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

המורכבות בדילוג

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

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

באמצעות הפתרון הזה, תוכלו לדלג כהלכה על המודעה 0:10 באמצע הסרטון ולהפעיל רק את הסרטון 0:20 באמצע הסרטון. הפעולה הזו מתבצעת באמצעות מעקב אחר המיקום הנוכחי, כמו שמוצג בהמשך. הקוד הבא מכיל שינויים (מוצגים בגופן מודגש) של ads.js בדוגמת ה-HTML5 המתקדמת שזמינה בדף ההורדה שלנו.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

בעיות מוכרות ב-Safari לנייד

השיטה הזו אמורה לפעול בכל פלטפורמה, מלבד Safari לנייד. ב-Safari בנייד, מאפיין החיפוש של תג הווידאו לא מוטמע כראוי (הוא תמיד מחזיר FALSE). כדי לעקוף את זה, עליכם לבצע בדיקה משלכם כדי לראות אם המשתמש מחפש את הסרטון. הקוד לדוגמה של השיטה הזו יופיע בהמשך. שוב, השורות המודגשות בהמשך משנות את הקוד הקיים.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

בעקבות השינויים האלה, ה-SDK משתמש עכשיו במאפיין currentTime של האובייקט Ads כדי לקבוע מתי להפעיל הפסקות למודעות, ולא במאפיין currentTime של נגן הווידאו ברשת המדיה.