כדאי לשייך את משבצות המודעות ב-HTML בדף למשבצות מודעות וידאו או למשבצות מודעות שכבת-על. הקשר הזה בין מיקומי מודעות משויכים נקרא קשר ראשי-משני.
בנוסף לבקשת מודעות וידאו ומודעות ראשיות שמוצגות בשכבת-על, אפשר להשתמש ב-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 יוצגו בצורה תקינה:
- טוענים את HTML5 SDK ב-IFrame.
- טוענים את GPT בדף האינטרנט הראשי (מחוץ ל-IFrame).
כדי שהמודעות הנלוות יוצגו בתרחיש הזה, צריך לטעון את סקריפט ה-GPT proxy לפני טעינת ה-SDK:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
דברים חשובים שכדאי לזכור:
- אסור לטעון GPT בתוך ה-IFrame שבו נטען ה-SDK.
- צריך לטעון את GPT בדף העליון, ולא ב-IFrame אחר.
- סקריפט ה-proxy צריך להיטען באותו פריים שבו טוען GPT (כלומר, בדף הראשי).
הצהרה על מיקומי מודעות נלוות ב-HTML
בקטע הזה מוסבר איך להצהיר על מודעות משלימות ב-HTML באמצעות GPT, ומוצג קוד לדוגמה לתרחישים שונים. ב-HTML5 SDK, צריך להוסיף קוד JavaScript לדף ה-HTML ולהצהיר על מיקומי המודעות הנלוות.
- דוגמה 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>
רוצה לנסות?
כאן אפשר לראות הטמעה פעילה.
דוגמה 2: הטמעה של מיקום מודעה דינמי
לפעמים לא יודעים כמה מיקומי מודעות יש בדף עד שהתוכן של הדף מוצג. בדוגמת הקוד הבאה אפשר לראות איך מגדירים מיקומי מודעות בזמן שהדף עובר עיבוד. הדוגמה הזו זהה לדוגמה 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: מיקומי מודעות שנטענו מראש
במקרים מסוימים, יכול להיות שתצטרכו להציג משהו במיקום המודעה בדף לפני שתוגש בקשה להצגת המודעה הנלווית. מודעות נלוות בדרך כלל נדרשות יחד עם מודעת וידאו. הבקשה הזו יכולה להתרחש אחרי טעינת הדף. לדוגמה, יכול להיות שמודעה נלווית תיטען רק אחרי שהמשתמש לוחץ על סרטון מסוג 'קליק להפעלה'. במקרה כזה, צריך להיות לכם אפשרות לבקש הצגה של מודעה רגילה כדי למלא את מיקום המודעה בדף לפני שמתבצעת בקשה להצגת מודעה נלווית. כדי לתמוך בתרחיש השימוש הזה, אפשר להציג מודעות אינטרנט רגילות במשבצת של המודעה הנלווית. מוודאים שהמודעות באתר מטורגטות למשבצות הפרסום הנלוות. אפשר לטרגט את מיקומי המודעות הנלווים באותו אופן שבו מטרגטים מיקומי מודעות רגילים באתרים.
דוגמה להטמעה שמתוארת למעלה:
<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
בקטע הזה מוסבר איך להציג מודעות משלימות באמצעות Ad API.
הצגת מודעות נלוות לרשת המדיה
כדי להציג מודעות משלימות, קודם צריך לקבל הפניה לאובייקט Ad דרך אחד מהאירועים AdEvent שנשלחים מ-AdsManager. מומלץ להשתמש באירוע AdEvent.STARTED, כי הצגת מודעות משלימות צריכה לחפוף להצגת המודעה הראשית.
לאחר מכן, משתמשים באובייקט Ad הזה כדי לקרוא ל-getCompanionAds() ולקבל מערך של אובייקטים CompanionAd. כאן יש לכם אפשרות לציין את CompanionAdSelectionSettings, שמאפשרת לכם להגדיר מסננים במודעות הנלוות לפי סוג הקריאייטיב, אחוז ההתאמה הקרוב, סוג המשאב וקריטריונים של גודל.
מידע נוסף על ההגדרות האלה מופיע במאמרי העזרה של IMA CompanionAdSelectionSettings API.
עכשיו אפשר להשתמש באובייקטים CompanionAd שמוחזרים על ידי getCompanionAds כדי להציג את המודעות הנלוות בדף באמצעות ההנחיות הבאות:
- יוצרים בדף משבצת למודעה משלימה
<div>בגודל הנדרש. - בגורם המטפל באירועים של האירוע
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>
מודעות נלוות גמישות ב-Ad API
כשמשתמשים ב-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>