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

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

התאמת גודל המודעה
טירגוט לפי מפתח/ערך
ארכיטקטורת בקשה בודדת (SRA)

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

מתחילים בטעינה ובאיפוס של ספריית ה-GPT. מוסיפים את הקטע הבא לקטע <head> של קובץ ה-HTML:

<script
  async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"
></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. מידע נוסף על נכסי קריאייטיב מחוץ לדף

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

מיקום מודעה דינמי

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

// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
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