איך לחבר בין הוטג’ר וגוגל אנליטיקס באמצעות תג מנג’ר

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

הכל התחיל כששמתי לב שיש לי באג בדף הנחיתה של All Things Data, שמונע ממשתמשי אינטרנט אקספלורר (גרסא 11 בווינדוס 7 בלבד) לגלול את העמוד למטה.

שימו לב איך זה נראה בהוטג’ר:

https://insights.hotjar.com/p?site=118223&recording=90899037&token=7eea80ad309a9c953a1a1757c309dcb8

https://insights.hotjar.com/p?site=118223&recording=96194123&token=8446ce04bc34aa547e1cb93f3242f4ec

https://insights.hotjar.com/p?site=118223&recording=95384393&token=71d095634c156402c95f28c2f48c74f3

https://insights.hotjar.com/p?site=118223&recording=90860970&token=431020beb0d86aaae5214c1fb911bdcb

https://insights.hotjar.com/p?site=118223&recording=87622308&token=8503589bb5671cbaf24f64a19c5e1878

ועוד ועוד.

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

האסטרטגיה לפתרון

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

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

בצורה כזו ארוויח 2 דברים:

1. אוכל לקבל עוד נתונים על הגולש שלא קיימים בהוטג’ר (למשל – האם ביצע רכישה ובאיזה סכום).

2. אוכל לקחת מקבץ של Hotjar IDs, ליצור מהם סגמנט בגוגל אנליטיקס ולנתח את אופי ההתנהגות שלהם בתור קבוצה.

איך נעשה את זה בפועל

כל גולש שנכנס לאתר מסומן ע”י הוטג’ר מקבל יוזר ID שנראה כך XXXXX-YYYYYYYYY, כאשר ה-X זה המזהה של היוזר וה-Y זה מספר כלשהוא שמשמש את המערכת:

אנחנו רוצים לשלוף את החלק הראשון של ה-X ולכן נלך לתג מנג’ר וניצור Custom JS Variable עם הקוד הבא:

function() {return hj.property.get(‘userId’).split(‘-‘).shift()}

מה שהמשתנה הזה עושה זה מחלץ את הערך של userId, ומחזיר רק את החלק הראשון שלו שמכיל את היוזר ID בפועל (כל היתר פרמטרים שנועדו לשימוש המערכת).

עכשיו זה קצת מורכב אז תחזיקו טוב –

אנחנו בעצם צריכים לשלוח את המשתנה Hotjar userId בתור custom dimension, שנשלח ביחד עם ה-pageview לגוגל אנליטיקס.

למי שלא מכיר, Custom Dimension בגוגל אנליטיקס (לחצו על הלינק להסבר נוסף) הוא בעצם “מדד” שלא נמצא באופן דיפולטיבי במערכת, והוא מאפשר לנו לשלוח לאנליטיקס כל נתון שנרצה ולהציג אותו בדוחות לצד המטריקות השונות.

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

הבעיה היא – שהתגים בגוגל תג מנג’ר נשלחים באופן אסינכרוני, כלומר השליחה של תג מסוים לא תלויה בשליחה של תג אחר.

במילים אחרות – אם שמנו לתג של הוטג’ר טריגר של All Pages, וגם לתג של גוגל אנליטיקס שמנו טריגר של All Pages – שניהם will be fired (איך אומרים את זה בעברית?) באותו זמן בדיוק.

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

זה לא כזה מסובך אבל קשה להסביר את זה במילים, ולכן הכנתי איור קטן שיסביר לכם את המצב שאנחנו לא רוצים שיקרה:

במילים אחרות – אנחנו צריכים לוודא שהערך של Hotjar userId אכן זמין כאשר ה-pageview נשלח, אחרת ה-custom dimension יישלח ריק.

אז תכלס, מה עושים?

נורא פשוט.

נגדיר שתג ה-pageview של גוגל אנליטיקס יישלח בטריגר הרגיל שלו, All Pages, ללא תוספות מיוחדות.

התג של הוטג’ר יישלח גם הוא בטריגר של All Pages:

כעת ניצור תג נוסף מסוג Google Analytics – Event, נגדיר אותו בתור non-interaction (כלומר האיוונט לא נחשב לאינטרקציה ולכן לא ישפיע על הבאונס רייט שלנו), ונגדיר את הטריגר שלו בתור gtm.load שקורה עשרות השניה אחרי ה-All Pages.

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

הכנסתי את ה-variable – Hotjar userId גם בתור custom dimension וגם בתור label סתם כדי שיהיו 2 אפשרויות לשחק עם המידע אבל כמובן שה-label הוא לא חובה.

הגדרת ה-custom dimension בגוגל אנליטיקס

עכשיו מה שנותר לי לעשות זה ללכת לגוגל אנליטיקס וליצור custom dimension חדש, ואז לקחת את ה-ID שלו ולשים אותו באינדקס של הגדרת האיוונט שלי (מה שכבר עשיתי בשלב הקודם).

לשם כך אלך להגדרות הפרופרטי ואז: Custom Definitions > Custom Dimensions > New Custom Dimension.

אני קובע שהסקופ יהיה user (כי once יוזר קיבל ID מסוים זה הולך איתו לאורך כל חייו):

וזהו זה:

עכשיו נשאר רק לדבג:

שימו לב שה-userId של הוטג’ר נשלח, וה-non-interaction מוגדר על 1 כלומר true.

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

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

סיכום

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