מעקב אחר התנהגות המשתמשים במילוי אוטומטי באמצעות Google Analytics 4

1. מבוא

ב-codelab הזה מוסבר איך לעקוב אחרי התנהגות המשתמשים בטפסים באינטרנט באמצעות מילוי אוטומטי ב-Google Analytics 4‏ (GA4). המאמר הזה מתבסס על המושגים וההסברים למדידת מילוי אוטומטי שמופיעים במאמרים כמו Measure browser autofill on your forms באתר web.dev.

במאמר הזה נסביר איך:

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

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

דרישות מוקדמות

• ידע בסיסי ב-HTML, ב-CSS וב-JavaScript.
• נכס Google Analytics 4 שהוגדר באתר שלכם.
• היכרות עם ספריית gtag.js לשליחת אירועים ל-GA4.
• גישה לקוד ה-HTML של הטופס שרוצים לעקוב אחריו.
• הבנה בסיסית של דוחות Google Analytics 4.

מה תלמדו

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

הדרישות

• עורך טקסט או סביבת פיתוח משולבת (IDE).
• דפדפן אינטרנט עם כלים למפתחים.
• הקוד של האתר.
• חשבון Google Analytics 4.

‫2. הטמעה של לוגיקה לזיהוי מילוי אוטומטי

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

דוגמה למבנה של טופס HTML

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

• לטופס עצמו יש מאפיין id (לדוגמה, myForm) ובאופן אידיאלי גם מאפיין data-form-id (לדוגמה, data-form-id="myForm").
• לכל שדה להזנת קלט שרוצים לעקוב אחריו צריך להגדיר id ייחודי (למשל, id="name", ‏ id="email").

<form id="myForm" data-form-id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br>

    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br>

    <button type="submit">Submit</button>
</form>

<devsite-script src="/path/to/your/static/js/autofill_tracker.js"></devsite-script>

קוד ה-JavaScript למעקב אחר מילוי אוטומטי

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

// autofill_tracker.js
const formId = 'myForm'; // Replace with your form's ID
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace with your field IDs

const autofillStatuses = {};

function initializeAutofillTracking() {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    fieldsToTrack.forEach(fieldId => {
        const field = form.querySelector(`#${fieldId}`);
        if (!field) {
          console.warn(`Field with ID '${fieldId}' not found in the form.`);
          return;
        }

        autofillStatuses[fieldId] = 'EMPTY';
        field.addEventListener('change', (event) => {
            const fieldElement = event.target;
            if (fieldElement.matches(':autofill')) {
                if (autofillStatuses[fieldId] === 'EMPTY'){
                  autofillStatuses[fieldId] = 'AUTOFILLED';
                } else if(autofillStatuses[fieldId] === 'ONLY_MANUAL'){
                    autofillStatuses[fieldId] = 'ONLY_MANUAL_THEN_AUTOFILLED';
                } else if (autofillStatuses[fieldId] === 'AUTOFILLED_THEN_MODIFIED'){
                    // keep the status
                } else {
                    autofillStatuses[fieldId] = 'AUTOFILLED';
                }
            } else {
                if (autofillStatuses[fieldId] === 'AUTOFILLED'){
                    autofillStatuses[fieldId] = 'AUTOFILLED_THEN_MODIFIED';
                } else if (autofillStatuses[fieldId] === 'ONLY_MANUAL_THEN_AUTOFILLED') {
                  autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }else{
                    autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }
            }
        });
    });

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formElement = event.target;
      const formId = formElement.dataset.formId;
      fieldsToTrack.forEach(fieldId => {
        gtag('event', 'autofill_form_interaction', {
          'form_id': formId,
          'field_id': fieldId,
          'autofill_status': autofillStatuses[fieldId]
        });
      });
      formElement.submit();
    });
}

document.addEventListener('DOMContentLoaded', initializeAutofillTracking);

הגדרה (חשוב מאוד!)

כדי שהסקריפט יפעל בצורה תקינה, צריך לשנות את שתי השורות האלה בקוד ה-JavaScript:

