אולי כדאי לכם לשייך את מיקומי המודעות בדף 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 יוצגו כראוי:
- טוענים את ה-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 וב- שמספק קוד לדוגמה לתרחישים שונים. עבור HTML5 SDK, עליך תצטרכו להוסיף קוד 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>
רוצה לנסות?
אפשר לראות את קוד העט הבא להטמעה פעילה.
דוגמה 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: מיקומי מודעות נטענים מראש
במקרים מסוימים, ייתכן שתצטרכו להציג משהו במיקום המודעה לפני נשלחה בקשה להצגת המודעה הנלווית. בדרך כלל נשלחות בקשות להצגת מודעות נלוות עם מודעת וידאו. בקשה זו עשויה להתרחש אחרי בטעינה. לדוגמה, מודעה נלווית יכולה להיטען רק אחרי שהמשתמש לוחץ על סרטון מסוג 'קליק להפעלה'. במקרה כזה, צריך את היכולת לבקש מודעה רגילה שתמלא את מיקום המודעה לפני שליחת בקשה להצגת מודעה נלווית. שפת תרגום כדי לתמוך בתרחיש לדוגמה הזה, אפשר להציג מודעות אינטרנט רגילות משבצת נלווית. מוודאים שמודעות האינטרנט מטורגטות למשבצות הנלוות. אפשר לטרגט למשבצות את המודעות הנלוות באותו אופן שבו מגדירים טירגוט מיקומי מודעות רגילים באינטרנט.
הערה: הקוד לדוגמה הבא זהה בדיוק כפי שצוין בדוגמה 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>בגודל הנדרש שבדף. - ב-event 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>
מודעות נלוות פעילות ב-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>