Google Analytics 4 की मदद से, ऑटोमैटिक भरने की सुविधा के इस्तेमाल को ट्रैक करना

1. परिचय

इस कोडलैब में, Google Analytics 4 (GA4) का इस्तेमाल करके, वेब फ़ॉर्म पर अपने-आप भरने की सुविधा को ट्रैक करने का तरीका बताया गया है. यह लेख, ऑटोमैटिक तरीके से भरने की सुविधा को मेज़र करने के कॉन्सेप्ट और प्रेरणा पर आधारित है. जैसे, web.dev पर मौजूद अपने फ़ॉर्म पर ब्राउज़र की ऑटोमैटिक तरीके से भरने की सुविधा को मेज़र करना लेख.

आपको, इनके बारे में जानकारी मिलेगी:

ऑटोमैटिक जानकारी भरने की सुविधा से होने वाले इंटरैक्शन का पता लगाने के लिए, JavaScript लागू करें. इसमें यह भी शामिल है कि किसी फ़ील्ड में ऑटोमैटिक जानकारी भरने की सुविधा, मैन्युअल तरीके से या दोनों तरीकों से जानकारी भरी गई है.
अपने-आप जानकारी भरने की सुविधा की स्थिति को ट्रैक करने के लिए, कस्टम GA4 इवेंट तय करें.
ऑटोमैटिक भरने वाले डेटा को GA4 में कस्टम पैरामीटर के तौर पर भेजें.
रिपोर्टिंग के लिए, GA4 में कस्टम डाइमेंशन कॉन्फ़िगर करें.
इकट्ठा किए गए डेटा का विश्लेषण करने का तरीका जानें.

इस तरीके से, आपको यह समझने में मदद मिलती है कि उपयोगकर्ता कितनी बार अपने-आप भरने की सुविधा का इस्तेमाल करते हैं. साथ ही, यह भी पता चलता है कि किन फ़ील्ड में सबसे ज़्यादा बार अपने-आप भरने की सुविधा का इस्तेमाल किया जाता है. इसके अलावा, फ़ॉर्म के इस्तेमाल से जुड़ी संभावित समस्याओं का पता लगाने में भी मदद मिलती है. इससे आपको यह अहम जानकारी मिलेगी कि उपयोगकर्ता अनुभव को कैसे बेहतर बनाया जाए और कन्वर्ज़न कैसे बढ़ाए जाएं.

ज़रूरी शर्तें

एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी.
आपकी वेबसाइट पर Google Analytics 4 प्रॉपर्टी सेट अप की गई हो.
GA4 को इवेंट भेजने के लिए, gtag.js लाइब्रेरी के बारे में जानकारी.
आपको ट्रैक किए जाने वाले फ़ॉर्म के एचटीएमएल का ऐक्सेस होना चाहिए.
Google Analytics 4 की रिपोर्ट के बारे में बुनियादी जानकारी.

आपको क्या सीखने को मिलेगा

उपयोगकर्ता के अलग-अलग इंटरैक्शन के आधार पर, JavaScript का इस्तेमाल करके अपने-आप भरने की सुविधा का पता लगाने का तरीका.
काम के पैरामीटर वाले कस्टम GA4 इवेंट बनाने का तरीका.
फ़ॉर्म और फ़ील्ड आइडेंटिफ़ायर के साथ-साथ, GA4 में कस्टम इवेंट पैरामीटर कैसे भेजें.
इकट्ठा किए गए डेटा का विश्लेषण करने के लिए, GA4 में कस्टम डाइमेंशन कॉन्फ़िगर करने का तरीका.

आपको किन चीज़ों की ज़रूरत होगी

टेक्स्ट एडिटर या आईडीई.
डेवलपर टूल वाला वेब ब्राउज़र.
आपकी वेबसाइट का कोड.
आपका Google Analytics 4 खाता.

2. अपने-आप भरने की सुविधा का पता लगाने वाला लॉजिक लागू करना

