דף זה תורגם על ידי Cloud Translation API.

מודעות נלוות

מומלץ לשייך את מיקומי המודעות ב-HTML בדף למיקומי מודעות וידאו או למיקומי מודעות שכבת-על. הקשר הזה בין משבצות המודעות המשויכות נקרא יחסי 'מאסטר-תומך'.

בנוסף לשליחת בקשות למודעות וידאו ולמודעות שכבת-על ראשיות, אפשר להשתמש ב-IMA SDK כדי להציג מודעות HTML נלוות. המודעות האלה מוצגות בסביבת HTML.

שימוש במודעות נלווה

כדי להשתמש במודעות נלווה:

1. הזמנת מודעות נלווים

קודם צריך להזמין את המודעות הנלוות שרוצים להציג עם מודעות המאסטר. אפשר לנהל את התנועה של מודעות נלווה ב-Ad Manager. אפשר להציג עד שש מודעות נלוויות לכל מודעת מאסטר. השיטה הזו, שבה קונה יחיד שולט בכל המודעות בדף, נקראת גם חסימה.

2. שליחת בקשה להצגת מודעות נלוות

כברירת מחדל, מודעות נלוויות מופעלות בכל בקשה להצגת מודעה.

3. הצגת מודעות נלוויות

יש שתי דרכים להציג מודעות נלווה:

באופן אוטומטי באמצעות Google Publisher Tag ‏ (GPT)
אם אתם משתמשים ב-GPT כדי להטמיע את המודעות הנלוות, הן יוצגו באופן אוטומטי כל עוד יש מיקומי מודעות נלוות שהוגדרו בדף ה-HTML והמודעות האלה רשומות ב-API (כלומר, מזהה ה-div ב-JavaScript וב-HTML חייב להיות זהה). אלה כמה מהיתרונות בשימוש ב-GPT:
- מודעוּת למיקום של Companion
- מילוי חוסרים של מודעות נלווה מהרשת של בעל התוכן הדיגיטלי, אם התגובה של VAST מכילה פחות מודעות נלווה מאשר מספר המיקומים שהוגדרו בדף ה-HTML
- מילוי אוטומטי של מודעות נלוויות אם חסרה מודעת וידאו
- מיקומי מודעות נלווים שמוגדרים מראש לנגני וידאו שמופעלים בקליק
- עיבוד אוטומטי של קובצי companion, כולל 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).

כדי שהחברים שלכם יוצגו בתרחיש הזה, עליכם לטעון את התסריט של שרת ה-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>

רוצה לנסות?

תוכלו לראות את ההטמעה העובדת ב-codepen הבא.

דוגמה 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>

רוצה לנסות?

תוכלו לראות את הקוד הבא ב-CodePen כדי לראות הטמעה עובדת.

שימוש במודעות נלווה באמצעות Ad API

בקטע הזה מוסבר איך להציג מודעות נלווה באמצעות ה-API Ad.

הצגת מודעות נלוויות

כדי להציג מודעות נלווה, קודם צריך לקבל הפניה לאובייקט Ad דרך אחד מהאירועים AdEvent שנשלחים מה-AdsManager. מומלץ להשתמש באירוע AdEvent.STARTED, כי הצגת המודעות הנלוות צריכה להתרחש במקביל להצגת המודעה הראשית.

לאחר מכן, משתמשים באובייקט Ad הזה כדי לקרוא ל-getCompanionAds() כדי לקבל מערך של אובייקטים מסוג CompanionAd. כאן יש לכם אפשרות לציין את הערך CompanionAdSelectionSettings, שמאפשר להגדיר מסננים במודעות הנלוויות לפי סוג הקריאייטיב, אחוז ההתאמה הקרובה, סוג המשאב וקריטריונים של גודל. מידע נוסף על ההגדרות האלה זמין במסמכי העזרה של HTML5 API.

עכשיו אפשר להשתמש באובייקטים מסוג CompanionAd שמוחזרים על ידי getCompanionAds כדי להציג את המודעות הנלוות בדף לפי ההנחיות הבאות:

יוצרים בדף מיקום של מודעת וידאו נלווית <div> בגודל הנדרש.
בטיפול באירוע STARTED, מפעילים את getAd() כדי לאחזר את האובייקט Ad.
משתמשים ב- 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 companion size ב-Ad Manager. בתמונה הבאה מוסבר איפה מגדירים את הערך הזה.

תמונה שמראה את ההגדרות של מודעות נלוויות ב-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>