Skip to Content Contact Us
דף הבית » המחשבות שלי » הוטג’אר (hotjar) – המדריך המלא חלק א’
Hotjar 1 Header

הוטג’אר (hotjar) – המדריך המלא חלק א’

משה רדמן

אפריל 12, 2020

למה צריך את hotjar או תוכנות דומות?

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

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

אומנם לא נוכל להיכנס למחשבות של הגולשים שלנו אבל הכי קרוב לזה זה לצפות כיצד הוא מתנהג בתוך האתר במהלך הגלישה, ולהסיק מזה תובנות מדהימות!

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

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

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

בעולם ישנן עשרות מערכות שונות שמספקות כלים של מפות חום והקלטות גולשים באתרים, כל אחת מציעה פתרונות מגוונות וטווח מכירים משתנה, המרכזיות שבהן – Clicktale ,Lucky orange ,Crazy Egg ,Inspectlet ועוד.

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

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

מאמר זה הוא חלק א’ מתוך סדרה של שני מאמרים (קישור לחלק ב’ נמצא בסוף המאמר)

המדריך המלא להוט ג'אר

נעים להכיר – hotjar!

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

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

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

אז יאללה – בואו נתחיל ללמוד על hotjar!

הקמת חשבון hotjar

hotjar מציעה ארבעה מסלולים שונים:

  1. המסלול החינמי עם אפשרות לשימוש בפיצ’רים באופן מוגבל, הגבלה לניטור של עד 2,000 צפיות מנוטרות של דפים ביום (ברגע שנוצל, אפשר למחוק ולהתחיל מחדש), אפשרות ליצור עד 3 מפות חום, משפכים, ניטור טפסים ושאלונים, ואין הגבלה על מספר המשתמשים בחשבון
  2. חשבון פלוס בעלות 29 דולר בחודש. הגבלה לניטור של עד 10,000 צפיות מנוטרות של דפים ביום ושימוש ללא הגבלה בפיצ׳רים. הנתונים נשמרים לשנה אחת בלבד
  3. חשבון עסקי עם מחיר משתנה בין 89 דולר/חודש עד 589 דולר/חודש בתאם לכמות צפיות הדפים היומית הנדרשת
  4. מודל עבור סוכנויות פרסום – שם התמחור נקבע בהתאמה אישית

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

פתיחת החשבון ב-hotjar (הוטג’אר) כוללת שישה שלבים פשוטים וממש מהירים. מיד לאחר שתיצרו את החשבון, תתבקשו להטמיע סקריפט מעקב ייחודי (hotjar Tracking) בקוד האתר שלכם (ניתן להטמעה דרך Google Tag Manager), לאמת שהוא אכן הוטמע נכון ורק אז  hotjar תוכל להתחיל לאסוף נתונים על האתר. אם אתם מנהלים אתר שיש בו כבר Google Tag Manager או שהוא בנוי על פלטפורמת wordpress /magento /drupal shopify /wix, הוטג’אר (hotjar) מסייעת לכם עם הסבר מפורט וייעודי על הטמעה במקרה שכזה באמצעות אינטגרציה מובנית.

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

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

שלבים להקמת חשבון הוט ג'אר

דגשים ו – Best Practices בהקמת החשבון וביצוע ההטמעה של hotjar

