סוגי משתנים בגוגל תג מנג'ר

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

בפוסט הזה נעבור על המשתנים שנמצאים תחת התפריט User Defined Variables עם הרחבה על Page Elements יחד עם Listeners ומעקבים אוטומאטים. לעומת Built In Variables, ל-User Defined יש מגוון רחב יותר של אפשרויות וזאת הסיבה היחידה שבחרתי לפרט דווקא אותם. וזאת ההמלצה: כל עוד אפשר, תעבדו עם משתני Built-In. מה שאני מציע זה שלאחר או בזמן הקריאה תסתכלו על המשתנים שבתפריט ה-Built-In ותבינו את הקיצורים שנעשו עבורינו מראש, סך הכל רובם מבוססים על סוגי המשתנים שאני אציג בפוסט הזה.

תזכורת קטנה לפני שנתחיל, הערכים שחוזרים מהמשתנים מאפשרים:

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

היום אנחנו כאן, תפריט User Defined Variables:

משתנים מסוג ניווט (Navigation)

HTTP Referrer – מחזיר את כתובת ה-URL (או מרכיב מתוכה) של העמוד שהפנה את היוזר לעמוד הנוכחי. כלומר אם היוזר היה בעמוד X ועבר לעמוד Y אז HTTP Referrer יכיל את X. עמוד X יכול להיות האתר שלכם או אתר אחר.
URL – מחזיר את כתובת ה-URL (או מרכיב מתוכה).
אחת האפשרויות הטובות שאנחנו מקבלים היא שניתן להגדיר מקור חדש שממנו תרצו למשוך את אותה כתובת ה-URL. כלומר, זו לא חייבת להיות כתובת העמוד הנוכחית – תוכלו לדוגמא להגיש כתובת ממשתנה אחר ולהוציא ממנה מרכיב מסוים.

הוצאת ערך של פרמטר (id) מכתובת URL שמגיעה ממקור חדש:

מהם אותם “מרכיבים” בתוך ה-URL?
נפרק את הכתובת הבאה ונראה לאילו מרכיבים יש לנו גישה:
http://site.com/path/?x=1#hash

Full URL – מחזיר את הכתובת המלאה כפי שהיא
Host Name – מחזיר את הדומיין site.com
Path – מחזיר את הנתיב לעמוד /path/
Query – מחזיר את מחרוזת הפרמטרים x=1 או אם תבחרו תוכלו לבקש להוציא את הערך של x בלבד ואז התגובה תהיה 1 או undefined אם לא קיים פרמטר כזה
Fragment – מחזיר את ה-hash של העמוד במקרה הזה hash

משתני עמודים (Page Variables)

1st Party Cookie – מאפשר לכם לגשת ולהחזיר ערך של עוגיה שנשתלה באתר. הכוונה ב-1st Party היא שהעוגיה נשתלה תחת הדומיין שלכם ולא יושבת בדומיין אחר כפי שמקובל ברשתות פירסום שעושות רימרקטינג כמו אדוורדס ופייסבוק – עוגיות כאלו מכונות עוגיות צד שלישי (3rd Party Cookies).
Custom JavaScript – מריץ פונקציה אנונימית ב-Javascript ומחזיר את הערך שהיא מחזירה (return). סוג מאד גמיש ועוצמתי, כל כך עוצמתי שבתיאוריה ניתן לבנות באמצעותו כמעט את כל סוגי המשתנים שקיימים בתג מנג’ר וזה בכמה שורות קוד בודדות אז תארו לעצמכם כמה כח יש בדבר הזה כשמתחילים לכתוב סקריפטים קצת יותר מורכבים.
Data Layer Variable – קורא ערך שנדחף לתוך ה-dataLayer מהעמוד. משתנה מאש שימושי שכן זה מסוגל לקבל נתונים מתוך העמוד שלכם אלו יבואו בדרך כלל מהמתכנת.
JavaScript Variable – מחזיר ערך של משתנה Javascript גלובלי בעמוד. זה לא הזמן והמקום להסביר מה המשמעות של משתנים גלובלים ב-JS, רק נאמר שכל איש פיתוח זוטר מודע לכך שרצוי שלא להשתמש במשתנים גלובלים. באתרים קטנים-בינוניים מפתחים לפעמים קצת מחפפים כך שאולי תוכלו לגשת למשתנה שכזה ולהעזר בו מתישהו.

משתני אלמנטים (Page Elements)

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

רגע מה זה “אלמנט”?
אלמנט הוא למעשה תגית HTML אחת שנוכחת במסמך (DOM). תגית שכזו יכולה להיות לדוגמא: תגית <a> (לינק), תגית <h1> (כותרת), תגית <img> (תמונה) והרשימה עוד ארוכה. כל תגית כזו מכילה עשרות תכונות שונות ותג מנג’ר מאפשר לגשת בקלות לתכונות היותר שימושיות ולהציב את אחת מהן שנבחר כערך במשתנה. התכונות השימושיות שלרשותכם תהיינה:

הטקסט של התגית
ה-URL של התגית (במידה וזה לינק)
ה-ID של התגית
ה-Classes של התגית
תכונה (Attribute) מסויימת שתבחרו (שדה חופשי)

