IMA HTML5 SDK תומך בפלייליסטים אוטומטיים לחלוטין של מודעות. התכונה הזו מוסיפה הפסקות למודעות בתוכן, Google Ad Manager בזמן ניהול הטראפיק למודעות שלכם. הוא גם מפשט משמעותית את הקוד של נגן הווידאו שנדרשות כדי לתמוך בהפסקות למודעות, כולל מודעות לפני הסרטון (pre-roll), מודעות באמצע הסרטון (mid-roll) ומודעות בסוף הסרטון (post-roll).
- במהלך היצירה של
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.
- כדי להבטיח שמודעות בסוף הסרטון יופעלו, צריך להודיע ל-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(); }
רוצה לנסות?
בהמשך תוכלו לראות הטמעה פעילה.
הבעיה בדילוג
אם אתם משתמשים בכללי מודעות, אתם עלולים להיתקל בבעיה בחיפוש בלחיצה וגרירה. באופן ספציפי, אחרי שמשתמש לוחץ וגורר כדי לחפש בסרטון בעבר הם עשויים לראות רצפי מודעות באמצע סרטון, והם עשויים לראות שניים או יותר מהם התוכן ימשיך לפעול. הדבר נגרם עקב זמן ההפעלה של הסרטון שמתעדכן בזמן המשתמש מחפש, אם ערכת ה-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 משתמשת עכשיו בנכס הנוכחי של Ads
שלך
כדי לקבוע מתי להפעיל הפסקות למודעות, ולא את התכונה currentTime
של
נגן הווידאו של התוכן.