פעמים רבות למרות שקוד המעקב הוטמע באתר, איסוף הנתונים נעשה בצורה לא סדירה, להלן מס’ סיבות אפשריות/כלים לפתרון:

  • וולידציה להטמעת קוד המעקב – היעזרו בכלי הוולידציה של hotjar שקופץ בלחיצה על כפתור ה-Tracking בצד ימין למעלה של הממשק. ניתן להזין כל כתובת על מנת לבדוק אם קוד המעקב מוטמע בה בצורה תקינה
  • הקלדה שגויה של כתובת האתר – הקפידו לוודא שיש הלימה בין הדומיין של האתר שאותו אתם מעוניינים לנטר לדומיין שהוגדר לחשבון של ה-hotjar. לפעמים טעות קטנה עלולה לשבש את תהליך הזיהוי של האתר ע”י hotjar .
  • הטמעת קוד המעקב רק בחלק מהאתר – לעיתים אתרי אינטרנט בנויים מכמה תבניות שלכל אחת קוד עצמאי משלה. כשמבצעים הטמעה של קוד ה-hotjar, חשוב לוודא שהוא מוטמע בכל התבניות של האתר ומאפשר “הקלטה” של כל העמודים
  • חסימות מטעמי אבטחה – בעיקר בארגונים גדולים, אנשי אבטחת המידע וה-IT דואגים למנוע חדירות על ידי סקריפטים זרים שמוטמעים באתרים המאוחסנים בשרת (Firewell או CSP), אם זה המצב ידעו אותם לגבי הצורך שלכם ובקשו שיסירו חסימות של הדומיין של hotjar ושל ה-IP (18.203.61.76, 18.203.176.135, 52.17.179.221 ) על מנת לאפשר תעבורת נתונים מהאתר אל המערכת של hotjar
  • אל תבזבזו ניטורים של סשנים לא רלוונטיים. על מנת למנוע הקלטה של משתמשים שאינם אמיתיים כמו מנהלי האתר, אנשי מכירות ועוד, מומלץ להגדיר סינון של כתובות IP מהם הם גולשים, על מנת שלא ינוטרו ע”י הוטג’אר. על מנת להגדיר, לחצו על כפתור ה-Settings בצד ימין למעלה בממשק ומתוך הרשימה הנפתחת בחרו ב-IP Blocking. במידה ואתם מנהלים כבר מספר חשבונות ב-hotjar תינתן לכם אפשרות לבחור כבר מתוך כתובות IP שמורות. אחרת תוכלו לתת שם לרשומה ולהקליד את כתובת ה-IP אותה תרצו לחסום עבור החשבון. ניתן להוסיף כתובות לחסימה ללא הגבלה

התמצאות ב-hotjar – הדשבורד המרכזי

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

hotjar - מסך התמצאות מרכזי

שימוש במפות חום בהוטג’אר (hotjar)

מפות חום בהוטג'אר

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

1. Status – לכל מפת חום שאנחנו יוצרים, ניתן לבחור את כמות Page Views שירכיבו אותה. הסטטוס משתנה בהתאם להישגים של אותה מפה והוא משוקף עם אייקון בהתאם, כאשר המצבים הם: עדיין אוסף נתונים, איסוף הנתונים נעצר, איסוף הנתונים הושלם (משמע – הגענו ליעד הצפיות שהוגדרו)
2. Name – כאן יופיע שם המפה כפי שנתנו לה כשיצרנו אותה, כתובת ה-URL של העמוד שעליו נאספים הנתונים (כתובת מדויקת או דינאמית) ותיאור המפה במידה והוספנו בעת יצירתה (התיאור נועד לשימוש עצמי בלבד)
3. Created – מציין את התאריך בו מפת החום נוצרה ואת המשתמש שיצר אותה
4. Pageviews – כמה צפיות שנוטרו עד כה על ידי המערכת באותו עמוד. כאשר המפה מגיעה לכמות הצפיות שהוקצתה לה, מונה הצפיות ייעצר
5. View Heatmap – מעבר לצפייה במפת החום עצמה. במידה וטרם נאספו מספיק נתונים, הכפתור יהיה דהוי ולא לחיץ
6. אפשרויות נוספות – רשימת אפשרויות נפתחת (דרופדאון) עבור כל מפת חום (Heatmap) עם האופציות לעצור את איסוף הנתונים, לשתף את המפה עם אחרים, לשכפל את המפה, לערוך אותה או למחוק אותה
7. יצירת מפת חום חדשה
8. חלונית חיפוש של Heatmap קיימת מהרשימה
9. דפדוף מהיר – דפדוף בין דפי הרשימה ובחירה של מספר הרשומות שיופיע בכל עמוד
10. חסימת IP- קישור מהיר להגדרות חסימת כתובות IP, כאמור – נועד לצורך מניעת “נתוני זבל” שמגיעים מעובדי חברה או IP פקטיביים כאלו ואחרים

יצירת מפת חום ב-hotjar

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

לאחר שעשיתם את שני השלבים הללו – תתעדפו מי הם ה-5-6 עמודים שמהם אתם מעוניינים להתחיל, ויאללה בואו נייצר מפת חום:

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

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

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

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

שלב ראשון – הגדרת שם למפת החום

פתיחת חשבון בהוט ג'אר

שלב שני – הקצאה של צפיות עמוד

פתיחת חשבון בהוט ג'אר

שלב שלישי – טירגוט כתובת העמוד עבור מפת החום

טרגוט עמוד טרגוט עמוד בהוט ג'אר

שלב רביעי – הפעלה של מפת החום

הפעלת מפת חום

