גוגל תג מנג’ר למתקדמים – עבודה עם הדטאלייר

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

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

אז נגיד שיש לי את שני התמונות הללו ואני רוצה לשלוח איוונט כאשר גולשים לוחצים עליה, ולשלוח את שם הקובץ של התמונה, favicon או nocivaf (שזה בעצם favicon הפוך, רק לצורך הדוגמא) בתוך אחד הערכים של האיוונט:

באופן הפשוט אני יכול פשוט להשתמש ב-Click URL, שזה בעצם ה-URL של האלמנט עליו הגולש לחץ, כמו שאתם רואים כאן:

אבל זה פחות טוב לי, כי ה-URL הזה ארוך מדי ואני מעוניין רק בחלק הסופי – כלומר השם של הקובץ ללא כל יתר החלקים של כתובת התמונה (nocifav במקרה שלנו).

בגדול מה שאני צריך לעשות זה ליצור variable מסוג Custom JavaScript בגוגל תג מנג’ר, ולכתוב שורת קוד קטנה שתחלץ לי את השם של התמונה מתוך כל ה-path שלה.

כלומר אם במקרה שלנו ה-path של התמונה הראשונה הוא: https://www.lixfix.co.il/wp-content/uploads/2015/11/favicon.png

ואילו של התמונה השניה הוא: https://www.lixfix.co.il/wp-content/uploads/2016/03/nocivaf.png.

אז אני צריך לגזור את הכתובת ולחלץ ממנה את המילה favicon או novicaf (שזה favicon אבל הפוך), בהתאם למה שהגולש לחץ עליו.

או במילים אחרות:

1. קודם כל אני צריך לזהות את האלמנט שעליו הגולש לחץ גם בלי לדעת מראש מה ה-ID או ה-Class של האלמנט.

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

זיהוי האלמנט עליו הגולש לחץ

כדי לזהות את האלמנט עליו הגולש לחץ אני אשתמש בפיצ’ר של auto-event listeners בגוגל תג מנג’ר, שבוודאי השתמשתם בו הרבה פעמים בטריגרים של Click או Form.

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

לאחר מכן תהיה לנו אפשרות להשתמש ב-variables השונים של Clicks או Forms, והערכים של ה-variables הללו ישתנו בהתאם לאלמנט שאיתו בוצעה האינטרקציה:

למשל Click Element זה כל האלמנט (עליו הגולש לחץ), Click Classes זה הקלאס של האלמנט (עליו הגולש לחץ). וכו’ וכו’

אבל איך נדע איזה ערכים נדחפים לדטאלייר בלי לפבלש את הקונטיינר?

באופן עקרוני מה שצריך לעשות זה להשתמש ב-variable של Click Element בתוך Custom JS Variable, ולחלץ ממנו את השם של הקובץ.

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

אבל עזבו את הדוגמא שלי – מה עושים כשמדובר בקוד מורכב יותר שעושה מניפולציה על variables וצריך לעשות לו דיבאגינג מורכב יותר?

בדיוק בשביל זה אני רוצה להציע פתרון אחר והרבה הרבה יותר פשוט.

כדי לממש את הפתרון נצטרך להשתמש בתוסף שימושי מאוד לכרום בשם GTM Sonar, שמאפשר לנו לדמות את הפעולה של ה-listeners השונים, ולראות את הערכים שהיו נדחפים לדטאלייר עוד לפני שהגדרנו ופיבלשנו את התגים השונים בתג מנג’ר.

למי שלא יודע איך להשתמש בתוסף, אז כל שעלינו לעשות זה לבחור את ה-listener אותו אנחנו רוצים לדמות ואז ללחוץ על Switch On.

לאחר מכן נעשה קליק על האלמנט (במידה ובחרנו Click Listener), נלך ל-console של הדפדפן ונכתוב debugDL וזה מה שנקבל:

מה שקיבלנו פה זה פשוט מערך array שמדמה את הפעולה של הדטאלייר.

אני לא רוצה להכנס פה להגדרות יותר מדי טכניות אז אגש לעניין ועל הדרך אסכם מה היה לנו עד עכשיו –

1. כמו שאתם זוכרים אני רוצה לקחת את ה-URL של התמונה עליה הגולש לחץ, ומתוכו לחלץ את שם הקובץ של התמונה.

2. מכיוון שהאלמנט עליו לחצו נכנס לתוך הדטאלייר, אני צריך לגשת לאותו אלמנט ולהפעיל עליו את ה-Javascript שיעשה לי את החילוץ הזה.

3. כדי לגשת לאלמנט בתג מנג’ר אני אכתוב {{Click Element}}, אבל כדי לגשת אליו מחוץ לתג מנג’ר אצטרך להכנס לתוך המערך ולהוציא אותו משם.

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

debugDL[0][“gtm.element”]

כלומר אם בתוך המערך יש ערכים של gtm.element, gtm.elementClasses, gtm.elementId וכו’ (כמו שאפשר לראות בתמונה הקודמת), אז כדי לגשת אליהם אני צריך לשים אותם בתוך גרשיים ובתוך סוגריים מרובעות, שלא כמו אובייקט JS רגיל אליו הייתי ניגש באמצעות נקודה.

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

כדי לבדוק איפה הערך הזה נמצא אני אפתח את האובייקט של gtm.element ואחפש את ה-key שבו נמצאת הכתובת של התמונה. כפי שאתם רואים זה נמצא ב-currentSrc (או אם תרדו יותר למטה תראו את זה ב-src):

כעת מה שנשאר לנו זה לוודא שאנחנו באמת מצליחים לקבל את הערך הנכון של כתובת התמונה, ואז לכתוב את ה-JS שיחלץ את השם של הקובץ.

במקרה שלנו:

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

וזהו זה.

סיכום

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