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

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

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

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

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

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

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

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

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

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

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

• שינויים בהיסטוריית הדפדפן (מומלץ): אם ה-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. לוחצים כדי לערוך אפשרויות ספציפיות. בקטע תצוגות דף, לוחצים על הצגת הגדרות מתקדמות. חשוב להפעיל את האפשרויות Page loads (טעינות דפים) ו-Page changes based on browser history events (שינויים בדפים המבוססים על אירועים בהיסטוריית הגלישה).

   

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

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

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

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

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

שיקולים נוספים לגבי SPAs

בנוסף לשליחת אירועים של 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, ולקבל הבנה מדויקת יותר של התהליך שעובר המשתמש.