הקלטה, הפעלה מחדש ומדידה של תהליכי משתמש בעזרת כלי הפיתוח של Chrome

1. מבוא

השתמשו בחלונית מכשיר ההקלטה כדי להקליט, להפעיל מחדש ולמדוד תהליכי עבודה של משתמשים.

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

מה'לי תלמדו

• הקלטת זרימת משתמשים
• הפעלה מחדש של תהליך משתמש
• עריכה של תהליך משתמש
• מדידת זרימת משתמשים

מה צריך להשתמש בו

• מחשב פעיל ו-Wi-Fi ניתן למימוש
• Chrome מגרסה 101 ואילך.

2. פתיחת החלונית של מכשיר ההקלטה

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

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

3. התחלת הניווט

אנחנו נשתמש בדף ההדגמה הזה להזמנת קפה. תהליך תשלום בקופה הוא תהליך נפוץ בקרב משתמשים באתרים של שופינג.

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

1. מוסיפים קפה לעגלת הקניות.
2. מוסיפים עוד קפה לעגלת הקניות.
3. עוברים אל דף עגלת הקניות.
4. מסירים קפה אחד מעגלת הקניות.
5. מתחילים בתהליך התשלום.
6. ממלאים את פרטי התשלום.
7. לשלם.

פתיחת הדף

4. הקלטת זרימת משתמשים

1. פותחים את דף ההדגמה. כדי להתחיל, לוחצים על הלחצן התחלת הקלטה חדשה.
2. מזינים "coffee checkout" בתיבת הטקסט שם ההקלטה.
3. לוחצים על הלחצן התחלת הקלטה חדשה. ההקלטה התחילה. בלוח מוצגת הקלטה... לפיה ההקלטה מתבצעת.
4. לוחצים על Cappuccino כדי להוסיף אותו לעגלה.
5. לוחצים על Americano כדי להוסיף אותו לעגלת הקניות. הערה: מכשיר ההקלטה מציג את השלבים שביצעתם עד עכשיו.
6. עוברים אל דף עגלת הקניות.
7. מסירים את Americano מעגלת הקניות.
8. לוחצים על הלחצן סה"כ: 19.00 דולר כדי להתחיל את תהליך התשלום.
9. בטופס פרטי התשלום, ממלאים את תיבות הטקסט שם ואימייל ומסמנים את התיבה אני רוצה לקבל עדכוני הזמנות והודעות קידום מכירות.
10. לוחצים על הלחצן שליחה כדי להשלים את תהליך התשלום.
11. בחלונית מכשיר ההקלטה. כדי לסיים את ההקלטה, לוחצים על הלחצן סיום ההקלטה.

5. הפעלה מחדש של תהליך משתמש

אחרי שמתעדים את התהליך של העברת המשתמש, אפשר להפעיל אותו מחדש על ידי לחיצה על הלחצן הפעלה מחדש.

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

אפשר לדמות חיבור רשת איטי על ידי קביעת הגדרות הפעלה מחדש. לדוגמה, מרחיבים את הגדרות ההפעלה מחדש, בוחרים באפשרות 3G איטי בתפריט הנפתח רשת.

אפשר גם להגדיר זמן קצוב לתפוגה ארוך יותר בכל השלבים.

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

6. מדידת זרימת משתמשים

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

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

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

7. עריכה של תהליכי משתמש

ריכזנו כאן כמה אפשרויות לעריכת מסלולי המשתמשים.

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

1. מוסיפים הקלטה חדשה. לוחצים על סמל ה+ כדי להוסיף הקלטה חדשה.
2. הצגת כל ההקלטות. בתפריט הנפתח מוצגת רשימת ההקלטות שנשמרו. בוחרים באפשרות [מספר] הקלטות כדי להרחיב ולנהל את רשימת ההקלטות השמורות.
3. לייצא הקלטה. אפשר לייצא את זרימת המשתמשים כסקריפט של Puppeteer כדי להתאים אישית את הסקריפט.
4. מחיקת הקלטה. מוחקים את ההקלטה שנבחרה.

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

8. עריכת השלבים

נעבור על האפשרויות לעריכת השלבים בתהליך עבודה.

הרחבת השלבים

1. אפשר להרחיב כל שלב כדי לראות את פרטי הפעולה. לדוגמה, אפשר להרחיב את השלב לחיצה על רכיב "Cappuccino".
2. בשלב שלמעלה מוצגים שני בוררים. למידע נוסף, ראה עדיפות בורר. כשאתם מפעילים מחדש את זרימת המשתמשים, מכשיר ההקלטה מנסה לשלוח שאילתה לרכיב באמצעות אחד מהבוררים לפי רצף. לדוגמה, אם מכשיר ההקלטה שולח שאילתה בהצלחה לרכיב עם הבורר הראשון, הוא ידלג על הבורר השני וימשיך לשלב הבא.
3. אפשר להוסיף או להסיר סלקטורים. לדוגמה, אפשר להסיר את הבורר #2 כי רק aria/Cappuccino מספיק במקרה זה. מעבירים את העכבר מעל בורר #2 ולוחצים על - כדי להסיר אותו.
4. אפשר גם לערוך את הבורר. לדוגמה, אם אתם רוצים לבחור באפשרות מוקה במקום קפוצ'ינו, אתם יכולים לערוך את ערך הבורר ל-aria/Mocha. לחלופין, לוחצים על הלחצן בחירה ואז לוחצים על Mocha בדף.
5. חוזרים על התהליך עכשיו, ובוחרים באפשרות מוקה במקום קפוצ'ינו.
6. לנסות לערוך מאפיינים אחרים של השלבים, כמו type , target, value ועוד.

הוספה והסרה של שלבים

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

1. לדוגמה, אירוע גלילה אחרי השלב מוקה אינו נחוץ. אפשר ללחוץ על הסרת השלב כדי להסיר אותו.
2. נניח שאתם רוצים להמתין עד ש-9 בתי הקפה יוצגו בדף לפני שתבצעו פעולות כלשהן.
3. בתפריט השלבים של מוקה, בוחרים באפשרות הוספת שלב לפני.
4. ברכיב הצהרת הבעלות, עורכים את השלב החדש באמצעות הפרטים הבאים:
   • סוג: PendingForElement
   • בורר מס' 1: .cup
   • אופרטור: == (לוחצים על הלחצן הוספת אופרטור)
   • ספירה: 9 (לחיצה על הלחצן הוספת ספירה)
5. מפעילים מחדש את התהליך כדי לראות את השינויים.

9. כל הכבוד!

מזל טוב. השלמת את מעבדת הקוד הזו!

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

איך מוצאים את שיעור ה-Lab הזה?

לא, היא משעממת. נחמד, אהבתי!