מדידה של אפליקציות בדף יחיד

המסמך הזה מיועד למפתחים שרוצים למדוד צפיות בדפים באפליקציית דף יחיד באמצעות Google Analytics.

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

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

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

לפני שמתחילים

בדף הזה אנחנו יוצאים מנקודת הנחה שכבר יש לכם:

• חשבון ונכס ב-Google Analytics לאתר שלכם. איך מגדירים את Google Analytics

• ‫Google Tag שמוטמע באתר ומופעל כשהדף נטען בפעם הראשונה. איך מגדירים את Google Tag

הטמעת מדידה של אפליקציית דף יחיד

כדי להטמיע מדידה מדויקת של SPA, צריך להשתמש באחת מהשיטות הבאות כדי להפעיל צפייה וירטואלית חדשה בדף:

• שינויים בהיסטוריית הדפדפן (מומלץ): אם האפליקציה בדף יחיד משתמשת ב-History API, ובאופן ספציפי בשיטות pushState() ו-replaceState() כדי לעדכן מסכים, צריך להשתמש באפשרות הזו.

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

הטמעה של היסטוריית הגלישה הטמעה של אירוע בהתאמה אישית

הטמעה של שינוי בהיסטוריית הדפדפן

אם באפליקציית ה-SPA שלכם נעשה שימוש ב-History API, אתם יכולים להפעיל מדידה משופרת ב-Google Analytics כדי לעקוב באופן אוטומטי אחרי צפיות בדפים על סמך אירועים שקשורים להיסטוריית הגלישה.

נקודה חשובה: אם אתם מגדירים את התגים באמצעות Google Tag Manager, אל תפעילו מעקב אוטומטי אחרי ההיסטוריה ב-Google Analytics, כי זה עלול לגרום לספירה כפולה של צפיות בדפים. במקום זאת, עיינו במדריך מדידת אפליקציות של דף יחיד באמצעות Google Tag Manager.

הפעלת מדידה משופרת ב-Google Analytics

כדי למדוד את האירוע page_views באופן אוטומטי על סמך היסטוריית הגלישה:

1. פותחים את Google Analytics.

2. בדף ניהול, בקטע איסוף ושינוי של נתונים, לוחצים על "מקורות נתונים" > "אתר".

3. בקטע מדידה משופרת מעבירים את המתג למצב מופעל כדי להפעיל את כל האפשרויות.

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

   

5. שומרים את השינויים.

אימות הגדרת המדידה

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

1. מפעילים את מצב ניפוי הבאגים בכל תג בהגדרת המדידה של אפליקציית הדף היחיד. איך עוקבים אחרי אירועים ב-DebugView

2. לוחצים על אפליקציית הדף היחיד. כשלוחצים על מסך וירטואלי חדש, אמור להופיע אירוע page_view חדש ב-DebugView. משווים בין הפרמטרים של האירוע page_view לבין האירוע הקודם page_view כדי לבדוק אם ההפניה לדף והמיקום של הדף עודכנו בצורה נכונה.

שיקולים נוספים לגבי אפליקציות SPA

בנוסף לשליחת אירועי page_view, כדאי להביא בחשבון את ההיבטים הנוספים הבאים כדי לשלב בצורה יעילה את ה-SPA עם Google Analytics ולשפר את חוויית המשתמש:

ניהול מיקום הגלילה

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

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

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

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

איך לוודא שהתוכן נגיש לתכונות של הדפדפן

אם משתמשים מדווחים על בעיות בתכונות של הדפדפן, כמו חיפוש בדף (Ctrl+F) שלא פועל אחרי טעינת דף וירטואלי, יכול להיות שהבעיה קשורה לאופן שבו ה-SPA מעדכן את ה-DOM.

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

ההשפעה על אירועים אוטומטיים

אם תטמיעו בצורה נכונה מדידה של צפיות בדפים וירטואליים באפליקציית ה-SPA, מערכת Google Analytics תטפל באירועים אוטומטיים אחרים בצורה מתאימה. אם צפיות וירטואליות בדפים לא מתועדות כשמתבצעים שינויים במסך, מערכת Google Analytics מתייחסת לאפליקציית ה-SPA כדף יחיד, מה שמוביל למדדים מעוותים.

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

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

• האירוע user_engagement נשלח כשהמשתמש עובר מדף וירטואלי אחד לדף וירטואלי אחר.
• משך ההתעניינות בדף הווירטואלי הקודם מחושב ונשלח יחד עם האירוע user_engagement, בדרך כלל רגע לפני שהאירוע page_view של הדף הווירטואלי החדש מעובד.
• אירועים אחרים, כמו קליקים או גלילות, משויכים ל-page_location של הדף הווירטואלי שהמשתמש צופה בו כרגע.

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