מדריך למתחילים בנושא תבניות מותאמות אישית

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

תבניות של תגים ומשתנים בהתאמה אישית מוגדרות בקטע Templates ב-Google Tag Manager. במסך התבניות הראשי יופיעו כל תבניות התגים או המשתנים שכבר הוגדרו במאגר התגים שלכם. תוכלו גם ליצור תבניות חדשות ממסך זה.

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

עורך התבניות

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

  • Info – הגדרת מאפיינים בסיסיים של התבנית, כמו התג או השם והסמל של המשתנה.
  • שדות – כלי עריכה חזותי להוספה של שדות קלט לתבנית התגים.
  • Code – מזינים JavaScript שמבוסס על ארגז חול כדי להגדיר את ההתנהגות של התג או המשתנה.
  • Permissions – תוכלו לראות אילו פעולות מותר לכם לעשות לתג או למשתנה שלכם.

יצירת התבנית הראשונה של תג מותאם אישית

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

1. כדי ליצור את התבנית הראשונה, לוחצים על Templates בחלונית הניווט הימנית ואז על הלחצן New (חדש) בקטע Tag Templates (תבניות תגים).

2. לוחצים על Info (מידע) ומגדירים את הערכים Name (חובה), Description (תיאור) וסמל (Icon) של התג.

Name הוא הטקסט שיוצג למשתמשים כשהם יטמיעו את התג הזה בממשק המשתמש של Tag Manager.

תיאור הוא פשוט מה שנשמע – תיאור קצר (200 תווים או פחות) של מה שהתג הזה עושה.

סמל מאפשר לבחור תמונה שתופיע כאשר התג יוצג ברשימות שתומכות במאפיין הסמל. תמונות סמלים צריכות להיות קובצי PNG, JPEG או GIF מרובעים בגודל של לא יותר מ-50kB ובגודל של לפחות 64px על 64px.

3. לוחצים על רענון כדי לראות תצוגה מקדימה של התבנית.

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

4. לוחצים על שדות כדי להוסיף שדות לתבנית של התג.

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

5. לוחצים על הוספת שדה ובוחרים באפשרות קלט טקסט. מחליפים את שם ברירת המחדל (למשל "text1") ב-"accountId". בתצוגה המקדימה של התבנית, לוחצים על רענון.

ליד השדה יופיע הסמל של בורר המשתנים המוכר (סמל של בורר המשתנים). המשתמשים בתבנית הזו יכולים ללחוץ על סמל בורר המשתנים כדי לבחור משתנים פעילים במאגר הזה.

השלב הבא הוא הוספת תווית לשדה:

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

מעל לשדה אמורה להופיע תווית טקסט עם הכותרת "Account ID".

7. לוחצים על הכרטיסייה קוד ומזינים קוד JavaScript שמבוסס על ארגז חול בעורך:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

שורת הקוד הראשונה, const sendPixel = require('sendPixel'), מייבאת את sendPixel API.

שורת הקוד השנייה, const encodeUriComponent = require('encodeUriComponent'), מייבאת את encodeUriComponent API.

השורה הבאה, const account = data.accountId;, מקבלת את הערך של accountId שנוצר בשלב 5, ומאחסנת אותו בקבוע שנקרא account.

בשורת הקוד השלישית, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, מוגדר קבוע url שמשורשר נקודת קצה קבועה של כתובת URL, שמתעדת את נתוני ניתוח הנתונים ואת מזהה החשבון המקודד שאיתו התג הוגדר.

השורה האחרונה, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), מריצה את הפונקציה sendPixel() עם הפרמטרים הנדרשים ושולחת בקשה לכתובת ה-URL שצוינה. הערכים data.gtmOnSuccess ו-data.gtmOnFailure מציינים ל-Google Tag Manager אם התג השלים את המשימה או נכשל, ואז Google Tag Manager משתמש בהם לתכונות כמו רצף תגים או מצב תצוגה מקדימה.

8. לוחצים על שמירה כדי לשמור את ההתקדמות. הפעולה הזו תטען לעורך התבניות את כל ההרשאות שזוהו.

לחלק מממשקי ה-API של התבניות משויכים הרשאות שקובעות מה הם יכולים או לא יכולים לעשות. כשמשתמשים ב-API של תבנית (כמו sendPixel) בקוד, Tag Manager מציג את ההרשאות הרלוונטיות בכרטיסייה Permissions.

