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

במדריך הבא מוסבר בהרחבה על הצגת מודעה לבדיקה, ומוסבר על מושגים בסיסיים נוספים שיעזרו לכם להפיק את המקסימום מספריית 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.";
}

משבצות עוגן הן סוג של פורמט מחוץ לדף, שמוגדר באמצעות ה-method 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