इस चरण में, हम आपके वेबपेज में JavaScript कोड जोड़ेंगे. यह स्क्रिप्ट, आपके फ़ॉर्म फ़ील्ड पर नज़र रखेगी. इससे यह पता चलेगा कि उन्हें ब्राउज़र की अपने-आप भरने की सुविधा का इस्तेमाल करके भरा गया है या मैन्युअल तरीके से भरा गया है.

एचटीएमएल फ़ॉर्म स्ट्रक्चर का उदाहरण

सबसे पहले, आइए उस एचटीएमएल फ़ॉर्म का उदाहरण देखें जिस पर हमें काम करना है. इन बातों का ध्यान रखें:

फ़ॉर्म में 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.

सबसे सही तरीका: data-form-id का इस्तेमाल करें: उपलब्ध कराई गई स्क्रिप्ट, GA4 को form_id पैरामीटर भेजते समय, आपके फ़ॉर्म में मौजूद 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', ...): यह पक्का करता है कि स्क्रिप्ट सिर्फ़ तब चले, जब पेज का एचटीएमएल स्ट्रक्चर पूरी तरह से लोड हो गया हो. इससे उन एलिमेंट को ढूंढने की कोशिश करने पर होने वाली गड़बड़ियों को रोका जा सकता है जो अभी तक मौजूद नहीं हैं.

3. टेस्ट करना

अपने ब्राउज़र में फ़ॉर्म सबमिट करें.
GA4 में रीयलटाइम या DebugView रिपोर्ट का इस्तेमाल करके, यह पुष्टि करें कि autofill_form_interaction इवेंट भेजा जा रहा है.
देखें कि इवेंट के पैरामीटर सही तरीके से भरे गए हों. जैसे, form_id, field_id, autofill_status.

जांच के लिए अहम सुझाव: GA4 में DebugView का इस्तेमाल करें. यह कॉन्फ़िगर करें > DebugView में जाकर किया जा सकता है. इससे आपको इवेंट और पैरामीटर की पुष्टि करने के बारे में ज़्यादा जानकारी मिलेगी. साथ ही, यह जानकारी रीयल टाइम में मिलेगी. यह टेस्टिंग के दौरान, स्टैंडर्ड रीयलटाइम रिपोर्ट की तुलना में ज़्यादा तुरंत और ज़्यादा जानकारी देती है.

4. GA4 में कस्टम डाइमेंशन कॉन्फ़िगर करना

GA4 रिपोर्ट में field_id और autofill_status पैरामीटर का इस्तेमाल करने के लिए, आपको कस्टम डाइमेंशन बनाने होंगे:

अपनी GA4 प्रॉपर्टी पर जाएं.
"कॉन्फ़िगर करें" > "कस्टम डेफ़िनिशन" पर जाएं.
नया कस्टम डाइमेंशन बनाएं:
- इवेंट पैरामीटर: field_id
- डाइमेंशन का नाम: Field ID
- स्कोप: इवेंट
एक और कस्टम डाइमेंशन बनाएं:
- इवेंट पैरामीटर: autofill_status
- डाइमेंशन का नाम: Autofill Status
- स्कोप: इवेंट
तीसरा कस्टम डाइमेंशन बनाएं:
- इवेंट पैरामीटर: form_id
- डाइमेंशन का नाम: Form ID
- स्कोप: इवेंट

5. GA4 में डेटा का विश्लेषण करना

डेटा इकट्ठा करने के बाद, GA4 रिपोर्ट में उसका विश्लेषण किया जा सकता है:

"रिपोर्ट" > "यूज़र ऐक्टिविटी" > "इवेंट" पर जाएं.
अपना autofill_form_interaction इवेंट चुनें.
अपने कस्टम डाइमेंशन चुनने के लिए, "सेकंडरी डाइमेंशन" ड्रॉपडाउन का इस्तेमाल करें. उदाहरण के लिए, "फ़ील्ड आईडी", "अपने-आप भरने की सुविधा की स्थिति", "फ़ॉर्म आईडी". "फ़ील्ड आईडी" जोड़ने से पता चलेगा कि कौनसे फ़ॉर्म फ़ील्ड, autofill_form_interaction इवेंट को ट्रिगर कर रहे हैं.हर फ़ील्ड को कैसे पूरा किया गया, इस बारे में ज़्यादा जानकारी पाने के लिए, "फ़ील्ड आईडी" के साथ-साथ "अपने-आप भरने की सुविधा की स्थिति" को दूसरे डाइमेंशन के तौर पर देखा जा सकता है. इस कॉम्बिनेशन से, हर फ़ील्ड के लिए इंटरैक्शन टाइप के डिस्ट्रिब्यूशन के बारे में सीधे तौर पर पता चलता है.
डेटा के बारे में ज़्यादा अहम जानकारी पाने के लिए, एक्सप्लोरेशन बनाएं. इसके लिए, अलग-अलग तकनीकों का इस्तेमाल किया जा सकता है. जैसे:
- फ़्री फ़ॉर्म: डेटा एक्सप्लोर करने और कस्टम विज़ुअलाइज़ेशन बनाने के लिए.
- टेबल: डेटा को टेबल के फ़ॉर्मैट में देखने के लिए.
- फ़नल: फ़ॉर्म के ज़रिए उपयोगकर्ता के सफ़र का विश्लेषण करने के लिए. फ़नल एक्सप्लोरेशन से यह विज़ुअलाइज़ किया जा सकता है कि उपयोगकर्ता कई चरणों वाले फ़ॉर्म को कैसे भरते हैं. इससे उन चरणों को हाइलाइट किया जा सकता है जहां अपने-आप भरने की सुविधा (या इसके न होने) से प्रोग्रेस पर असर पड़ता है.

ज़्यादा अहम जानकारी पाएं: स्टैंडर्ड इवेंट रिपोर्ट काम की होती हैं. हालांकि, GA4 के एक्सप्लोरेशन (फ़्री फ़ॉर्म, फ़नल एक्सप्लोरेशन वगैरह) का इस्तेमाल करें. साथ ही, ‘फ़ील्ड आईडी' और ‘अपने-आप भरने की सुविधा की स्थिति' कस्टम डाइमेंशन का इस्तेमाल करें. इससे, उपयोगकर्ता के अपने-आप भरने की सुविधा के व्यवहार का ज़्यादा बेहतर और आसानी से विश्लेषण किया जा सकेगा.

इस डेटा की मदद से, इन सवालों के जवाब दिए जा सकते हैं:

कौनसे फ़ील्ड में सबसे ज़्यादा बार अपने-आप जानकारी भरी जाती है?
उपयोगकर्ता कितनी बार ऑटोमैटिक भरने की सुविधा का इस्तेमाल करते हैं?
क्या कुछ ऐसे फ़ील्ड हैं जिनमें उपयोगकर्ता मैन्युअल तरीके से जानकारी भरते हैं?
क्या समय के साथ, ऑटोमैटिक तरीके से जानकारी भरने की सुविधा के काम करने के तरीके में बदलाव होता है?
फ़ॉर्म के हिसाब से, जानकारी अपने-आप भरने की सुविधा कैसे काम करती है?

6. अन्य बातें