9. לוחצים על Permissions כדי לקבוע לאילו דומיינים תהיה ל-sendPixel הרשאה לשלוח נתונים. ברשומה Send Pixels (שליחת פיקסלים), לוחצים על סמל ההרחבה (סמל ההרחבה) ומזינים https://endpoint.example.com/ בקטע Allowed URL Match templates (תבניות התאמה מותרות של כתובות URL).

כשמוגדרת תבנית תג לשליחת נתונים, צריך לציין Allowed URL Match Pattern (תבנית התאמה של כתובת URL מורשית) בהרשאה המשויכת כדי להגביל את המקומות שאליהם אפשר לשלוח את הנתונים. אם כתובת ה-URL שצוינה בקוד לא תואמת לדפוס התאמה מותר של כתובת URL, הקריאה ל-sendPixel תיכשל.

דפוס התאמה של כתובת URL חייב להשתמש ב-HTTPS ולציין גם את תבנית המארח וגם את תבנית הנתיב. המארח יכול להיות דומיין (למשל "https://example.com/") או תת-דומיין ספציפי (למשל "https://sub.example.com/"). הנתיב חייב להכיל לפחות "/". צריך להשתמש בכוכבית (*) בתור תו כללי לחיפוש כדי לציין תת-דומיין או דפוס נתיב בכל אורך (למשל "https://\*.example.com/test/"). הכוכבית היא תו כללי לחיפוש שילכד את התווים האפשריים השונים, "תווי בריחה (escape)", ופונקציה בתו בריחה (escape) ועשויה להיות תו כללי לחיפוש (כמו "מספר לוכסן", כגון "shop.example.com).https://example.com/\*.example.com/www.example.comblog.example.com\*https://example.com/\*

לציין דפוסי התאמה נוספים של כתובות אתרים בשורות נפרדות.

10. לוחצים על Run Code ומעיינים בחלון Console כדי לבדוק אם יש בעיות.

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

11. לוחצים על שמירה וסוגרים את עורך התבניות.

תבנית התג אמורה להיות מוכנה עכשיו לשימוש.

שימוש בתג החדש

תהליך היצירה של תג חדש שמשתמש בתבנית של תגים מותאמים אישית שהוגדרו לאחרונה הוא כמו כל תג אחר:

  1. ב-Google Tag Manager, לוחצים על Tags > New (תגים > חדש).
  2. התג החדש יופיע בקטע מותאם אישית בחלון תג חדש. לוחצים עליו כדי לפתוח את תבנית התג.
  3. ממלאים את השדות הנדרשים להגדרה של תבנית התגים.
  4. לוחצים על Triggering (טריגרים) ובוחרים את הטריגר המתאים להפעלת התג.
  5. שומרים את התג ומפרסמים את מאגר התגים.

יצירת התבנית הראשונה של משתנים מותאמים אישית

תבניות של משתנים מותאמים אישית דומות לתבניות של תגים, עם כמה הבדלים בולטים:

  • תבניות של משתנים מותאמים אישית חייבות להחזיר ערך.

    במקום לקרוא ל-data['gtmOnSuccess'] כדי לציין השלמה, המשתנים מחזירים ערך ישירות.

  • התבניות של משתנים מותאמים אישית משמשות בחלקים שונים של ממשק המשתמש של Tag Manager.

  • במקום לעבור אל Tags > New (תגים > חדש) כדי ליצור משתנה חדש על סמך המשתנה המותאם אישית, עוברים אל Variables > New (משתנים > חדש)

מדריך מלא ליצירת תבנית של משתנים מותאמים אישית זמין במאמר יצירת משתנה מותאם אישית.

ייצוא וייבוא

כדי לשתף תבנית מותאמת אישית עם הארגון שלכם, תוכלו לייצא את התבנית המותאמת אישית ולייבא אותה למאגרים אחרים של Tag Manager. כדי לייצא תבנית:

  1. ב-Tag Manager, לוחצים על Templates (תבניות).
  2. לוחצים על שם התבנית שרוצים לייצא מתוך הרשימה. התבנית תיפתח בעורך התבניות.
  3. לחצו על התפריט More Actions () ובחרו באפשרות Export (ייצוא).

כדי לייבא תבנית:

  1. ב-Tag Manager, לוחצים על Templates (תבניות).
  2. לוחצים על New (חדש). פעולה זו תפתח תבנית ריקה בעורך התבניות.
  3. לוחצים על התפריט More Actions () ובוחרים באפשרות Import.
  4. בוחרים את הקובץ .tpl שרוצים לייבא.