ערכת IMA SDK ל-HTML5 תומכת במודעות לרשת המדיה בנוסף למודעות וידאו לינאריות. פרטים על מודעות וידאו לינאריות זמינים במאמר סקירה כללית על פרסום ב-Video Solutions.
הפעלת מודעות לינאריות לרשת המדיה יכולה להגביר את הביקוש לשטח להצגת מודעות, כי מודעות לינאריות לרשת המדיה מתחרות עם מודעות וידאו לינאריות על השטח להצגת מודעות. ערכת ה-IMA מטפלת בעיבוד של מודעות ליניאריות לרשת המדיה, אבל צריך להגדיר זיהוי של תוכן וידאו. ההטמעה של זיהוי תוכן ב-IMA משתנה בהתאם לשאלה אם אתם יוצרים את נגן התוכן באותו פריים מקורי כמו נגן המודעות, או אם אתם יוצרים את נגן המודעות בפריים ממקורות שונים.
המדריך הזה מסביר איך להגדיר זיהוי תוכן כדי להפעיל מודעות ליניאריות לרשת המדיה, לשנות את נגן הווידאו של התוכן ולהפסיק לאסוף אותות תוכן.
הגדרת זיהוי תוכן
כדי להפעיל מודעות ליניאריות לרשת המדיה בבקשות להצגת מודעות, צריך לבצע את הפעולות הבאות:
אותו מקור
אם ל-IMA SDK ולנגן התוכן יש את אותו מקור, צריך לבצע אחת מהפעולות הבאות:
מומלץ להעביר את נגן הווידאו לקריאה
AdsManagerLoadedEvent.getAdsManager(). למרות ש-getAdsManager()מאפשר להעביר אובייקט שמכיל מאפייןcurrentTime, צריך להעביר מופע שלHTMLVideoElementאלgetAdsManager()כדי לתמוך בזיהוי תוכן.function onAdsManagerLoaded(adsManagerLoadedEvent) { // Set any AdsRenderingSettings here. const adsRenderingSettings = new google.ima.AdsRenderingSettings(); // Get the ads manager. adsManager = adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings); }אם אתם לא יכולים לספק את נגן התוכן במהלך הקריאה ל-
AdsManagerLoadedEvent.getAdsManager(), אתם יכולים להפעיל את ה-methodAdsManager.configureAdsManager()עם נגן הווידאו. כדי שזיהוי התוכן יפעל, צריך להשתמש בHTMLVideoElement.
function onAdsManagerLoaded(adsManagerLoadedEvent) {
adsManager =
adsManagerLoadedEvent.getAdsManager(null);
adsManager.configureAdsManager(videoElement);
}
אם לא תגדירו זיהוי תוכן, יכול להיות ששרתי המודעות של Google יפסיקו להציג מודעות ליניאריות לרשת המדיה.
אם נגן התוכן נמצא באותו מקור שבו אתם טוענים את IMA SDK, אתם לא צריכים לבצע שינויים בהטמעה של IMA כדי לשנות את נגן התוכן או להפסיק את איסוף האותות מהתוכן.
ממקורות שונים
אם IMA SDK הוא ממקורות שונים לנגן התוכן, IMA יכול לאסוף אותות לזיהוי תוכן באמצעות המחלקה CrossOriginProxy. המחלקה הזו מאפשרת ל-IMA SDK לאמת את המיקום הנכון של מודעות ליניאריות לרשת המדיה ולאסוף אותות שקשורים לנושא של תוכן הווידאו. אם אתם ממקמים את IMA SDK ב-iframe חוצה-דומיינים, אתם צריכים להטמיע את המחלקה CrossOriginProxy.
אם נגן התוכן שלכם ימשיך להיות ממוקם במקור חיצוני ל-IMA SDK בלי להטמיע את המחלקה CrossOriginProxy, יכול להיות ששרתי המודעות של Google יפסיקו להציג מודעות לינאריות לרשת המדיה.
כדי לטעון את המחלקה CrossOriginProxy באפליקציה:
בקובץ ה-HTML, מייבאים את הקובץ
ima_proxy.js:<html> <head> <title>IMA HTML5 cross-origin iframe sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="mainContainer"> <div id="content"> <video id="contentElement"> <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source> </video> </div> <!-- The cross-origin iframe where you load IMA SDK and play ads. --> <iframe id="adContainerIframe" src="https://cross-origin-domain.com/ads-sandbox.html" > </iframe> </div> <button id="playButton">Play</button> <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script> <script src="main.js"></script> </body> </html>בקובץ main.js, מקבלים את המכונה של
CrossOriginProxy.מפעילים את השיטה
setVideoElements()עם מערך של כל נגני הווידאו שמציגים מודעות בדף או באפליקציה.
לפני ששולחים בקשה להצגת מודעה, צריך להעביר את רכיבי הווידאו למופע של CrossOriginProxy באמצעות הקריאה setVideoElements(). בדוגמה הבאה מועבר מערך שמכיל נגן וידאו אחד של תוכן:
// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});
שינוי נגן הווידאו של התוכן
אם אתם מחליפים או מוסיפים נגן וידאו, אתם צריכים להעביר מערך חדש ל-method setVideoElements(). כשמבצעים את הקריאה החדשה ל-setVideoElements(), ערכת ה-IMA מתחילה לאסוף אותות לנגן התוכן החדש, ומפסיקה לאסוף אותות לנגני תוכן שהועברו בקריאות קודמות.
בדוגמה הבאה, רכיב הווידאו החדש מועבר לכיתה CrossOriginProxy:
function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);
// Continue with any other steps needed to initiate the content player
}
הפסקת איסוף האותות כשהמודעות מסתיימות
כשמסיימים להפעיל מודעות ומפעילים את ה-method AdsLoader.destroy(), צריך להפעיל גם את ה-method setVideoElements() עם מערך ריק. ביצוע הקריאה ל-setVideoElements() עם מערך ריק מסיר את ההפניה לנגני התוכן ש-IMA מחזיק ומונע בעיות של דליפת זיכרון.