משתנים בגוגל תג מנג’ר – עקרונות

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

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

הידעת? בימי הבריאה של גוגל תג מנג’ר למשתנים ניתן השם המזעזע למדי Macros. לשימחתינו השם המוזר הזה הוחלף ל-Variables.

מה זה משתנים בגוגל תג מנג’ר בכלל?

בדומה לתיכנות, משתנה בתג מנג’ר הוא סוג של רכיב המוגדר תחת שם מסוים שנקבע מראש כמו Page URL או Event. לתוכך אותו רכיב ניתן להציב ערך ולאחר מכן להשתמש בערך הזה בטריגרים בתוכן של תגיות או במשתנים אחרים. השימוש נעשה ע”י קריאה פשוטה לשם המשתנה: {{Page URL}} למשל מחזיר את כתובת ה-URL של העמוד.

בגוגל השתדלו עד כמה שאפשר להקנות גישות מהסוג הזה לרכיבים ולמידעים בסביבה בה המשתמש נמצא: Web, Mobile App ולאחרונה קיבלנו את AMP.

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

המשתנים יכולים להכיל את כל סוגי הטיפוסים ב-Javascript, הנפוצים מביניהם יהיו:

  • מספר (Number)
  • מחרוזת או אם תרצו טקסט (String)
  • מערך (Array)
  • אובייקט (Object)
  • פונקציה (Function) – פונקציה שמסוגלת להחזיר אולי איזה שתרצו
  • אלמנט (Element) – תגית HTML (שמכילה מגוון תכונות שניתן לפנות אליהן)

רשימת משתנים כפי שהם מופיעים ב-Debugger של תג מנג’ר

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

השפעה על כל מרכיבי היסוד

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

  • בתגית כחלק מהתוכן של התגית
  • בטריגר כמרכיב לתנאי
  • במשתנה אחר ככלי עזר ליצירת משתנה חדש

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

דוגמא למשתנה שעושה שימוש במשתנה אחר הצגתי בפוסט על עבודה עם עברית בגוגל תג מנג’ר. שם אני מסביר קצת על encoding ומראה כיצד ליצור את המשתנה {{Page URL decode}} שמפענח כתובות URL בעברית. המשתנה החדש עושה שימוש במשתנה הקיים {{Page URL}}:

הדבר מעיד על כך שגוגל תג מנג’ר מבצע 2 סבבי “הצבת ערכים במשתנים” שבאים בזה אחר זה זאת כדי להבטיח שמשתנה אחד “מוכן” לפני שימושו במשתנה אחר. לפי הדוגמא הנ”ל ניתן להבין ש-Custom Javascript הוא מסוג המשתנים שנקבעים בסבב השני. גם סוג המשתנה Lookup Table שערכו מבוסס על משתנה שהוגש לו מבעוד מועד נכנס לקטגוריה זו.

Built-In & User Define Variables

כשתבואו ליצור משתנה חדש בתג מנג’ר, תתבקשו לבחור אחת מ-2 אופציות: יצירת משתנה מובנה (Built-In Variable) או משתנה על בסיס הגדרה שלכם (User Define Variable). מה ההבדל?

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

משתני ה-Built-In הם סוג של קיצורי דרך למשתנים שימושיים שיצרו עבורינו מראש. כך קיבלנו את {{Page URL}} שהוא סך הכל משתנה שניתן ליצור די בקלות דרך User Define Variables, סך הכל עלינו לבחור משתנה מסוג URL עם הפניה ל-Full URL. אם לא נכנס לדקויות, ניתן לומר שאפשר ליצור כל משתנה Built-In באמצעות משתנה User Define.

לפני שאתם יוצרים משתנה ודאו שזה לא זמין ב-Build-In. רוב השימושים הנפוצים כבר ניבנו ואלו נגישים בלחיצת כפתור. אין צורך ליצור אותם מאפס.

כיצד משתנים באים ליידי ביטוי ב-dataLayer?