דגשים חשובים ו-Best Practices ליצירת מפות חום ב-hotjar

  • שימו לב שאם בחרתם בחשבון ה-BASIC, אז לא תוכלו ליצור יותר מ- 3 מפות חום בחשבון וברגע שכל מפת חום שיצרתם תשיג כ-1,000 צפיות היא תיעצר
  • ישנם אתרים שתצורת המובייל שלהם אינה רספונסיבית ומקבלת כתובת URL ייחודית. לכן בדקו זאת והגדירו מפות חום ייעודיות לתצורת המובייל עם ה-URL הרלוונטי. לדוגמה: כתובת לדסקטופ –mydomain.com ובמובייל –m.mydomain.com , אם לא תגדירו בעצמכם הוטג’אר לא ידע להתמודד עם המצב, מבחינתו האתר ״הרגיל״ והאתר שמתחיל ב-m הם שני אתרים שונים
  • נוצרה לכם מפת חום שיש בה חלקים חסרים? זה קורה בדרך כלל שדף האינטרנט נטען לאט ו-hotjar “לוכדת” את הדף עוד לפני שכל האלמנטים הספיקו להיטען. לשם כך, השתמשו בכפתור HEATMAP HELP ולכדו מחדש את העמוד בתצורת המובייל, טאבלט או דסקטופ
  • חשוב להיות מסונכרנים עם מנהלי התוכן של האתר ולהתעדכן על כוונות לשנות עמודים באתר. אם הגדרתם מפת חום על עמוד והמבנה שלו השתנה או הוחלפו בו אלמנטים מסוימים מהותיים, יתכן חוסר הלימה בין תמונת הרקע שהמערכת לכדה לבין מראה העמוד בפועל. כלומר יכול להיווצר כתם חום במקום ריק בעוד שבאתר האמיתי יש שם תמונה או כפתור חדש שעודכן על ידי מנהלי התוכן.
  • המערכת שומרת את הדאטה לשנה בלבד. לכן מומלץ לגבות באמצעות הורדה ושמירה של תצלומי מפות החום למחשב וקבצי ה-csv.

צילום מסך עם חלקים חסרים

דוגמה לתקלה בצילום hotjar

הקפידו על הגדרה מדויקת של כתובת URL שבגינה תרצו ליצור מפת חום. השתמשו בצורה מושכלת בהגדרות הבאות:
Exact Match – השתמשו ב-Exact Match כשתרצו לטרגט URL עמודים עם התאמה מדויקת לכתובת ה- URL

Exact Match דוגמה

Simple Match – השתמשו ב-Simple Match כשתרצו לטרגט עמודים עם התאמה פשוטה, שגם תדע להכיל כתובות ם או בלי או www או http או https או פרמטרים כמו ? ו-#, אבל ללא תת-תיקייה

Simple Match - דוגמה

Contains – השתמשו ב-Contains כשתרצו לטרגט עמודים שלהם מכילה מחרוזת מסוימת

url Contains - הגדרה

Regex Match – השתמשו ב-Regex Match כשתרצו לטרגט בצורה מתקדמת עמודים שיש להם התאמה למחרוזת לפי regex

Regex Match - הגדרה

 

* מכיל את הכתובת
* לא מכיל את הכתובת

עמוד מפת חום (heatmaps) ב-hotjar – התמצאות

hotjar - מפת חום התמצאות

נתחיל מלמעלה…
בצד שמאל למעלה יופיע הקישור heatmaps (כחלק מתפריט פרורי הלחם של האתר) המוביל חזרה אל הטבלה המרכזית של מפות החום. משמאלו השם שנתתם למפת החום בה אתם צופים. משמאל לשם, מופיע כפתור שיתוף מפת חום (Share Heatmap) המאפשר לנו לשתף את התוצר עם מישהו אחר – שימו לב, האדם שאתם משתפים אינו מחויב להיות משתמש ב-hotjar. המערכת מייצרת קישור ייעודי לאותה מפת חום ותאשרר איתנו שאנו מבינים כי כל מי שיפתח את הקישור יוכל לצפות במפה עם כל הנתונים שנצברו עליה. ברגע שתאשרו, המערכת תחשוף בפניכם קישור להעתקה, אותו תוכלו לשלוח לכל מי שתרצו לשתף בתוצר.

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

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

hotjar - עמוד מפת חום לדוגמה

אז מה רואים במפת חום (heatmap) ב-hotjar?

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

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

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

