تتبُّع سلوك ميزة "الملء التلقائي" باستخدام "إحصاءات Google‏ 4"

1. مقدمة

يرشدك هذا الدرس العملي إلى كيفية تتبُّع سلوك التعبئة التلقائية في نماذج الويب باستخدام "إحصاءات Google‏ 4". ويستند إلى المفاهيم والأسباب التي تدفع إلى قياس ميزة "الملء التلقائي" التي تمت مناقشتها في مقالات، مثل قياس ميزة "الملء التلقائي" في المتصفّح على النماذج على web.dev.

ستتعرَّف على كيفية:

• استخدِم JavaScript لرصد تفاعلات الملء التلقائي، بما في ذلك الحالات التي يتم فيها ملء حقل من خلال الملء التلقائي أو يدويًا أو مزيج من كليهما.
• حدِّد حدثًا مخصّصًا في "إحصاءات Google‏ 4" لتتبُّع حالة الملء التلقائي.
• إرسال بيانات الملء التلقائي كمعلّمات مخصّصة إلى "إحصاءات Google‏ 4"
• إعداد السمات المخصّصة في "إحصاءات Google‏ 4" لإعداد التقارير
• فهم كيفية تحليل البيانات التي تم جمعها

تتيح لك هذه الطريقة معرفة عدد المرات التي يعتمد فيها المستخدمون على ميزة "التعبئة التلقائية"، والحقول التي يتم تعبئتها تلقائيًا بشكل متكرر، وتحديد المشاكل المحتملة المتعلقة بسهولة استخدام النماذج. سيمنحك ذلك إحصاءات حول كيفية تحسين تجربة المستخدم وزيادة الإحالات الناجحة.

المتطلبات الأساسية

• معرفة أساسية بلغات HTML وCSS وJavaScript
• موقع على "إحصاءات Google‏ 4" تم إعداده على موقعك الإلكتروني
• الإلمام بمكتبة gtag.js لإرسال الأحداث إلى "إحصاءات Google‏ 4"
• الوصول إلى رمز HTML للنموذج الذي تريد تتبُّعه
• فهم أساسي لتقارير "إحصاءات Google‏ 4"

أهداف الدورة التعليمية

• كيفية رصد سلوك التعبئة التلقائية باستخدام JavaScript، مع الأخذ في الاعتبار سيناريوهات تفاعل المستخدم المختلفة
• كيفية إنشاء أحداث مخصّصة في "إحصاءات Google‏ 4" باستخدام مَعلمات مفيدة
• كيفية إرسال مَعلمات الأحداث المخصّصة إلى "إحصاءات Google‏ 4"، بما في ذلك معرّفات النماذج والحقول
• كيفية إعداد سمات مخصّصة في "إحصاءات Google‏ 4" لتحليل البيانات التي يتم جمعها

المتطلبات

• محرّر نصوص أو بيئة تطوير متكاملة
• متصفّح ويب يتضمّن أدوات المطوّرين
• رمز موقعك الإلكتروني
• حسابك على "إحصاءات Google‏ 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 الذي ينفّذ عملية الرصد. تعمل هذه الوظيفة على بدء عملية التتبُّع، والاستماع إلى التغييرات في الحقول المحدّدة، وتحديد حالة الملء التلقائي، وإرسال حدث إلى "إحصاءات Google‏ 4" عند إرسال النموذج.

// 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".

أفضل الممارسات: استخدِم data-form-id: يعطي النص البرمجي المقدَّم الأولوية لاستخدام السمة data-form-id من نموذجك (إذا كانت متوفّرة) عند إرسال المَعلمة form_id إلى "إحصاءات Google‏ 4". يكون هذا الإجراء أكثر فعالية بشكل عام من الاعتماد على السمة id فقط، خاصةً إذا كنت تتتبّع نماذج متعدّدة أو تستخدم أُطرًا قد تتلاعب بمعرّفات العناصر. تأكَّد من ضبط data-form-id على

لهذه الميزة.

شرح الرمز البرمجي:

• ‫form.dataset.formId: للحصول على قيمة السمة data-form-id لاستخدامها كمَعلمة formId.
• ‫event.preventDefault(): يمنع إرسال النموذج التلقائي، ما يسمح لنا بإرسال الحدث قبل إرسال النموذج.
• ‫gtag('event', 'autofill_form_interaction', ...): يرسل الحدث المخصّص مع المَعلمات التالية:
• ‫form_id: رقم تعريف النموذج.
• ‫field_id: معرّف الحقل.
• autofill_status: حالة الملء التلقائي الحالية للحقل
• form.submit(): يرسل النموذج بعد إرسال الحدث إلى "إحصاءات Google‏ 4".
• ‫document.addEventListener('DOMContentLoaded', ...): يضمن عدم تشغيل النص البرمجي إلا بعد تحميل بنية HTML للصفحة بالكامل، ما يمنع حدوث أخطاء عند محاولة العثور على عناصر غير متوفّرة بعد.

3- الاختبار

• أرسِل النموذج في المتصفّح.
• استخدِم تقريرَي الوقت الفعلي أو DebugView في "إحصاءات Google‏ 4" للتأكّد من إرسال الحدث autofill_form_interaction.
• تأكَّد من ملء مَعلمات الحدث بشكل صحيح (مثل form_id وfield_id وautofill_status).

نصيحة احترافية للاختبار: استخدِم DebugView في "إحصاءات Google‏ 4" (ضمن "ضبط" > "DebugView") للتحقّق من صحة الأحداث والمَعلمات بالتفصيل وفي الوقت الفعلي. ويوفّر معلومات أكثر فورية وتفصيلاً من تقرير "الوقت الفعلي" العادي أثناء الاختبار.

المطابقة التامة مطلوبة: عند إنشاء السمات المخصّصة، تأكَّد من أنّ اسم "مَعلمة خاصة بالحدث" الذي تدخله في "إحصاءات Google‏ 4" (مثل field_id) يتطابق تمامًا مع مفتاح المَعلمة المستخدَم في طلب gtag('event', ...) في رمز JavaScript، بما في ذلك الشرطات السفلية وحالة الأحرف.

4. ضبط السمات المخصّصة في "إحصاءات Google‏ 4"

لاستخدام المَعلمتَين field_id وautofill_status في تقارير "إحصاءات Google‏ 4"، عليك إنشاء سمات مخصّصة:

1. انتقِل إلى موقع إحصاءات Google‏ 4 (GA4).
2. انتقِل إلى "الإعداد" > "التعريفات المخصّصة".
3. أنشِئ سمة مخصّصة جديدة:
   • مَعلمة خاصة بالحدث: field_id
   • اسم السمة: Field ID
   • المستوى: الحدث
4. أنشِئ سمة مخصّصة أخرى:
   • مَعلمة خاصة بالحدث: autofill_status
   • اسم السمة: Autofill Status
   • المستوى: الحدث
5. أنشِئ سمة مخصّصة ثالثة:
   • مَعلمة خاصة بالحدث: form_id
   • اسم السمة: Form ID
   • المستوى: الحدث

تأخُّر مهم في المعالجة: قد تستغرق معالجة المكوّنات المخصّصة التي تم إنشاؤها حديثًا ما يصل إلى 48 ساعة من قِبل "إحصاءات Google". لن تتمكّن من الاطّلاع عليها أو استخدامها في تقاريرك مباشرةً بعد إنشائها. خطِّط وفقًا لذلك وعُد إلى المكان نفسه لاحقًا.

5- تحليل البيانات في "إحصاءات Google‏ 4"

بعد جمع البيانات، يمكنك تحليلها في تقارير "إحصاءات Google‏ 4" باتّباع الخطوات التالية:

1. انتقِل إلى التقارير > التفاعل > الأحداث.
2. اختَر autofill_form_interaction الحدث.
3. استخدِم القائمة المنسدلة "السمة الثانوية" لاختيار سماتك المخصّصة (مثل "معرّف الحقل" و"حالة الملء التلقائي" و"معرّف النموذج"). ستؤدي إضافة "معرّف الحقل" إلى عرض حقول النموذج المحدّدة التي تؤدي إلى تشغيل الحدث autofill_form_interaction. للحصول على إحصاءات أعمق حول كيفية إكمال كل حقل، يمكنك التحقّق من "حالة الملء التلقائي" كسمة أخرى إلى جانب "معرّف الحقل". تعرض هذه المجموعة مباشرةً توزيع أنواع التفاعلات لكل حقل.
4. أنشئ استكشافات للحصول على مزيد من الإحصاءات حول البيانات. يمكنك استخدام أساليب مختلفة، مثل:
   • التصميم الحرّ: لاستكشاف البيانات وإنشاء عروض مرئية مخصّصة
   • جدول: للاطّلاع على البيانات بتنسيق جدول
   • مسار الإحالة الناجحة: لتحليل رحلة المستخدم عبر النموذج. يمكن أن يساعد استكشاف خطوات المستخدمين في عرض كيفية تقدّم المستخدمين خلال نموذج متعدّد الخطوات، ما قد يسلّط الضوء على المراحل التي يؤثّر فيها سلوك التعبئة التلقائية (أو عدم توفّره) في التقدّم.
   