Auto-Event Variable – מחזיר אלמנט או ערך ממנו שנוצר כתוצאה מאירוע שתג מנג’ר האזין לו כמו הקלקה על אלמנט או שיגור טופס. על מנת להפעיל את האזנות הללו תצטרכו להפעיל טריגר שיודע לבצע האזנה כמו Link Click, Form Submission – ברגע שתייצרו את הטריגר הזה תג מנג’ר ידחף באופן אוטומאטי איבנטים לתג מנג’ר על בסיס פעולות שהמשתמש עשה בעמוד ויציב לתוך המשתנה את האלמנט שעליו בוצעה הפעולה.
שימו לב: כבר לא נהוג להשתמש ב-Auto Event Variable, במקומו נהוג להשתמש במשתנים כמו Click Element ו-Click URL (מקבוצת Built-In Varables). ההבדל היחיד הוא שאלה מותאמים לפי סוג האירוע לעומת Auto Event Variable שלא מבדיל.
DOM Element – מחזיר אלמנט או ערך ממנו שקיים בעמוד בעת עלייתו. לדוגמא בעמוד מוצר זה יכול להיות מספר קטלוגי של המוצר או שם המוצר. אני בעד להביא מידע שכזה דרך ה-dataLayer בצורה מסודרת ומבוקרת אבל זה לפעמים לא אפשרי מסיבות כאלו ואחרות או שרוצים לבדוק משהו זמני – כאן דווקא מתאים להוציא את הערך עם הסוג כזה של משתנה.

האופציות שיפרסו בפניכם כשתבחרו לקלוט משתנה מסוג אלמנט:

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

התניה על בסיס חוק CSS, הכרחית כשרוצים להפעיל הטריגר המבוסס על מיקום תגית במסמך:

בדוגמא הקלאסית הזו אני מפעיל טריגר בתנאי שהיוזר מקליק על תמונה היושבת ב-div שמייצג את הגלריה בעמוד. מאחר ובעמוד ישנן עוד תמונות רבות אני בוחר להשתמש בחוק CSS שיגדיר בצורה ברורה שאני מעוניין לפגוע בכל התמונות שנמצאות ב-div שהמזהה שלו (id) הוא gallery. גם אם יהיו שם 3 תמונות הפגיעה תהיה בשלושתן.

עזרים (Utilities)

Constant – משתנה פשוט במיוחד, מחזיר ערך סטטי שהזנו לתוכו מראש. שימוש נפוץ: שמירת מזהה של חשבונות, לדוגמא זה של גוגל אנליטיקס: “UA-XXXXX-YY”. עוזר במקרה שאתם עובדים עם 2 חשבונות שונים מאותה מערכת – יהיה לכם יותר נח לעבוד עם המזהה של ה-Property שמית “main account” מאשר באמצעות מזהה שמכיל סתם ספרות רנדומליות.
Custom Event – מחזיר את שם האירוע (Event) שנדחף ל-dataLayer. אני רואה אותו כמשתנה הליבה של הכלי – רק על בסיס אירועים אנחנו רשאים לירות תגיות. לכן עדיין לא ברורה לי הסיבה שלשמה משתמש יבחר להסיר או לייצר משתנה חדש שכזה שכן זה בכל אופן חלק בלתי נפרד מהמערכת.
Environment Name – מחזיר את שם הסביבה שניתנה לקונטיינר. יכול להיות שימושי במידה ותרצו להגביל או להפעיל תגיות מסוימות בסביבות מסוימות.
סביבות בתג מנג’ר (Environments) מאפשרות לצוותי פיתוח לעלות גירסאות של תג מנג’ר לפי סביבות פיתוח שונות כגון: סביבת פיתוח, בדיקות, Staging, פרודקשן. כל סביבה שכזו מקבלת קונטיינר משל עצמה ובכך ניתן לייצר Workflow מסודר: העלאת גירסה לסביבה מסוימת, לאשר אותה ולעלות אותה לסביבה הבאה.
Lookup Table – המקביל ל-switch בתיכנות או VLOOKUP באקסל. המשתנה מקבל ערך מסוים מצד אחד ומהצד השני מחזיר ערך חדש לפי התאמת מחרוזות שניתנות מראש. ההתאמה חייבת להיות מדוייקת (Exact) ובמידה ושום תנאי לא יתאים לערך שהמשתנה קיבל ניתן להגדיר ערך ברירת מחדל. (ראו דוגמא בתמונה למטה)
Random Number – מחזיר מספר אקראי בין 0 ל-2147483647. למען האמת לא יצא לי להשתמש בו אף פעם. צריך להיות שימושי לדגימות משתמשים לצורכי Sampling או ניסויים.

Lookup Table, המתכנת של האתר מעביר את שפת העמוד בפורמט אחד בעוד שהתגית דורשת את השפה של העמוד בפורמט שונה:

מידע על הקונטיינר (Container Data)

Container ID – מחזיר ID של הקונטיינר “GTM-XXXXXX”.
Container Version Number – מחזיר את מספר הגירסה של הקונטיינר שלכם.
Debug Mode – מחזיר True / False בהתאם למצב Preview (כלומר פעיל\לא פעיל). לפעמים אני משתמש בזה בקונטיינרים גדולים שאני רוצה לדלל תגיות בזמן בדיקות כדי לשפר ביצועים.

עד כאן לנושא זה – נפגש בפוסט הבא