hotjar - מפת הקלקות

hotjar - מפות גלילה

דוגמאות לפיזור מפת חום במובייל

דוגמה למפות חום - מוביילהמערכת שומרת את הנתונים למשך שנה. מומלץ לדאוג לגבות את הנתונים שהצטברו במערכת ולהוריד אותם בפורמט  csv או מפות בפורמט jpg אל המחשב שלכם, תוכלו לעשות זאת דרך View Data או Download.

ניתוח נתונים בהוט ג'אר

אז איך מנתחים מפת חום?

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

מפת הקלקות

נניח שהקצנו למפת חום מסוימת 2,000 צפיות בעמוד (PageViews), המפה סיימה לאסוף נתונים ובנויה לתלפיות עם שלל כתמים צבעוניים. אותנו זה מרגש! קחו לכם עט ונייר ותתחילו לרשום כל מה שעולה לכם בראש במהלך הסקירה של מפת החום. תחילה התמקדו באזורים עם הכתמים החמים שעל המפה. כתבו מה היו האלמנטים בדף שעל גביו נוצרו הכתמים החמים ומה שיעור ההקלקות שהיו על כל אלמנט ביחס לסך ההקלקות במפה.

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

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

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

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

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

מפת תנועות עכבר (רלוונטי רק לגולשים ממחשבים)

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

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

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

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

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

hotjar - דוגמה למפת F

מפות גלילה

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

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

הגישה הרווחת היא שאלמנטים של CTA חייבים להופיע מעל ה-Fold (משמע – במסך הראשון שאליו המשתמש נחשף לפני שהוא גלל) וכי מעט משתמשים גוללים מתחתיו, אבל בעידן המובייל אנו עדים יותר ויותר לכך שמרבית הגולשים סורקים במהירות את כל אורך הדף ובכך נחשפים לכל האובייקטים שבעומקו. הגישה של CTA מעל ה-Fold רלוונטית בעיקר באתרי איקומרס “קלאסיים” ופחות באתרי תוכן או אתרי מכר עם תוכן רב.

פתרון טוב ומומלץ הוא שה-CTA המרכזי יופיע מעל קו ה-Fold של הדף ויהפוך בגלילה לכפתור דביק (sticky) לאחר שהגולש עובר את ה-Fold הראשון ובכך הגולש תמיד יהיה חשוף אליו.

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

במקרים מסוימים הגולשים כלל לא מבינים שיש המשך לדף מתחת ל-Fold, מה שנקרא בשפה המקצועית False bottom. לרוב, המצב נוצר בגלל שטחים מתים בגובה מסוים בדף או אלמנט שמסתיים ממש לקראת ה-Fold, כך שנוצר בלבול אצל הגולשים והם לא גוללים מטה, הפתרון לכך הוא לייצר אלמנט שמחבר בין ה-Fold הראשון לשני ובכך הגולש מבין בוודאות שיש עוד דברים “שמחכים לו למטה” במורד הגלילה.

במקרים מסוימים שיעור הגלילה אל תחתית הדף הוא גבוה, בגלל גולשים שלא מוצאים מה שהם מחפשים והם סורקים את הדף עד סופו.

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

דגשים חשובים לקריאת מפות חום ב-hotjar ו – Best Practices

  • מה קורה אם יש לנו אלמנט כמו פופאפ או רשימה נפתחת בעמוד ואנו לא מעוניינים שהוא ילכד ע”י הוטג’אר בצילום מפת החום? במקרה הזה אפשר פשוט להגדיר בטירגוט של הדף שאלמנט מסוים לא ייכלל בהקלטה. מה שצריך זה לאתר את המזהה של האלמנט (selector) בקוד להגדיר אותו בחלון עריכת הטירגוט של המפה. קליק ימני על האלמנט באתר ובחירה מהרשימה ב-Inspect תציג לכם חלונית עם כל האלמנטים של הדף ב-html וב-css. מצאו את שם ה-class של האלמנט המדובר והעתיקו ל-hotjar. מדובר בתהליך חשוב – אחרת מפת החום תיווצר על צילום מסך שבמרכזו פופ אפ (מה שלא יקשה מאוד לנתח את הנתונים)
  • בדקו מה מסתתר מתחת לכל כתם צבע עז בדף, בדקו באתר כיצד מתנהגים אלמנטים שכוסו בכתמים ונסו לזהות הזדמנויות או בעיות (אלמנט שסתם מסיח את דעת הגולשים, אלמנט עם באג שאינו מגיב, אלמנט נסתר שיוצר את הכתם – כמו רשימה נפתחת או פופאפ)
  • בדקו בעזרת מפות הגלילה, האם יש חוסר הבנה של הגולש לכך שיש עוד תוכן מעניין בהמשך העמוד – כאמור, הפתרון הוא לייצר אלמנטים שמחברים / חוצים בין Fold ל-Fold
  • בדקו האם שיעורי ההקלקה על CTA נמוכים כשהם מתחת לקו ה-Fold, אם כן יש לוודא שה-CTA המרכזי שלכם נמצא ב-fold הראשון
  • בדקו באמצעות הקלטות הגולשים, כיצד מתנהגים באמת הגולשים בעמוד בהיבט של התנהגות גלילה בתוכו
  • כשמעבירים את הסמן מעל כתם במפת הקלקות, עשויים להופיע כמה נתונים. כל נתון מתייחס לאלמנט אחר. למשל הקלקה על טקסט של כפתור, הקלקה על האייקון שלצד הטקסט והקלקה על הכפתור עצמו. כשרוצים לבחון מה שיעור ההקלקה על הכפתור כולו, יש לסכום את כל הנתונים של כל הרכיבים של אותו כפתור

