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

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

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

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

עורך התבניות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תווית טקסט בשם Account ID (מספר חשבון) תופיע מעל השדה.

7. לוחצים על הכרטיסייה Code (קוד) ומזינים JavaScript ב-Sandbox בעורך:

// 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'), מייבאת את API של sendPixel.

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

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

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

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

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

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

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

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

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

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

10. לוחצים על Run Code (הרצת קוד) ובודקים אם יש בעיות בחלון המסוף.

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

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

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

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

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

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

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

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

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

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

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

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

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

ייצוא וייבוא

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

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

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

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