قياس ميزة الملء التلقائي للمتصفّح في نماذجك

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> غير واضح؟ هل هناك أي تلميحات أو عناصر نائبة قد تكون مضلِّلة؟
  • هل استخدمت بنية الجملة الصحيحة لقيمة autocomplete ؟ من المشاكل الشائعة هي <input autocomplete="first-name">، والتي لا تملأها المتصفّحات لأنّ القيمة الصحيحة هي "given-name".

الخاتمة

من خلال فهم سلوك الملء التلقائي والاستفادة منه، يمكنك تحسين تجربت الموقع الإلكتروني للمستخدم. طبِّق الأساليب الموضّحة في هذا الدليل للحصول على إحصاءات قيّمة عن كيفية تفاعل المستخدِمين مع نماذجك وتحديد الجوانب التي تحتاج إلى تحسين.

تذكَّر أنّ ميزة الملء التلقائي هي أداة فعّالة لتبسيط رحلة المستخدِم. يمكن أن يؤدي تحسين النماذج للاستفادة من ميزة الملء التلقائي إلى توفير تجربة أكثر سهولة لزوّارك.

راجِع جميع مراجع ميزة "الملء التلقائي".