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

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

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

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

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

עורך התבניות

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

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

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

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

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

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

שם הוא מה שיוצג למשתמשים כשהם יטמיעו את התג דרך ממשק המשתמש של Tag Manager.

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

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

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

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

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

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

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

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

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

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

תווית טקסט שנקראת "מספר חשבון" אמורה להופיע מעל לשדה.

7. לוחצים על הכרטיסייה Code (קוד) ומזינים 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 שמזהה את נקודת הקצה (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. לוחצים על Permissions כדי לחדד את הדומיינים שאליהם sendPixel מורשה לשלוח נתונים. בקטע שליחת פיקסלים, לוחצים על סמל ההרחבה () ומזינים את הערך https://endpoint.example.com/ בתבניות מורשות של כתובות URL.

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

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

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

10. לוחצים על Run Code (הפעלת קוד) ובודקים אם יש בעיה בחלון Console.

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

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

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

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

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

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

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

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

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

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

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

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

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

ייצוא וייבוא

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

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

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

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