מדידת מילוי אוטומטי בדפדפן בטפסים

Maud Nalpas
Maud Nalpas

תאריך פרסום: 20 בנובמבר 2024

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

הדגמה של מילוי אוטומטי ב-Chrome.
מילוי אוטומטי ב-Chrome

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

אבל האם יש לכם נתונים על השימוש במילוי אוטומטי ועל החיכוך באתר שלכם?

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

כך אפשר להשתמש בתובנות האלה לגבי מילוי אוטומטי:

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

הדגמה וקוד

אפשר להתנסות בדמו שלנו ולבדוק את הקוד ב-GitHub.

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

פעולות שכדאי לנסות:

  • ממלאים את כל השדות באופן אוטומטי.
  • למלא שדה באופן אוטומטי ואז לרוקן אותו באופן ידני.
  • ממלאים שדה באופן אוטומטי ואז משנים אותו באופן ידני.
  • למלא שדה באופן ידני לגמרי.
  • משאירים שדה ריק.

תמיכה בדפדפנים

ההדגמה פועלת במכשירים ובגרסאות הדפדפנים העדכניים ביותר. היא מבוססת על זיהוי פסאודו-הקלאס של CSS‏ :autofill, שיש לו תמיכה רחבה בדפדפנים.

שלב 1: איסוף נתוני מילוי אוטומטי

הגדרת סטטוסים של מילוי אוטומטי

קודם כול, מגדירים את הסטטוסים האפשריים של שדות המילוי האוטומטי שמעניינים אתכם:

  • EMPTY: המשתמש משאיר את השדה ריק.
  • AUTOFILLED: המשתמש ממלא את השדה באמצעות מילוי אוטומטי בלבד.
  • AUTOFILLED_THEN_MODIFIED: המשתמש ממלא את השדה באמצעות מילוי אוטומטי, ולאחר מכן עורך את הערך שהושאר במילוי האוטומטי באופן ידני. לדוגמה, המשתמש ממלא את הכתובת והפרטים ליצירת קשר באופן אוטומטי, אבל מזין מספר טלפון אחר באופן ידני.
  • ONLY_MANUAL: המשתמש ממלא את השדה באופן ידני לחלוטין.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

הטמעת פונקציות שירות

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

  • getAllAutofilledFields בודק את כל הרכיבים מסוג <input> ו-<select> בתוך טופס נתון, ומחפש את נוכחות פסאודו-הקלאס :autofill ב-CSS. הפונקציה מניבה רשימה של רכיבים שהושלמו באופן אוטומטי.
  • checkIsAutofilled בודקת אם רכיב מסוים נכלל ברשימה הזו.
// Get all elements that are autofilled, using the :autofill pseudo-class
function getAllAutofilledFields(formElement) {
  return formElement.querySelectorAll(':autofill');
}

// Check if the passed element is in the list of autofilled fields
function checkIsAutofilled(allAutofilledFields, fieldElement) {
  return Array.from(allAutofilledFields).includes(fieldElement);
}

// Usage
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);

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

// Check if the value of the element is empty
function checkIsEmpty(fieldElement) {
  const value = fieldElement.value.trim();
  // value is a string, even for a type = number field
  const isEmpty = value === '';
  return isEmpty;
}

איפוס הסטטוס של המילוי האוטומטי

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

אוספים את כל השדות id מהטופס ומפעילים את הסטטוס של כל שדה ל-EMPTY.

// Global variable storing autofill statuses for each field
const autofillStatuses = {};
// Example: {
//     "name": "autofilled",
//     "street-address": "autofilled-then-modified",
//     "country": "only-manual"
// }

// Initialize autofill status for all fields
function initializeAutofillStatuses(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    autofillStatuses[fieldElement.id] = EMPTY;
  });
}

initializeAutofillStatuses(document.getElementById('form'));

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

// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
  return Array.from(formElement.querySelectorAll('input, select'));
}

מעקב אחרי שינויים

עכשיו הכול מוכן למעקב אחרי התנהגות המילוי האוטומטי.

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

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

// Add event listener to all fields to update autofill status
function initializeChangeObserver(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    fieldElement.addEventListener('change', () => {
      updateAutofillStatus(formElement, fieldElement);
    });
  });
}

// Update autofill status
function updateAutofillStatus(formElement, fieldElement) {
  const isEmpty = checkIsEmpty(fieldElement);
  const allAutofilledFields = getAllAutofilledFields(formElement);
  const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
  const previousAutofillStatus = autofillStatuses[fieldElement.id];
  if (isEmpty) {
    autofillStatuses[fieldElement.id] = EMPTY;
    // NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.
  } else {
    if (isAutofilled) {
      autofillStatuses[fieldElement.id] = AUTOFILLED;
    } else {
      if (
        previousAutofillStatus === ONLY_MANUAL ||
        previousAutofillStatus === EMPTY
      ) {
        // NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value
        autofillStatuses[fieldElement.id] = ONLY_MANUAL;
      } else if (
        previousAutofillStatus === AUTOFILLED ||
        previousAutofillStatus === AUTOFILLED_THEN_MODIFIED
      ) {
        autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
      }
    }
  }
}

initializeChangeObserver(document.getElementById('form'));

שליחת התוצאות לשרת

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

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
הדגמה של משתמש למעקב אחרי מילוי אוטומטי: אזור תצוגה לסטטוסים שונים של מילוי אוטומטי.
אזור התצוגה של סטטוסי המילוי האוטומטי של שדות שונים. זוהי הודעה למטרות הדגמה בלבד.

שלב 2: ניתוח התוצאות

צבירת האובייקטים מסוג autofillStatuses שאתם מקבלים ממספר רב של משתמשים וניתוח המגמות בנתונים.

קודם כול, כדאי לבדוק את התובנות לגבי השימוש הכולל במילוי אוטומטי: מהו אחוז המשתמשים שמשתמשים במילוי האוטומטי בדפדפן כדי למלא לפחות שדה אחד?

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

  • האם השדות של <label> לא ברורים? האם יש רמזים או תוספי placeholder שעשויים להטעות?
  • האם השתמשת בתחביר הנכון לערך autocomplete? בעיה נפוצה היא <input autocomplete="first-name">, שהדפדפנים לא ממלאים כי הערך הנכון הוא "given-name".

סיכום

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

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

מידע נוסף על מילוי אוטומטי