const formId = 'myForm'; // Replace 'myForm' with the actual ID of YOUR form.
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace these with the actual IDs of the input fields YOU want to track.

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

המלצה: כדאי להשתמש ב-data-form-id: בסקריפט שסיפקנו יש עדיפות לשימוש במאפיין data-form-id מהטופס (אם הוא קיים) כששולחים את הפרמטר form_id אל GA4. בדרך כלל, השיטה הזו אמינה יותר מאשר הסתמכות רק על מאפיין id, במיוחד אם אתם עוקבים אחרי כמה טפסים או משתמשים במסגרות שעשויות לשנות מזהי רכיבים. מוודאים שהאפשרות data-form-id מוגדרת ב-

tag for this benefit.

הסבר על הקוד:

• ‫form.dataset.formId: מקבל את הערך של מאפיין data-form-id כדי להשתמש בו כפרמטר formId.
• ‫event.preventDefault(): מונע את שליחת הטופס שמוגדרת כברירת מחדל, וכך מאפשר לנו לשלוח את האירוע לפני שליחת הטופס.
• ‫gtag('event', 'autofill_form_interaction', ...): שליחת האירוע המותאם אישית עם הפרמטרים הבאים:
• ‫form_id: המזהה של הטופס.
• ‫field_id: מזהה השדה.
• ‫autofill_status: הסטטוס הנוכחי של המילוי האוטומטי בשדה.
• ‫form.submit(): שליחת הטופס אחרי שליחת האירוע ל-GA4.
• ‫document.addEventListener('DOMContentLoaded', ...): מוודא שהסקריפט יפעל רק אחרי שמבנה ה-HTML של הדף נטען במלואו, וכך מונע שגיאות בניסיון למצוא אלמנטים שעדיין לא קיימים.

‫3. בדיקה

• שולחים את הטופס בדפדפן.
• כדי לוודא שהאירוע autofill_form_interaction נשלח, אפשר להשתמש בדוחות זמן אמת או DebugView ב-GA4.
• בודקים שהפרמטרים של האירוע מאוכלסים בצורה נכונה (למשל, form_id, ‏ field_id, ‏ autofill_status).

טיפ מקצועי לבדיקה: כדי לבצע אימות מפורט של אירועים ופרמטרים בזמן אמת, אפשר להשתמש ב-DebugView ב-GA4 (בקטע 'הגדרה' > 'DebugView'). במהלך הבדיקה, הוא מספק מידע מיידי ומפורט יותר מהדוח הרגיל 'פעילות בזמן אמת'.

התאמה מדויקת נדרשת: כשיוצרים מאפיינים מותאמים אישית, חשוב לוודא שהשם של פרמטר האירוע שמזינים ב-GA4 (למשל, field_id) זהה בדיוק למפתח הפרמטר שמשמש בקריאה gtag('event', ...) בקוד JavaScript, כולל קווים תחתונים ורישיות.

4. הגדרת מאפיינים מותאמים אישית ב-GA4

כדי להשתמש בפרמטרים field_id ו-autofill_status בדוחות של GA4, צריך ליצור מאפיינים מותאמים אישית:

1. עוברים לנכס GA4.
2. עוברים אל הגדרה > הגדרות מותאמות אישית.
3. יוצרים מאפיין מותאם אישית חדש:
   • פרמטר של אירוע: field_id
   • שם המאפיין: Field ID
   • היקף: אירוע
4. יוצרים עוד מאפיין מותאם אישית:
   • פרמטר של אירוע: autofill_status
   • שם המאפיין: Autofill Status
   • היקף: אירוע
5. יוצרים מאפיין מותאם אישית שלישי:
   • פרמטר של אירוע: form_id
   • שם המאפיין: Form ID
   • היקף: אירוע