לחצו כאן להמשך המדריך וקריאת חלק ב’

 

לכל המאמרים בנושא אי-קומרס באתר >>

שאלות ותשובות

מה זה הוטג'אר?

Hotjar היא מערכת ניתוח דאטה שעושה שימוש במפות חום (heatmaps) והקלטות (וכלים נוספים שיפורטו בהמשך) על מנת לשקף את האינטראקציה של הגולשים בדף האינטרנט באמצעות ויזואליזציה בצבעים. מפת החום (heatmap) נבנית על בסיס ניטור תנועות העכבר בדסקטופ או לחיצות מגע במובייל ונצבעת בהתאם לכמות וריכוז האינטראקציות על פני המסך, אדום יותר = יותר אינטראקציה.

מה המסלולים ש-hotjar מציעה?

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

2.חשבון פלוס בעלות 29 דולר בחודש. הגבלה לניטור של עד 10,000 צפיות מנוטרות של דפים ביום ושימוש ללא הגבלה בפיצ׳רים. הנתונים נשמרים לשנה אחת בלבד.

3.חשבון עסקי עם מחיר משתנה בין 89 דולר/חודש עד 589 דולר/חודש בתאם לכמות צפיות הדפים היומית הנדרשת.

4.מודל עבור סוכנויות פרסום – שם התמחור נקבע בהתאמה אישית. לאתרים ישראלים עם עד 500K גולשים בחודש נמליץ על החשבון העסקי של 89$ לחודש שאמור להספיק בהחלט.

איך פותחים חשבון hotjar?