الحصول على إحصاءات أكثر تفصيلاً: على الرغم من أنّ تقارير الأحداث العادية مفيدة، يمكنك الاستفادة من الاستكشافات في "إحصاءات Google‏ 4" (مثل الاستكشاف ذي التصميم المرن واستكشاف خطوات المستخدمين وغير ذلك) مع سماتك المخصّصة "معرّف الحقل" و"حالة الملء التلقائي" لإجراء تحليل أكثر ثراءً ومرونةً لسلوك الملء التلقائي لدى المستخدمين.

أمثلة على الأسئلة التي يمكنك الإجابة عنها باستخدام هذه البيانات:

• ما هي الحقول التي يتم ملؤها تلقائيًا بشكل متكرر؟
• كم مرة يعتمد المستخدمون على ميزة "الملء التلقائي"؟
• هل هناك حقول معيّنة يميل المستخدمون إلى ملء المعلومات فيها يدويًا؟
• هل يتغيّر سلوك الملء التلقائي بمرور الوقت؟
• كيف يتغيّر سلوك الملء التلقائي حسب النموذج؟

6. اعتبارات إضافية

• التحقّق من صحة النموذج: يجب مراعاة تأثير التحقّق من صحة النموذج في رصد الملء التلقائي. في حال تعذُّر التحقّق من الصحة، قد لا يتم تشغيل حدث التغيير بشكلٍ صحيح.
• النماذج الديناميكية: إذا كانت لديك نماذج ديناميكية، تأكَّد من أنّ رمز JavaScript يمكنه التعامل مع التغييرات في عدد الحقول ومعرّفاتها. قد تحتاج إلى استخدام MutationObserver لتتبُّع التغييرات في النموذج.
• الأداء: تجنَّب إضافة الكثير من JavaScript إلى صفحتك. احرص على اختبار الرمز البرمجي لمعرفة تأثيره في الأداء.
• خصوصية المستخدم: يجب مراعاة خصوصية المستخدم عند جمع البيانات. تجنَّب جمع معلومات حساسة بدون الحصول على الموافقة المناسبة.
• حدود الأحداث: تفرض "إحصاءات Google‏ 4" حدودًا على عدد الأحداث والمَعلمات التي يمكنك إرسالها. خطِّط لعملية التنفيذ وفقًا لذلك.
• نماذج متعدّدة: إذا كان لديك نماذج متعدّدة في الصفحة نفسها، احرص على تعديل الرمز لتتبُّع جميع النماذج. عليك تعديل أداة الاختيار formId ومتتبِّع الأحداث لكل نموذج.
• تسهيل الاستخدام: تأكَّد من أنّ عملية التنفيذ تتيح للمستخدمين الذين يعانون من عجز إمكانية الوصول إلى المحتوى.
• الاختبار: اختبِر عملية التنفيذ بدقة في متصفّحات وأجهزة مختلفة للتأكّد من أنّها تعمل على النحو المتوقّع.

7. الخاتمة

أحسنت! بدءًا من إعداد أدوات الاستماع إلى JavaScript وصولاً إلى ضبط هذه السمات المخصّصة في "إحصاءات Google‏ 4"، لقد اجتزت الخطوات بنجاح وتمكّنت من تتبُّع ميزة "الملء التلقائي". أنت الآن مجهّز بالكامل ومستعد لتحويل البيانات التي تجمعها إلى تجارب مستخدمين ممتعة وفعّالة حقًا على نماذجك.

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

أصبح بإمكانك الآن تحسين نماذج الويب وتعديلها باستمرار. لا تُعدّ هذه مجرد تجربة Codelab مكتملة، بل هي بداية مغامرة مستمرة ومثيرة في التصميم المستند إلى البيانات. إذًا، استعدّ للاستفادة من قدراتك التحليلية الجديدة، وجرِّب التحسينات، واجعل نماذجك ليست وظيفية فحسب، بل مذهلة تمامًا لكل مستخدم يتفاعل معها. نتمنّى لك تجربة تحسين ناجحة.