फ़ॉर्म की पुष्टि: ध्यान रखें कि फ़ॉर्म की पुष्टि करने से, ऑटोमैटिक तरीके से जानकारी भरने की सुविधा का पता लगाने पर क्या असर पड़ता है. अगर पुष्टि नहीं हो पाती है, तो हो सकता है कि बदलाव वाला इवेंट सही तरीके से ट्रिगर न हो.
डाइनैमिक फ़ॉर्म: अगर आपके पास डाइनैमिक फ़ॉर्म हैं, तो पक्का करें कि आपका JavaScript कोड, फ़ील्ड की संख्या और आईडी में हुए बदलावों को हैंडल कर सके. फ़ॉर्म में हुए बदलावों को ट्रैक करने के लिए, आपको MutationObserver का इस्तेमाल करना पड़ सकता है.
परफ़ॉर्मेंस: अपने पेज में बहुत ज़्यादा JavaScript न जोड़ें. पक्का करें कि आपने परफ़ॉर्मेंस पर पड़ने वाले असर के लिए, अपने कोड की जांच कर ली हो.
उपयोगकर्ता की निजता: डेटा इकट्ठा करते समय, उपयोगकर्ता की निजता का ध्यान रखें. सहमति लिए बिना संवेदनशील जानकारी इकट्ठा न करें.
इवेंट की सीमाएं: GA4 में, भेजे जा सकने वाले इवेंट और पैरामीटर की संख्या सीमित होती है. इसके हिसाब से, लागू करने का प्लान बनाएं.
एक से ज़्यादा फ़ॉर्म: अगर आपके पास एक ही पेज पर एक से ज़्यादा फ़ॉर्म हैं, तो पक्का करें कि आपने सभी फ़ॉर्म को ट्रैक करने के लिए कोड में बदलाव किया हो. आपको हर फ़ॉर्म के लिए, formId सिलेक्टर और इवेंट लिसनर को अडैप्ट करना होगा.
सुलभता: पक्का करें कि आपकी सेटिंग, दिव्यांग लोगों के लिए सुलभ हो.
जांच: अलग-अलग ब्राउज़र और डिवाइसों पर, लागू किए गए बदलावों की अच्छी तरह से जांच करें. इससे यह पक्का किया जा सकेगा कि बदलाव आपकी उम्मीद के मुताबिक काम कर रहे हैं.

7. नतीजा

आपने कर दिखाया! आपने JavaScript लिसनर सेट अप करने से लेकर Google Analytics 4 में उन कस्टम डाइमेंशन को कॉन्फ़िगर करने तक, सभी चरणों को पूरा कर लिया है. साथ ही, आपने ऑटोफ़िल ट्रैकिंग को सही तरीके से लागू कर लिया है. अब आपके पास पूरी जानकारी है. इसलिए, अपने फ़ॉर्म पर इकट्ठा किए गए डेटा को, लोगों के लिए बेहतर और असरदार अनुभव में बदलें.

अब आपको अहम जानकारी मिलना शुरू हो जाएगी! इससे आपको यह पता चलेगा कि उपयोगकर्ता हर फ़ील्ड के साथ कैसे इंटरैक्ट करते हैं. साथ ही, यह भी पता चलेगा कि आपके फ़ॉर्म के किन हिस्सों को अपने-आप भरने की सुविधा से सबसे ज़्यादा फ़ायदा मिलता है. इसके अलावा, आपको ऐसे फ़्रिक्शन पॉइंट का पता चलेगा जो पहले नहीं दिखते थे. इस अहम जानकारी की मदद से, टारगेट किए गए स्मार्ट बदलाव किए जा सकते हैं. साथ ही, उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है, फ़ॉर्म को बीच में छोड़ने वाले लोगों की संख्या कम की जा सकती है, और कन्वर्ज़न रेट को और भी ज़्यादा बढ़ाया जा सकता है.

अब आपके पास अपने वेब फ़ॉर्म को लगातार ऑप्टिमाइज़ और बेहतर बनाने का विकल्प है. इसे सिर्फ़ एक पूरा किया गया कोडलैब न समझें. यह डेटा पर आधारित डिज़ाइन के रोमांचक और लगातार चलने वाले एडवेंचर की शुरुआत है. इसलिए, आगे बढ़ें और अपनी नई विश्लेषणात्मक क्षमताओं का इस्तेमाल करें. साथ ही, सुधारों के साथ एक्सपेरिमेंट करें. अपने फ़ॉर्म को सिर्फ़ काम करने लायक़ न बनाएं, बल्कि उन्हें हर उस उपयोगकर्ता के लिए बेहतरीन बनाएं जो उनसे इंटरैक्ट करता है. ऑप्टिमाइज़ करने के लिए शुभकामनाएं!