پیگیری رفتار تکمیل خودکار با گوگل آنالیتیکس ۴

۱. مقدمه

این آزمایشگاه کد شما را در مورد نحوه ردیابی رفتار تکمیل خودکار در فرم‌های وب خود با استفاده از Google Analytics 4 (GA4) راهنمایی می‌کند. این آموزش بر اساس مفاهیم و انگیزه‌های اندازه‌گیری تکمیل خودکار که در مقالاتی مانند «اندازه‌گیری تکمیل خودکار مرورگر در فرم‌های شما در web.dev» مورد بحث قرار گرفته است، بنا شده است.

شما یاد خواهید گرفت که چگونه:

• جاوا اسکریپت را برای تشخیص تعاملات تکمیل خودکار، از جمله زمانی که یک فیلد با تکمیل خودکار، دستی یا ترکیبی از هر دو پر می‌شود، پیاده‌سازی کنید.
• یک رویداد سفارشی GA4 برای ردیابی وضعیت تکمیل خودکار تعریف کنید.
• داده‌های تکمیل خودکار را به عنوان پارامترهای سفارشی به GA4 ارسال کنید.
• ابعاد سفارشی را در GA4 برای گزارش‌گیری پیکربندی کنید.
• نحوه تجزیه و تحلیل داده‌های جمع‌آوری‌شده را درک کنید.

این رویکرد به شما امکان می‌دهد بفهمید که کاربران چقدر به تکمیل خودکار فرم‌ها تکیه می‌کنند، کدام فیلدها بیشتر به صورت خودکار تکمیل می‌شوند و مشکلات احتمالی مربوط به کاربردپذیری فرم را شناسایی کنید. این به شما بینشی در مورد چگونگی بهبود تجربه کاربری و افزایش تبدیل‌ها می‌دهد.

پیش‌نیازها

• دانش پایه در مورد HTML، CSS و جاوا اسکریپت.
• یک ویژگی Google Analytics 4 که در وب‌سایت شما تنظیم شده است.
• آشنایی با کتابخانه gtag.js برای ارسال رویدادها به GA4.
• دسترسی به HTML فرمی که می‌خواهید ردیابی کنید.
• درک اولیه از گزارش‌های گوگل آنالیتیکس ۴.

آنچه یاد خواهید گرفت

• نحوه تشخیص رفتار تکمیل خودکار با استفاده از جاوا اسکریپت، با در نظر گرفتن سناریوهای مختلف تعامل کاربر.
• نحوه ایجاد رویدادهای سفارشی GA4 با پارامترهای معنی‌دار.
• نحوه ارسال پارامترهای رویداد سفارشی به GA4، از جمله شناسه‌های فرم و فیلد.
• نحوه پیکربندی ابعاد سفارشی در GA4 برای تجزیه و تحلیل داده‌های جمع‌آوری‌شده.

آنچه نیاز دارید

• یک ویرایشگر متن یا IDE.
• یک مرورگر وب با ابزارهای توسعه‌دهندگان.
• کد وب‌سایت شما.
• حساب گوگل آنالیتیکس ۴ شما.

۲. منطق تشخیص تکمیل خودکار را پیاده‌سازی کنید

در این مرحله، کد جاوا اسکریپت را به صفحه وب شما اضافه خواهیم کرد. این اسکریپت فیلدهای فرم شما را رصد می‌کند تا تشخیص دهد که آیا آنها با استفاده از ویژگی تکمیل خودکار مرورگر پر شده‌اند یا خیر.

مثال ساختار فرم 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>

ردیابی تکمیل خودکار جاوا اسکریپت

کد جاوا اسکریپتی که تشخیص را انجام می‌دهد، به شرح زیر است: ردیابی را مقداردهی اولیه می‌کند، به تغییرات در فیلدهای مشخص شده گوش می‌دهد، وضعیت تکمیل خودکار را تعیین می‌کند و پس از ارسال فرم، رویدادی را به 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);

پیکربندی (بسیار مهم!)

قبل از اینکه اسکریپت به درستی کار کند، باید این دو خط را در کد جاوا اسکریپت تغییر دهید:

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 : اسکریپت ارائه شده هنگام ارسال پارامتر form_id به GA4، استفاده از ویژگی data-form-id فرم شما (در صورت وجود) را در اولویت قرار می‌دهد. این روش عموماً قوی‌تر از تکیه صرف بر ویژگی 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() : فرم را پس از ارسال رویداد به GA4 ارسال می‌کند.
• document.addEventListener('DOMContentLoaded', ...) : تضمین می‌کند که اسکریپت فقط پس از بارگذاری کامل ساختار HTML صفحه اجرا می‌شود و از بروز خطا در هنگام تلاش برای یافتن عناصری که هنوز وجود ندارند، جلوگیری می‌کند.

