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

לומדים את היסודות באמצעות דוגמה

במדריך הזה מפורט מידע נוסף על הצגה של מודעת בדיקה, ומפורטות בו מושגים בסיסיים נוספים שיעזרו לכם להפיק את המרב מספריית Google Publisher Tag (GPT). בין המושגים האלה:

גודל המודעה
טירגוט מפתח-ערך
ארכיטקטורה של בקשה בודדת

טעינת ספריית GPT

קודם כל צריך לטעון ולהפעיל את ספריית GPT. מוסיפים את הקוד הבא ל-<head> של מסמך ה-HTML:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

הפעולה הזו טוענת את ספריית GPT ומפעילה את האובייקטים googletag ו-CommandArray. אתחול האובייקטים האלה מאפשר להתחיל להשתמש במערך הפקודות של GPT באופן מיידי. הוסף את קוד ה-JavaScript שבהמשך לגוף הפונקציה הריקה שמוגדרת בקטע הקוד הזה.

הגדרת מיקומי מודעות

לאחר טעינת GPT, ניתן להגדיר מיקומי מודעות. הדוגמה הבאה מגדירה שלושה מיקומי מודעות עם פורמטים שונים של מודעות, מידות ואפשרויות מיקוד שונות.

משבצת מודעה בגודל קבוע

לפניכם משבצת מודעה פשוטה בגודל קבוע:

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

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

מיקום מודעת עוגן

הנה מיקום של מודעת עוגן, שמצורף לחלק התחתון של אזור התצוגה:

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

מיקומי עוגן הם סוג של פורמט מחוץ לדף, שמוגדר באמצעות השיטה defineOutOfPageSlot, ולא בשיטה הרגילה של defineSlot. למידע נוסף על קריאייטיבים של מחוץ לדף.

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

מיקום מודעה גמיש

הנה מיקום מודעה גמיש למודעה מותאמת:

// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

למיקומי מודעות גמישים אין גודל קבוע. מיקומי מודעות גמישים משתנים כדי להתאים לתוכן הקריאייטיבי מהמודעה. כדי להגדיר מיקומי מודעות גמישה באמצעות אפשרות הגודל fluid. מידע נוסף על גודל המודעות ואפשרויות הגודל הזמינות.

קביעת הגדרות ברמת הדף

אפשרויות הגדרה מסוימות של GPT חלות באופן גלובלי, ולא על מיקומי מודעות ספציפיים. אלה נקראות הגדרות ברמת הדף.

דוגמה לקביעת הגדרות ברמת הדף:

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

קטע הקוד מבצע שלוש פעולות:

מגדיר אפשרויות של מיקוד ברמת הדף, שחלות על כל מיקום מודעה בדף.
מפעיל את מצב 'ארכיטקטורה של בקשה יחידה' (SRA), שבמסגרתו בקשות לכמה מיקומי מודעות מרוכזים בבקשה אחת להצגת מודעה. SRA משפרים את הביצועים ונחוצים כדי להבטיח שהחרגות ומחסומים תחרותיים יכובדו, לכן מומלץ תמיד להפעיל את SRA. למידע נוסף על השימוש ב-SRA בצורה נכונה.
מפעיל את השירותים המצורפים למיקומי המודעות שלנו ומאפשרים ליצור בקשות להצגת מודעות.

מודעות לרשת המדיה

לסיום, מוסיפים את קטע הקוד הבא ל-<body> של הדף:

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

השדה הזה מגדיר שני גורמים מכילים של מיקום מודעה: banner-ad ו-native-ad. ערכי ה-id של הקונטיינר תואמים לערכים שסיפקתם כשהגדרתם את מיקומי המודעות מוקדם יותר בדוגמה הזו.

לאחר הגדרת כל מיקומי המודעות, תתבצע קריאה להצגת banner-ad. מאחר ש-SRA מופעל, הבקשה הזו לקריאה לתצוגה בודדת ומעבדת את כל מיקומי המודעות שהוגדרו עד לנקודה זו. במידת הצורך, תוכלו לשלוט בטעינה והרענון של מודעות ובהתנהגות של קיבוץ מודעות בצורה מדויקת יותר כשמפעילים SRA.

דוגמה מלאה

לפניכם קוד המקור המלא של הדף לדוגמה שמדריך זה מבוסס. אפשר גם להציג הדגמה אינטראקטיבית של הדף הזה.

JavaScript

TypeScript

כדי להתחיל:

שימוש ב-TypeScript