ה-dataLayer הוא אובייקט של גוגל תג מנג’ר הקולט נתונים הנדחפים אליו ומסוגל להמיר אותם למשתנים שהוגדרו מבעוד מועד בממשק של תג מנג’ר.

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

עיקרון ראשון:

בכל פעם שה-dataLayer מקבל עידכון (פקודת dataLayer.push) כל המשתנים עוברים ריענון ומתעדכנים (לדוגמא לפי ערכים חדשים שנדחפו ל-dataLayer). כך נוצר מעגל שחוזר על עצמו בכל push מחדש:

  1. ה-dataLayer מקבל עידכון ב-push.
  2. המשתנים מתעדכנים בהתאם.
  3. עם המשתנים החדשים, הטריגרים נבדקים – אלו שעונים על כל התנאים מופעלים.
  4. יריית תגיות בהתאם לטריגרים שהופעלו והוצמדו לתגיות.

ושוב חוזר חלילה… הדוגמא הנפוצה ביותר לכך בתג מנג’ר היא המשתנה {{Event}}. לרוב {{Event}} מקבל ערך חדש בכל push ומתעדכן. ל-{{Event}} יש משקל משמעותי ביותר בכל הנוגע לתיזמון הפעלת הטריגרים שאלה כאמור משפיעים על יריית תגיות.

עיקרון שני:

ערך של משתנה נשמר בין דחיפות ל-dataLayer כל עוד לא בא ערך חדש שיחליף את הערך הקיים. בדוגמא הבאה נעשה 2 דחיפות ונראה איך הערך User ID שורד מדחיפה אחת לאחרת.

דחיפה ראשונה: דוחף את הדאטה user עם הערך “User123” שיוצב לתוך המשתנה {{User ID}}.

dataLayer.push({user: "User123"});
Variable Name Variable Value
Revenue undefined
User ID “User123”

דחיפה שניה: דוחף את הדאטה revenue עם הערך 250 שיוצב בתוך המשתנה {{Revenue}}.

dataLayer.push({revenue: 250});
Variable Name Variable Value
Revenue 250
User ID “User123”

שימו לב: בדחיפה השניה “User123” נשמר ואני יכול להשתמש בו גם לאחר דחיפת הנתונים חדשים ל-dataLayer. במידה ובדחיפה הבאה הייתי דוחף את user בשנית הפעם עם ערך “User456”, לאותה דחיפה המשתנה {{User ID}} היה מכיל את “User456” ויותר לא הייתי יכול לגשת ל-“User123”.

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

הצבת ערך למשתנה {{Revenue}}
ניתן להבחין גם שהמשתנה קשור ל-2 תגיות – דוגמא מיד

דוגמא: העברת רווחיות בפיקסל של אדוורדס

סנריו נפוץ למדי מאתרי קומרס יהיה הפעלת תגית המרה של גוגל אדוורדס והעברת רווחיות רכישה. כך זה עובד:

  1. אני יוצר את המשתנה Revenue ומורה לו לאסוף את הערך מה-dataLayer.
  2. ברגע ההמרה המתכנת דוחף לתוך ה-dataLayer את ערך הרכישה.
  3. הערך הרכישה נקלט לתוך המשתנה {{Revenue}}.
  4. טריגר בשם Transaction מופעל בתנאי שנעשתה רכישה (ראו טיפ בהמשך).
  5. הטריגר מחובר לפיקסל ההמרה של אדוורדס.
  6. לתוך התגית אני מזין את הערך של המשתנה {{Revenue}}.

טיפ: זיהוי אם משתנה מסוים קיים

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

הדרך שבא נהוג לאבחן האם משתנה מסוים קיים כבר בשלב האיתחול היא לוודא האם אותו משתנה לא שווה ל-undefined או במילים אחרות האם הוא לא “לא קיים”.

משתנה שלא “לא קיים” – חייב להיות קיים (פילוסופי משהו…)

לסיכום

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