۳. آزمایش

• فرم را در مرورگر خود ارسال کنید.
• از گزارش‌های Realtime یا DebugView در GA4 برای تأیید ارسال رویداد autofill_form_interaction استفاده کنید.
• بررسی کنید که پارامترهای رویداد به درستی پر شده باشند (مثلاً form_id ، field_id ، autofill_status ).

نکته حرفه‌ای برای تست: از DebugView در GA4 (در مسیر Configure > DebugView) برای اعتبارسنجی دقیق و بلادرنگ رویدادها و پارامترها استفاده کنید. این ابزار اطلاعات فوری‌تر و جزئی‌تری نسبت به گزارش استاندارد Realtime در طول تست ارائه می‌دهد.

تطابق دقیق مورد نیاز: هنگام ایجاد ابعاد سفارشی، مطمئن شوید که نام 'پارامتر رویداد' که در GA4 وارد می‌کنید (مثلاً field_id ) دقیقاً با کلید پارامتر استفاده شده در فراخوانی gtag('event', ...) در کد جاوا اسکریپت شما، شامل زیرخط‌ها و حروف بزرگ و کوچک، مطابقت دارد.

۴. پیکربندی ابعاد سفارشی در GA4

برای استفاده از پارامترهای field_id و autofill_status در گزارش‌های GA4، باید ابعاد سفارشی ایجاد کنید:

1. به ملک GA4 خود بروید.
2. به «پیکربندی» > «تعاریف سفارشی» بروید.
3. یک بُعد سفارشی جدید ایجاد کنید:
   • پارامتر رویداد: field_id
   • نام بُعد: Field ID
   • محدوده: رویداد
4. یک بُعد سفارشی دیگر ایجاد کنید:
   • پارامتر رویداد: autofill_status
   • نام بُعد: Autofill Status
   • محدوده: رویداد
5. ایجاد یک بُعد سوم سفارشی:
   • پارامتر رویداد: form_id
   • نام بُعد: Form ID
   • محدوده: رویداد

تأخیر مهم در پردازش: پردازش ابعاد سفارشی تازه ایجاد شده توسط گوگل آنالیتیکس می‌تواند تا ۴۸ ساعت طول بکشد. شما نمی‌توانید بلافاصله پس از ایجاد، آنها را در گزارش‌های خود مشاهده یا استفاده کنید. بر این اساس برنامه‌ریزی کنید و بعداً دوباره بررسی کنید.

۵. تجزیه و تحلیل داده‌ها در GA4

پس از جمع‌آوری داده‌ها، می‌توانید آن‌ها را در گزارش‌های GA4 خود تجزیه و تحلیل کنید:

1. به «گزارش‌ها» > «مشارکت» > «رویدادها» بروید.
2. رویداد autofill_form_interaction خود را انتخاب کنید.
3. از منوی کشویی «بعد ثانویه» برای انتخاب ابعاد سفارشی خود استفاده کنید (مثلاً «شناسه فیلد»، «وضعیت تکمیل خودکار»، «شناسه فرم»). افزودن «شناسه فیلد» نشان می‌دهد که کدام فیلدهای خاص فرم، رویداد autofill_form_interaction را فعال می‌کنند. برای درک عمیق‌تر از نحوه تکمیل هر فیلد، می‌توانید «وضعیت تکمیل خودکار» را به عنوان بُعد دیگری در کنار «شناسه فیلد» بررسی کنید. این ترکیب مستقیماً توزیع انواع تعامل را برای هر فیلد نشان می‌دهد.
4. برای کسب بینش بیشتر در مورد داده‌ها، کاوش‌هایی ایجاد کنید. می‌توانید از تکنیک‌های مختلفی مانند موارد زیر استفاده کنید:
   • فرم رایگان : برای کاوش داده‌ها و ایجاد مصورسازی‌های سفارشی.
   • جدول : برای مشاهده داده‌ها در قالب جدول.
   • قیف : برای تجزیه و تحلیل مسیر کاربر در طول فرم. بررسی قیف می‌تواند به تجسم چگونگی پیشرفت کاربران در یک فرم چند مرحله‌ای کمک کند و به طور بالقوه مراحلی را که رفتار تکمیل خودکار (یا عدم وجود آن) بر پیشرفت تأثیر می‌گذارد، برجسته کند.
   

بینش‌های عمیق‌تر را باز کنید: اگرچه گزارش‌های رویداد استاندارد مفید هستند، از کاوش‌های GA4 (فرم رایگان، کاوش قیف و غیره) همراه با ابعاد سفارشی «شناسه فیلد» و «وضعیت تکمیل خودکار» خود برای تجزیه و تحلیل بسیار غنی‌تر و انعطاف‌پذیرتر از رفتار تکمیل خودکار کاربر استفاده کنید.