חשוב לדעת על עיכוב בעיבוד: יכול להיות שיחלפו עד 48 שעות עד ש-Google Analytics יעבד מאפיינים מותאמים אישית שנוצרו לאחרונה. לא תוכלו לראות אותם או להשתמש בהם בדוחות מיד אחרי היצירה. כדאי לתכנן בהתאם ולחזור לכאן מאוחר יותר.

5. ניתוח נתונים ב-GA4

אחרי שתאספו נתונים, תוכלו לנתח אותם בדוחות של GA4:

1. עוברים אל דוחות > התעניינות > אירועים.
2. בוחרים את האירוע autofill_form_interaction.
3. משתמשים בתפריט הנפתח מאפיין משני כדי לבחור את המאפיינים המותאמים אישית (לדוגמה, 'מזהה שדה', 'סטטוס מילוי אוטומטי', 'מזהה טופס'). הוספת 'מזהה שדה' תציג אילו שדות ספציפיים בטופס מפעילים את האירוע autofill_form_interaction. כדי לקבל תובנות מעמיקות יותר לגבי אופן מילוי כל שדה, אפשר לבחור באפשרות 'סטטוס מילוי אוטומטי' כמאפיין נוסף לצד 'מזהה שדה'. השילוב הזה מציג ישירות את הפיזור של סוגי האינטראקציות בכל שדה.
4. ליצור ניתוחים כדי לקבל תובנות נוספות לגבי הנתונים. אפשר להשתמש בטכניקות שונות, כמו:
   • פריסה גמישה: כדי לנתח את הנתונים וליצור תרשימים בהתאמה אישית.
   • טבלה: כדי לראות את הנתונים בפורמט של טבלה.
   • משפך: כדי לנתח את מסלול המשתמש בטופס. ניתוח משפך יכול לעזור לכם להמחיש את התקדמות המשתמשים בטופס מרובה שלבים, ואולי להדגיש שלבים שבהם התנהגות המילוי האוטומטי (או היעדרה) משפיעה על ההתקדמות.
   

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

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

• אילו שדות נמלאים אוטומטית בתדירות הכי גבוהה?
• באיזו תדירות המשתמשים מסתמכים על מילוי אוטומטי?
• האם יש שדות ספציפיים שבהם המשתמשים נוטים למלא את המידע באופן ידני?
• האם התנהגות המילוי האוטומטי משתנה לאורך זמן?
• איך משתנה התנהגות המילוי האוטומטי בהתאם לטופס?

6. שיקולים נוספים

• אימות טפסים: חשוב להבין איך אימות טפסים משפיע על זיהוי מילוי אוטומטי. אם התיקוף ייכשל, יכול להיות שאירוע השינוי לא יופעל בצורה תקינה.
• טפסים דינמיים: אם יש לכם טפסים דינמיים, ודאו שקוד ה-JavaScript יכול לטפל בשינויים במספר השדות ובמזהים שלהם. יכול להיות שתצטרכו להשתמש ב-MutationObserver כדי לעקוב אחרי השינויים בטופס.
• ביצועים: מומלץ להימנע מהוספה של יותר מדי JavaScript לדף. חשוב לבדוק את הקוד כדי לראות אם הוא משפיע על הביצועים.
• פרטיות המשתמשים: חשוב לשים לב לפרטיות המשתמשים כשמבצעים איסוף נתונים. אל תאספו מידע רגיש ללא הסכמה מתאימה.
• מגבלות על אירועים: ב-GA4 יש מגבלות על מספר האירועים והפרמטרים שאפשר לשלוח. חשוב לתכנן את ההטמעה בהתאם.
• כמה טפסים: אם יש לכם כמה טפסים באותו דף, צריך להתאים את הקוד כדי לעקוב אחרי כל הטפסים. תצטרכו להתאים את בורר formId ואת מאזין האירועים לכל טופס.
• נגישות: חשוב לוודא שההטמעה נגישה למשתמשים עם מוגבלויות.
• בדיקה: חשוב לבדוק את ההטמעה ביסודיות בדפדפנים ובמכשירים שונים כדי לוודא שהיא פועלת כמו שצריך.

7. סיכום

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

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

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