מומלץ לשייך את מיקומי המודעות מסוג HTML להצגה בדף למיקומי מודעות וידאו או מודעות שכבת-על. קשר זה בין מיקומי מודעות משויכים נקרא היחסים master-companion.
בנוסף לבקשת מודעות וידאו ראשיות ושכבת-על, ניתן להשתמש ב-IMA SDK כדי להציג מודעות HTML נלוות. המודעות האלו מוצגות בסביבת HTML.
שימוש במודעות נלוות
כדי להשתמש במודעות נלוות, מבצעים את השלבים הבאים:
1. הזמנת המודעות הנלוות
תחילה עליכם להזמין את המודעות הנלוות שאתם רוצים להציג עם המודעות הראשיות. אפשר לנהל את הטראפיק של מודעות נלוות ב-Ad Manager. ניתן להציג עד שש מודעות נלוות לכל מודעה ראשית. השיטה הזו, שבה קונה יחיד שולט בכל המודעות בדף, נקראת גם חסימת כבישים.
2. שליחת בקשה למודעות נלוות
כברירת מחדל, מודעות נלוות מופעלות עבור כל בקשה למודעה.
3. מודעות נלוות ברשת המדיה
יש שתי דרכים להציג מודעות נלוות:
- שימוש אוטומטי ב-Google Publisher Tag (GPT)
אם אתה משתמש ב-GPT כדי להטמיע מודעות נלוות, הן מוצגות אוטומטית כל עוד בדף ה-HTML יש מיקומי מודעות נלוות מוצהרות ומודעות אלו רשומות ב-API (כלומר, המזהה div ב-JavaScript וה-HTML חייבים להיות תואמים). חלק מיתרונות השימוש ב-GPT הם:- מודעוּת של משבצת מודעה נלווית
- מילוי חוזר נלווה מהרשת של בעל האתר, אם תגובת VAST מכילה פחות מודעות נלוות מאשר יש מיקומים מוגדרים בדף ה-HTML
- מילוי אוטומטי של מודעה נלווית אם מודעת וידאו חסרה
- מיקומי מודעות נלוות שנטענו מראש לנגני וידאו מסוג 'לחיצה להפעלה'
- רינדור נלווה אוטומטי, כולל
HTMLResourceו-iFrameResource
- באופן ידני באמצעות Ad API.
שימוש במודעות נלוות עם Google Publisher Tag
תג Google Publisher Tag (GPT) הופך את ההצגה של מודעות נלוות ל-HTML באתר באופן אוטומטי. אנחנו ממליצים לרוב בעלי התוכן הדיגיטלי להשתמש ב-GPT. HTML5 SDK מזהה מיקומי GPT אם GPT נטען בדף האינטרנט הראשי (לא ב-IFrame). מידע מפורט יותר על השימוש ב-GPT עם IMA SDK זמין במסמכי GPT.
אם אתם מארחים את HTML5 SDK בתוך IFrame
אם אתם עומדים בשני הקריטריונים הבאים, עליכם לכלול סקריפט proxy נוסף על מנת שהאפליקציות הנלוות של GPT יוצגו כראוי:
- טעינת ה-SDK של HTML5 ב-IFrame.
- יש לטעון GPT בדף האינטרנט הראשי (מחוץ ל-IFrame).
על מנת להציג את המודעות הנלוות בתרחיש הזה, עליכם לטעון את הסקריפט של שרת ה-proxy של GPT לפני טעינת ה-SDK:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
דברים חשובים שכדאי לזכור:
- אסור ש-GPT יטען ב-IFrame שטוען את ה-SDK.
- יש לטעון GPT בדף העליון, לא ב-IFrame אחר.
- יש לטעון את סקריפט ה-proxy באותה מסגרת שבה מופיע GPT (כלומר, בדף הראשי).
הצהרה על מיקומי מודעות נלוות ב-HTML
בקטע הזה נסביר איך להצהיר על מודעות נלוות ב-HTML באמצעות GPT, ומספק קוד לדוגמה לתרחישים שונים. עבור ה-SDK של HTML5, עליכם להוסיף JavaScript לדף ה-HTML ולהצהיר על מיקומי המודעות הנלוות.
הערה: בכל אחת מהדוגמאות הבאות, הקפידו לספק ערכי network ו-unit-path תקינים בקריאה ל-method googletag.defineSlot (שממוקמים בתג <head> או בתג <body>, בהתאם לדוגמה שבה אתם משתמשים בפועל).
- דוגמה 1: הטמעה בסיסית של מיקומי מודעות בדף
- דוגמה 2: הטמעה של מיקום מודעה דינמית
- דוגמה 3: מיקומי מודעות שנטענים מראש
דוגמה 1: הטמעה בסיסית של מיקומי מודעות
הקוד לדוגמה הבא מראה איך לכלול את הקובץ gpt.js בדף ה-HTML
ולהצהיר על מיקום מודעה. מיקום המודעה בהצהרה הוא 728x90 פיקסלים. GPT מנסה למלא את המקום עם מודעות נלוות כלשהן שהוחזרו בתגובת VAST שתואמות לגודל הזה. לאחר הצהרת מיקומי המודעות, הפונקציה googletag.display() יכולה לעבד אותם בכל מקום שבו היא מופעלת בדף. המיקומים הם מיקומים נלווים, ולכן המודעות לא מוצגות באופן מיידי. במקום זאת, הן
מופיעות לצד מודעת הווידאו הראשית.
דוגמה להטמעה:
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
אני רוצה לנסות
אפשר לראות את ה-codep הבא להטמעה תקינה.
דוגמה 2: הטמעה של מיקום מודעה דינמית
לפעמים לא יודעים כמה מיקומי מודעות יש בדף עד שהתוכן בדף מעובד. הקוד לדוגמה הבא מראה איך להגדיר מיקומי מודעות בזמן שהדף מוצג. הדוגמה הזו זהה ל-Example 1, אבל היא מתעדת את מיקומי המודעות שבהם הן מוצגות בפועל.
הערה: כשנגן הווידאו עומד להציג את המודעות, הוא יבקש את המיקומים. חשוב לוודא שהמיקומים מוגדרים לפני שהנגן מציג את המודעות.
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
אני רוצה לנסות
אפשר לעיין בקוד הבא לגבי הטמעה תקינה.
דוגמה 3: מיקומי מודעות שנטענו מראש
במקרים מסוימים, ייתכן שיהיה עליך להציג משהו במיקום המודעה לפני שליחת הבקשה למודעה הנלווית. בדרך כלל, בקשות להצגת מודעות נלוות מתבצעות ביחד עם מודעת וידאו. הבקשה הזו יכולה להתרחש אחרי שהדף נטען. לדוגמה, מודעה נלווית יכולה להיטען רק אחרי שהמשתמש לוחץ על סרטון מסוג 'לחיצה להפעלה'. במקרה כזה, עליך להיות מסוגל לבקש מודעה רגילה שתמלא את מיקום המודעה לפני שליחת הבקשה למודעה הנלווית. כדי לתמוך בתרחיש לדוגמה הזה, אפשר להציג מודעות אינטרנט רגילות במיקום הנלווה. לוודא שהמודעות באינטרנט ממוקדות למיקומים הנלווים. אפשר לטרגט את מיקומי המודעות הנלווים באותו אופן שבו מבצעים טירגוט למיקומי מודעות רגילים באינטרנט.
הערה: הקוד לדוגמה הבא זהה בדיוק לקוד לדוגמה שסופק בדוגמה 1, מלבד הקטע המודגש. במקרה כזה, עליכם לספק את רשת המודעות ואת הנתיב של היחידה עם הטעינה מראש במקום של יחידת מודעות הווידאו.
הנה דוגמה להטמעה שכבר מתוארת:
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
אני רוצה לנסות
אפשר לראות את עט הקוד הבא של הטמעה תקינה.
שימוש במודעות נלוות עם Ad API
בקטע הזה מוסבר איך להציג מודעות נלוות באמצעות ה-API של Ad.
מודעות נלוות ברשת המדיה
כדי להציג מודעות נלוות, תחילה צריך לקבל הפניה לאובייקט Ad דרך כל אחד מהאירועים של AdEvent שנשלחו מ-AdsManager.
מומלץ להשתמש באירוע AdEvent.STARTED, כי הצגת מודעות נלוות צריכה לחפוף להצגת המודעה הראשית.
בשלב הבא, משתמשים באובייקט Ad הזה כדי לקרוא ל-getCompanionAds() על מנת לקבל מערך של CompanionAd אובייקטים. כאן אפשר לציין CompanionAdSelectionSettings, וכך להגדיר מסננים במודעות הנלוות לפי סוג הקריאייטיב, אחוז כמעט התאמה, סוג המשאב וקריטריוני גודל. למידע נוסף על ההגדרות האלה, עיינו במסמכי התיעוד בנושא API של
HTML5.
כעת אפשר להשתמש באובייקטים מסוג CompanionAd שהוחזרו על ידי getCompanionAds כדי להציג את המודעות הנלוות בדף, בהתאם להנחיות הבאות:
- צרו משבצת מודעה נלווית
<div>בגודל הנדרש בדף. - ב-handler של האירועים של האירוע
STARTED, מאחזרים את האובייקט
Adעל ידי קריאה ל-getAd(). - השתמש ב-
getCompanionAds()כדי לקבל רשימה של מודעות נלוות שתואמות גם לגודל של מיקום המודעה הנלווית וגם לגודלCompanionAdSelectionSettingsשיש להן מספר רצף זהה לזה של הקריאייטיב הראשי. קריאייטיבים עם מאפיין רצף חסר יטופלו כבעלי מספר רצף 0. - מורידים את התוכן ממופע של
CompanionAdומגדירים אותו כ-HTMl הפנימי של<div>של מיקום המודעה בדף.
קוד לדוגמה
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
הצגת מודעות נלוות נוזלות
IMA תומכת כעת במודעות נלוות משתנות. המודעות הנלוות האלה יכולות לשנות את גודל
הגודל של מיקום המודעה. הן ממלאים 100% מהרוחב של div ההורה, ואז משנים את הגובה שלהן כך שיתאים לתוכן של המודעה הנלווית. הם מוגדרים באמצעות הגודל הנלווה Fluid ב-Ad Manager. בתמונה הבאה מוסבר איפה להגדיר את הערך הזה.
תוספות נוזל של GPT
כשמשתמשים במודעות נלוות של GPT, אפשר להצהיר על מיקום נלווה של מודעה נלווית על ידי עדכון הפרמטר השני של השיטה defineSlot().
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
מודעות נלווים של נוזל API של Ad
כשמשתמשים ב-Ad API למודעות נלוות, ניתן להצהיר על משבצת נלווית גמישה על ידי עדכון הערך google.ima.CompanionAdSelectionSettings.sizeCriteria לערך SELECT_FLUID.
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>