نمونه سوالاتی که می‌توانید با این داده‌ها پاسخ دهید:

• کدام فیلدها اغلب به صورت خودکار پر می‌شوند؟
• کاربران چقدر به تکمیل خودکار فرم‌ها اعتماد می‌کنند؟
• آیا فیلدهای خاصی وجود دارد که کاربران تمایل دارند اطلاعات را به صورت دستی پر کنند؟
• آیا رفتار تکمیل خودکار با گذشت زمان تغییر می‌کند؟
• رفتار تکمیل خودکار بسته به فرم چگونه تغییر می‌کند؟

۶. ملاحظات اضافی

• اعتبارسنجی فرم: در نظر بگیرید که چگونه اعتبارسنجی فرم بر تشخیص تکمیل خودکار تأثیر می‌گذارد. اگر اعتبارسنجی با شکست مواجه شود، ممکن است رویداد تغییر به درستی اجرا نشود.
• فرم‌های پویا: اگر فرم‌های پویا دارید، مطمئن شوید که کد جاوا اسکریپت شما می‌تواند تغییرات در تعداد و شناسه‌های فیلدها را مدیریت کند. ممکن است لازم باشد MutationObserver برای ردیابی تغییرات در فرم استفاده کنید.
• عملکرد: از اضافه کردن بیش از حد جاوا اسکریپت به صفحه خود خودداری کنید. حتماً کد خود را برای بررسی تأثیر عملکرد آزمایش کنید.
• حریم خصوصی کاربر: هنگام جمع‌آوری داده‌ها، به حریم خصوصی کاربر توجه داشته باشید. از جمع‌آوری اطلاعات حساس بدون رضایت صحیح خودداری کنید.
• محدودیت‌های رویداد: الگوریتم ژنتیک ۴ محدودیت‌هایی در تعداد رویدادها و پارامترهایی که می‌توانید ارسال کنید، دارد. پیاده‌سازی خود را بر این اساس برنامه‌ریزی کنید.
• فرم‌های چندگانه: اگر چندین فرم در یک صفحه دارید، مطمئن شوید که کد را برای ردیابی همه فرم‌ها تطبیق می‌دهید. شما باید انتخابگر formId و شنونده رویداد را برای هر فرم تطبیق دهید.
• دسترسی‌پذیری: اطمینان حاصل کنید که پیاده‌سازی شما برای کاربران دارای معلولیت قابل دسترسی است.
• آزمایش: پیاده‌سازی خود را در مرورگرها و دستگاه‌های مختلف به طور کامل آزمایش کنید تا مطمئن شوید که مطابق انتظار عمل می‌کند.

۷. نتیجه‌گیری

شما موفق شدید! از تنظیم شنونده‌های جاوا اسکریپت گرفته تا پیکربندی آن ابعاد سفارشی در گوگل آنالیتیکس ۴، شما با موفقیت مراحل را طی کرده‌اید و واقعاً بر ردیابی تکمیل خودکار غلبه کرده‌اید. اکنون کاملاً مجهز و آماده هستید تا داده‌هایی را که جمع‌آوری می‌کنید به تجربیات کاربری واقعاً لذت‌بخش و کارآمد در فرم‌های خود تبدیل کنید.

آماده باشید تا شاهد سرازیر شدن سیلی از بینش‌های ارزشمند باشید! شما قادر خواهید بود دقیقاً نحوه تعامل کاربران با هر فیلد را مشخص کنید، کشف کنید که کدام بخش‌های فرم‌های شما بیشترین بهره را از تکمیل خودکار می‌برند و هرگونه نقطه اصطکاک پنهانی را که ممکن است قبلاً نامرئی بوده باشد، شناسایی کنید. با این دانش قدرتمند، می‌توانید اصلاحات هدفمند و هوشمندانه‌ای انجام دهید، سفر کاربر را ساده کنید، میزان رها کردن فرم را کاهش دهید و شاهد افزایش حتی بیشتر نرخ تبدیل‌های مهم باشید.

قدرت بهینه‌سازی و اصلاح مداوم فرم‌های وب شما اکنون کاملاً در دستان شماست. به این نه فقط به عنوان یک آزمایشگاه کد تکمیل‌شده، بلکه به عنوان آغاز یک ماجراجویی هیجان‌انگیز و مداوم در طراحی مبتنی بر داده فکر کنید. پس پیش بروید، ابرقدرت‌های تحلیلی جدید خود را بپذیرید، با پیشرفت‌ها آزمایش کنید و فرم‌های خود را نه تنها کاربردی، بلکه برای هر کاربری که با آنها تعامل دارد، کاملاً شگفت‌انگیز کنید. بهینه‌سازی خوبی داشته باشید!