את המדריך הזה החלטתי לכתוב לאחר שנתקלתי באינספור שאלות לגבי “דברים שלא עובדים” בתג מנג’ר, כאשר המכנה המשותף בכולן זהה:
אם הייתם משתמשים בדיבאגר של תג מנג’ר, הייתם מוצאים את הבעיה תוך שניה.
אמנם הקלטתי בעבר מדריך מצולם על הדיבאגר של תג מנג’ר, אבל מאז גוגל עשו בו שינויים, וראיתי שעדיין הרבה אנשים לא משתמשים בו בצורה מספיק יעילה.
כמה הערות חשובות:
1. כמובן שצריך לדעת תג מנג’ר כדי להבין מה הולך פה, אז אם אתם עדיין לא מספיק בעניינים – אני ממליץ בחום על הקורס הדיגיטלי שלי על גוגל תג מנג’ר, שילמד אתכם את כל מה שצריך והרבה מעבר.
2. בכל מקרה אתם מוזמנים להצטרף לקבוצת הפייסבוק שלי “תג מנג’ר ישראל“, ולשאול כל מה תרצו על תג מנג’ר.
3. כדי לשמור על בהירות המדריך, היו דברים שהעדפתי לכתוב בצורה פשטנית גם אם מבחינה טכנית זה לא ההסבר המדוייק שלהם.
אז מה זה הדיבאגר של תג מנג’ר?
בצורה מאוד פשוטה – הדיבאגר של תג מנג’ר מציג לנו את כל הדברים שקרו במהלך הביקור וקשורים בצורה כזו או אחרת לתג מנג’ר.
מגיעים אליו על ידי לחיצה על Preview בצד הימני של המסך, והוא מכיל את כל המידע הדרוש כדי לדבג דברים שלא עובדים.
כדי שתבינו עד הסוף איך להשתמש בכלי, אני חייב להקדים כמה דברים.
קודם כל המדריך הזה נועד לאנשים שכבר יש להם נסיון כזה או אחר עם תג מנג’ר.
הרי אין טעם ללמד איך להשתמש בדיבאגר כדי לאתר תקלות – אם לא יודעים איך לייצור את הדברים שעלולים לגרום לתקלה…
דבר שני – אני רוצה להסביר כמה דברים בסיסיים שחובה לדעת כדי להבין איך להשתמש בדיבאגר.
ישנם 4 מרכיבים עיקריים בתג מנג’ר:
1. Tags – אלו התגים שנורים.
2. Variables – משתנים שמכילים כל מיני ערכים.
3. Triggers – טריגרים שמבוססים על variables ועל פיהם התג מנג’ר מחליט האם לירות את התג או לא.
אם תג לא פועל זה אומר שהטריגר שלו לא התקיים, ואם טריגר לא מתקיים, זה אומר שהערך של ה-variable עליו מבוסס הטריגר לא הכיל את הערך שרצינו שהוא יכיל.
למשל אם הטריגר שלי הוא Page URL contains /thanks זה אומר שיש variable בשם Page URL, והערך שלו צריך להיות /thanks כדי שהטריגר יתקיים, ולכן אם הערך של ה-variable יהיה /thankyou/ – התג כמובן לא יישלח.
אני מדגיש את זה כי כל מה שאנחנו בודקים בדיבאגר זה האם ה-variable שעליו מבוסס הטריגר, אכן הכיל את הערך שרצינו שהוא יכיל, בזמן שבו התג היה אמור להישלח.
4. המרכיב הרביעי הוא Data Layer – סוג של קופסת אחסון שמכילה כל מיני ערכים.
הערכים בדטאלייר בנויים מצמדים של key : value.
|
1 2 3 |
event: purchase, color: black, size: medium |
ה-key בשורה הראשונה נקרא event וה-value שלו הוא purchase.
בשורה השניה ה-key נקרא color וה-value שלו הוא black.
וכן הלאה.
חשוב לדעת שיש הבדל משמעותי בין מקרים בהם ה-key הוא event לבין מקרים שבהם ה-key הוא כל דבר אחר:
במקרים שה-key נקרא event, התג מנג’ר יודע לנקוט בפעולה על סמך הערך שנשלח בתור ה-value.
בכל מקרה אחר, התג מנג’ר רק שומר את הערכים שנשלחו בתוך הדטאלייר.
שימו לב ל-3 הערכים שדחפתי לדטאלייר:
הערך הראשון נדחף לתוך key בשם event, ולכן בדיבאגר תראו את הערך המלא (this_is_an_event).
הערכים השני והשלישי נדחפו לתוך ערכים של not_event ו-color, ולכן בדיבאגר אני אראה סתם Message.
אחרי ההקדמה הזו אפשר לגשת להסבר על הדיבאגר עצמו
כשאנחנו רוצים לבדוק האם תג מסוים נשלח או לא, אנחנו חייבים ללחוץ בצד שמאל על האיוונט הספציפי שהיה אמור לשלוח את התג.
אני מציין את זה כי הרבה אנשים לוחצים על Summary ורואים את כל התגים שנשלחו בעמוד, וזה כמובן לא מאפשר להם לדבג כמו שצריך.
בנוסף, אין טעם ללחוץ על Message, כי כמו שהסברתי קודם – תגים יכולים להישלח רק כשקורה event.
איך לדבג תגים שאמורים להישלח ב-URL מסוים?
בכל פעם שהעמוד נטען, הקוד של התג מנג’ר נשלח.
כאשר הסקריפט הזה פועל, נשלחים לדטאלייר 3 איוונטים:
האיוונט הראשון נורה ברגע שהקוד מתחיל לרוץ והוא נקרא gtm.js. בדיבאגר הוא מופיע בשם Container Loaded:
האיוונט השני נורה כשהתוכן של העמוד נטען והוא נקרא gtm.dom. בדיבאגר הוא מופיע בשם DOM Ready:
האיוונט השלישי נורה כשכל העמוד מסתיים להיטען והוא נקרא gtm.load. בדיבאגר הוא מופיע בשם Window Loaded:
אני נותן את כל ההקדמה הזו, כי כשאתם יוצרים טריגר שמבוסס על URL, אתם חייבים לבדוק מה סוג ה-Page View שבחרתם כדי להפעיל את האיוונט.
השימוש ב-URL בטריגרים הוא הפופולארי ביותר, אבל מה שאנשים אולי לא יודעים זה שיש 3 סוגים של URL:
כשאתם יוצרים את התג, ובוחרים את סוג הטריגר, יש לכם אפשרות לבחור בין Page View, DOM Ready או Window Loaded:
הטריגר שלפניכם אמנם נועד לרוץ כאשר ה-URL מכיל את המילה thanks, אבל מכיוון שסוג הטריגר הוא DOM Ready, אני חייב ללחוץ על DOM Ready בדיבאגר כדי לבדוק למה התג שלו לא נורה:
לאחר מכן אלחץ על התג שלי שמופיע תחת Tags Not Fired:
ואז אגלול ל-Firing Triggers ואבדוק איזה חלק של הטריגר לא התקיים.
במקרה שלי אני רואה ש-event באמת היה שווה gtm.dom (וזה בגלל שלחצתי בצד שמאל על DOM Ready), אבל ה-variable של Page URL לא הכיל את הערך הרצוי /thanks:
בשלב הזה אני אומר לעצמי “רגע. אם הוא לא הכיל את הערך הרצוי – מה הוא כן הכיל?”.
כדי לבדוק את זה אני הולך לעמודה של variables:
גולל למטה ובודק מה היה הערך של הוריאבל Page URL בזמן שהאיונט DOM Ready קרה:
ואני רואה שהוא באמת לא הכיל את הערך /thanks.
אמנם זו דוגמא פשוטה שאני בכלל לא צריך ללכת ל-Variables וכל זה, אבל תארו לעצמכם מה היה קורה אם הייתי מגדיר את הטריגר הבא (שימו לב לסולמית):
ולמרות זאת כשאני מבקר בעמוד lixfix.co.il/#thanks – התג לא נורה!
אני הולך לטריגר, ורואה שבאמת Page URL לא מכיל #thanks:
ואז אני עושה קצת חיפוש בגוגל, ומגלה שהוריאבל Page URL לא אמור בכלל לתפוס את הסולמית:
אם ככה, איך אני יכול ליצור טריגר שהתנאי שלו קשור לערך שנמצא אחרי הסולמית?
עוד קצת חיפוש בגוגל ולמידה, ואני יוצר את הוריאבל הבא:
הולך שוב פעם לדיבאגר, והפעם אני רואה שלמרות ש-Page URL לא הכיל את המילה thanks, הוריאבל החדש כן הכיל אותה!
כמובן שאני צריך לשנות את הטריגר בהתאם, אבל זה כבר לא העניין פה.
סיכום
הדיבאגר של תג מנג’ר הוא כלי עוצמתי שחובה להכיר אותו לעומק ולהשתמש בו.
במדריך התייחסתי רק לטריגרים של URL, אבל הבדיקה דומה בכל הטריגרים.
זה יכול להיות בדיקת CSS של אלמנטים (למשל הגדרתי טריגר שיפעל בלחיצה על אלמנט עם class מסוים והוא לא פועל), בדיקה של ערכים שאמורים להישלח אבל מכילים undefined, איווטים שנשלחים לפני הזמן, או כל דבר שרק תרצו.
אם החזקתם איתי עד עכשיו, אני חושב שאפשר לסכם את הנושא באופן הבא:
1. כל תג מופעל על ידי טריגר, שמוגדר באמצעות variable אחד או יותר.
אם התג לא פועל – סימן שהטריגר לא התקיים.
אם הטריגר לא התקיים – סימן שאחד ה-variables שמגדירים את הטריגר לא מכיל את הערך אותו הוא אמור להכיל.
את זה אנחנו בודקים בדיבאגר.
2. כל טריגר חייב להיות מבוסס על event כלשהוא שנשלח ל-dataLayer.
כדי לבצע את הבדיקה כמו שצריך, אנחנו צריכים ללחוץ על האיוונט הספציפי שמגדיר את הטריגר, ואז לבדוק למה התנאי לא התקיים.
בהצלחה.