פתיחת חשבון hotjar פתיחת החשבון כוללת שישה שלבים פשוטים וממש מהירים. מיד לאחר שתיצרו את החשבון, תתבקשו להטמיע סקריפט מעקב ייחודי (של hotjar Tracking) בקוד האתר שלכם (ניתן להטמעה דרך Google Tag Manager), לאמת שהוא אכן הוטמע נכון ורק אז hotjarתוכל להתחיל לאסוף נתונים למערכת. אם אתם מנהלים אתר שיש בו כבר Google Tag Manager או שהוא בנוי על פלטפורמת wordpress /magento /drupal shopify /wix.יhotjar מסייעת לכם עם הסבר מפורט כיצד להטמיע את הקוד בכל אחת מהפלטפורמות הללו, על ידי אינטגרציה מובנית. כאמור ישנם שישה שלבים פשוטים ומהירים להקמת החשבון: פעמים רבות למרות שקוד המעקב הוטמע באתר, איסוף הנתונים נעשה בצורה לא סדירה, או לא נעשה כלל. להלן כמה המלצות לטיפול בבעיה על בסיס ניסיוננו: וולידציה להטמעת קוד המעקב – היעזרו בכלי הוולידציה של hotjar שקופץ בלחיצה על כפתור ה-Tracking בצד ימין למעלה של הממשק. ניתן להזין כל כתובת על מנת לבדוק אם קוד המעקב מוטמע בה בצורה תקינה הקלדה שגויה של כתובת האתר – הקפידו לוודא שיש הלימה בין הדומיין של האתר שאותו אתם מעוניינים לנטר לדומיין שהוגדר לחשבון של ה-hotjar. לפעמים טעות קטנה עלולה לשבש את תהליך הזיהוי של האתר ע”יhotjar . הטמעת קוד המעקב רק בחלק מהאתר – לעיתים אתרי אינטרנט בנויים מכמה תבניות שלכל אחת קוד עצמאי משלה. כשמבצעים הטמעה של קוד ה-hotjar, חשוב לוודא שהוא מוטמע בכל התבניות של האתר ומאפשר “הקלטה” של כל העמודים חסימות מטעמי אבטחה – בעיקר בארגונים גדולים, אנשי אבטחת המידע וה-IT דואגים למנוע חדירות על ידי סקריפטים זרים שמוטמעים באתרים המאוחסנים בשרת (Firewell אוCSP ). ידעו אותם לגבי הצורך שלכם ובקשו שיסירו חסימות של הדומיין של hotjar ושל ה-IP (18.203.61.76, 18.203.176.135, 52.17.179.221 ) על מנת לאפשר תעבורת נתונים מהאתר אל המערכת של hotjar אל תבזבזו ניטורים של סשנים לא רלוונטיים. על מנת למנוע הקלטה של משתמשים שאינם אמיתיים כמו מנהלי האתר, אנשי מכירות ועוד, מומלץ להגדיר סינון של כתובות IP מהם הם גולשים, על מנת שלא ינוטרו ע”יhotjar . על מנת להגדיר, לחצו על כפתור ה-Setting בצד ימין למעלה בממשק ומתוך הרשימה הנפתחת בחרו ב-IP Blocking. במידה ואתם מנהלים כבר מספר חשבונות ב-hotjar תינתן לכם אפשרות לבחור כבר כתובות IP שמורות. אחרת תוכלו לתת שם לרשומה ולהקליד את כתובת ה-IP אותה תרצו לחסום עבור החשבון. ניתן להוסיף כתובות לחסימה ללא הגבלה.

איך עובדים עם מפות החום בהוטג'ר?

אז בחרנו להתחיל ממפות החום. להלן עיקרי הדברים להתמצאות בעמוד זה: 1. Status– לכל מפה שאנחנו יוצרים, ניתן לבחור את כמות הצפיות שירכיבו אותה. הסטטוס משתנה בהתאם להישגים של אותה מפה והוא משוקף עם אייקון בהתאם – עדיין אוסף נתונים, איסוף הנתונים נעצר, איסוף הנתונים הושלם. 2. Name– כאן יופיע שם המפה כפי שנתנו לה כשיצרנו אותה, כתובת ה-URL של העמוד שעליו נאספים הנתונים (כתובת מדויקת או דינאמית) ותיאור המפה במידה והוספנו בעת יצירתה. 3. Created – באיזה תאריך המפה נוצרה ועל ידי איזה משתמש. 4. Pageviews– כמה צפיות נוטרו על ידי המערכת עד כה באותו עמוד. כאשר המפה מגיעה לכמות הצפיות שהוקצתה לה, מונה הצפיות ייעצר. 5. View Heatmap – מעבר לצפייה במפה. במידה וטרם נאספו מספיק נתונים, הכפתור יהיה דהוי ולא לחיץ. 6. אפשרויות נוספות – רשימת אפשרויות נפתחת עבור כל מפה עם האופציות לעצור את האיסוף, שיתוף, שכפול של המפה, עריכה ומחיקה. 7. יצירת מפת חום חדשה 8. חלונית חיפוש של מפה קיימת מהרשימה 9. דפדוף מהיר – דפדוף בין דפי הרשימה ובחירה של מספר הרשומות שיופיע בעמוד. 10. חסימת IP- קישור מהיר להגדרות חסימת כתובות IP.

מה כדאי לעשות לפני שיוצרים מפת חום ב-hotjar?

רגע לפני שיוצרים מפות חום…

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

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

איך hotjar יכולה לעזור לי?

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

מה הם הכלים שהוטג'ר מציעה?

Hotjar מציעה מספר כלים ממש טובים בתוך המערכת שלה:

• מפת הקלקות

• מפת תנועות עכבר

• מפת עומק גלילה

• ניטור של מילוי טפסים

• הקלטות גולשים

• יצירת משוב גולשים

• יצירה סקרים והצגת תוצאותיהם

• יצירת שאלונים והצגת תוצאותיהם

• בניית משפכי מדידה על כל אלו נפרט בהרחבה במדריך זה.

 

Back top top