ติดตามลักษณะการทำงานของการป้อนข้อความอัตโนมัติด้วย Google Analytics 4

1. บทนำ

Codelab นี้จะแนะนําวิธีติดตามลักษณะการทํางานของการป้อนข้อความอัตโนมัติในแบบฟอร์มบนเว็บโดยใช้ Google Analytics 4 (GA4) โดยต่อยอดจากแนวคิดและแรงจูงใจในการวัดการป้อนข้อความอัตโนมัติที่กล่าวถึงในบทความต่างๆ เช่น วัดการป้อนข้อความอัตโนมัติของเบราว์เซอร์ในแบบฟอร์มใน web.dev

โดยคุณจะได้เรียนรู้วิธีต่อไปนี้

• ใช้ JavaScript เพื่อตรวจหาการโต้ตอบการป้อนข้อความอัตโนมัติ รวมถึงเมื่อมีการกรอกข้อมูลในช่องโดยการป้อนข้อความอัตโนมัติ การกรอกด้วยตนเอง หรือทั้ง 2 อย่างรวมกัน
• กําหนดเหตุการณ์ GA4 ที่กําหนดเองเพื่อติดตามสถานะการป้อนข้อความอัตโนมัติ
• ส่งข้อมูลการป้อนอัตโนมัติเป็นพารามิเตอร์ที่กำหนดเองไปยัง GA4
• กําหนดค่ามิติข้อมูลที่กําหนดเองใน GA4 สําหรับการรายงาน
• ทําความเข้าใจวิธีวิเคราะห์ข้อมูลที่รวบรวม

วิธีนี้ช่วยให้คุณทราบความถี่ที่ผู้ใช้ใช้การป้อนข้อความอัตโนมัติ ช่องที่ได้รับการป้อนข้อความอัตโนมัติบ่อยที่สุด และระบุปัญหาที่อาจเกิดขึ้นกับความสามารถในการใช้งานแบบฟอร์ม ซึ่งจะช่วยให้คุณได้รับข้อมูลเชิงลึกเกี่ยวกับวิธีปรับปรุงประสบการณ์ของผู้ใช้และเพิ่ม Conversion

ข้อกำหนดเบื้องต้น

• มีความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
• พร็อพเพอร์ตี้ Google Analytics 4 ที่ตั้งค่าในเว็บไซต์
• คุ้นเคยกับgtag.jsไลบรารีสำหรับการส่งเหตุการณ์ไปยัง GA4
• สิทธิ์เข้าถึง HTML ของแบบฟอร์มที่ต้องการติดตาม
• ความเข้าใจพื้นฐานเกี่ยวกับรายงาน Google Analytics 4

สิ่งที่คุณจะได้เรียนรู้

• วิธีตรวจหาลักษณะการทำงานของป้อนข้อความอัตโนมัติโดยใช้ JavaScript โดยพิจารณาสถานการณ์การโต้ตอบของผู้ใช้ที่แตกต่างกัน
• วิธีสร้างเหตุการณ์ GA4 ที่กําหนดเองด้วยพารามิเตอร์ที่มีความหมาย
• วิธีส่งพารามิเตอร์เหตุการณ์ที่กําหนดเองไปยัง GA4 รวมถึงตัวระบุแบบฟอร์มและฟิลด์
• วิธีกําหนดค่ามิติข้อมูลที่กําหนดเองใน GA4 เพื่อวิเคราะห์ข้อมูลที่รวบรวม

สิ่งที่คุณต้องมี

• โปรแกรมแก้ไขข้อความหรือ IDE
• เว็บเบราว์เซอร์ที่มีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
• โค้ดของเว็บไซต์
• บัญชี Google Analytics 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 ที่ทำการตรวจหา โดยจะเริ่มต้นการติดตาม เฝ้าดูการเปลี่ยนแปลงในช่องที่ระบุ กําหนดสถานะการป้อนข้อความอัตโนมัติ และส่งเหตุการณ์ไปยัง 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);

การกำหนดค่า (สำคัญมาก)

คุณต้องแก้ไข 2 บรรทัดนี้ภายในโค้ด 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 Analytics

แนวทางปฏิบัติแนะนำ: ใช้ data-form-id: สคริปต์ที่ระบุจะจัดลําดับความสําคัญของการใช้แอตทริบิวต์ data-form-id จากแบบฟอร์ม (หากมี) เมื่อส่งพารามิเตอร์ form_id ไปยัง GA4 โดยทั่วไปแล้ว วิธีนี้มีความเสถียรมากกว่าการใช้แอตทริบิวต์ 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 ของหน้าเว็บโหลดเสร็จแล้วเท่านั้น เพื่อป้องกันข้อผิดพลาดที่เกิดจากการพยายามค้นหาองค์ประกอบที่ยังไม่มีอยู่

3. การทดสอบ

• ส่งแบบฟอร์มในเบราว์เซอร์
• ใช้รายงานแบบเรียลไทม์หรือ DebugView ใน GA4 เพื่อยืนยันว่าระบบส่งเหตุการณ์ autofill_form_interaction แล้ว
• ตรวจสอบว่าพารามิเตอร์เหตุการณ์ได้รับการป้อนอย่างถูกต้อง (เช่น form_id, field_id, autofill_status)

เคล็ดลับมือโปรสําหรับการทดสอบ: ใช้ DebugView ใน GA4 (ในส่วนกําหนดค่า > DebugView) เพื่อการตรวจสอบเหตุการณ์และพารามิเตอร์แบบเรียลไทม์โดยละเอียด ซึ่งจะให้ข้อมูลที่ละเอียดและทันทีมากกว่ารายงานแบบเรียลไทม์มาตรฐานในระหว่างการทดสอบ

ต้องตรงกันทุกประการ: เมื่อสร้างมิติข้อมูลที่กําหนดเอง ให้ตรวจสอบว่าชื่อ "พารามิเตอร์เหตุการณ์" ที่คุณป้อนใน GA4 (เช่น field_id) ตรงกันทุกประการกับคีย์พารามิเตอร์ที่ใช้ในการเรียก gtag('event', ...) ในโค้ด JavaScript รวมถึงขีดล่างและตัวพิมพ์เล็ก/ใหญ่

4. กําหนดค่ามิติข้อมูลที่กําหนดเองใน GA4

หากต้องการใช้พารามิเตอร์ field_id และ autofill_status ในรายงาน GA4 คุณต้องสร้างมิติข้อมูลที่กําหนดเองโดยทําดังนี้

1. ไปที่พร็อพเพอร์ตี้ GA4
2. ไปที่ "กำหนดค่า" > "คำจำกัดความที่กำหนดเอง"
3. สร้างมิติข้อมูลที่กําหนดเองใหม่
   • พารามิเตอร์เหตุการณ์: field_id
   • ชื่อมิติข้อมูล: Field ID
   • ขอบเขต: เหตุการณ์
4. สร้างมิติข้อมูลที่กําหนดเองอีกรายการ
   • พารามิเตอร์เหตุการณ์: autofill_status
   • ชื่อมิติข้อมูล: Autofill Status
   • ขอบเขต: เหตุการณ์
5. สร้างมิติข้อมูลที่กำหนดเองที่ 3:
   • พารามิเตอร์เหตุการณ์: form_id
   • ชื่อมิติข้อมูล: Form ID
   • ขอบเขต: เหตุการณ์

ความล่าช้าในการประมวลผลที่สำคัญ: มิติข้อมูลที่กําหนดเองที่สร้างขึ้นใหม่จะใช้เวลาสูงสุด 48 ชั่วโมง ในการประมวลผลโดย Google Analytics คุณจะดูหรือใช้พร็อพเพอร์ตี้เหล่านั้นในรายงานไม่ได้ทันทีหลังจากสร้าง โปรดวางแผนตามนั้นและกลับมาตรวจสอบอีกครั้งในภายหลัง

5. วิเคราะห์ข้อมูลใน GA4

หลังจากรวบรวมข้อมูลแล้ว คุณจะวิเคราะห์ข้อมูลในรายงาน GA4 ได้โดยทำดังนี้

1. ไปที่ "รายงาน" > "การมีส่วนร่วม" > "เหตุการณ์"
2. เลือกautofill_form_interactionกิจกรรม
3. ใช้เมนูแบบเลื่อนลง"มิติข้อมูลรอง" เพื่อเลือกมิติข้อมูลที่กําหนดเอง (เช่น "รหัสฟิลด์" "สถานะการป้อนข้อความอัตโนมัติ" "รหัสแบบฟอร์ม") การเพิ่ม "รหัสฟิลด์" จะแสดงฟิลด์แบบฟอร์มที่เฉพาะเจาะจงซึ่งทริกเกอร์เหตุการณ์ autofill_form_interaction หากต้องการข้อมูลเชิงลึกที่ละเอียดยิ่งขึ้นเกี่ยวกับวิธีที่ผู้ใช้กรอกแต่ละฟิลด์ ให้ตรวจสอบ "สถานะการป้อนข้อความอัตโนมัติ" เป็นอีกมิติข้อมูลหนึ่งควบคู่ไปกับ "รหัสฟิลด์" ชุดค่าผสมนี้แสดงการกระจายประเภทการโต้ตอบสําหรับแต่ละฟิลด์โดยตรง
4. สร้างการสํารวจเพื่อรับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับข้อมูล คุณสามารถใช้เทคนิคต่างๆ เช่น
   • รูปแบบอิสระ: เพื่อสํารวจข้อมูลและสร้างภาพที่กําหนดเอง
   • ตาราง: ดูข้อมูลในรูปแบบตาราง
   • กระบวนการ: เพื่อวิเคราะห์เส้นทางของผู้ใช้ผ่านแบบฟอร์ม การสํารวจ Funnel ช่วยให้เห็นภาพความคืบหน้าของผู้ใช้ในแบบฟอร์มหลายขั้นตอน ซึ่งอาจเน้นระยะที่ลักษณะการทํางานของฟีเจอร์เติมข้อความอัตโนมัติ (หรือการไม่มีฟีเจอร์นี้) ส่งผลต่อความคืบหน้า
   

ปลดล็อกข้อมูลเชิงลึกที่ละเอียดยิ่งขึ้น: แม้ว่ารายงานเหตุการณ์มาตรฐานจะมีประโยชน์ แต่ให้ใช้ประโยชน์จากการสํารวจของ GA4 (รูปแบบอิสระ การสํารวจ Funnel ฯลฯ) ร่วมกับมิติข้อมูลที่กําหนดเอง "รหัสฟิลด์" และ "สถานะการป้อนข้อความอัตโนมัติ" เพื่อการวิเคราะห์พฤติกรรมการป้อนข้อความอัตโนมัติของผู้ใช้ที่ละเอียดยิ่งขึ้นและยืดหยุ่นมากขึ้น

ตัวอย่างคำถามที่คุณตอบได้ด้วยข้อมูลนี้

• ช่องใดที่ระบบป้อนข้อความอัตโนมัติบ่อยที่สุด
• ผู้ใช้พึ่งพาการป้อนข้อความอัตโนมัติบ่อยเพียงใด
• มีช่องใดบ้างที่ผู้ใช้มักจะกรอกข้อมูลด้วยตนเอง
• พฤติกรรมการป้อนข้อความอัตโนมัติเปลี่ยนแปลงไปตามเวลาไหม
• ลักษณะการทำงานของการป้อนข้อความอัตโนมัติเปลี่ยนแปลงไปอย่างไรเมื่อขึ้นอยู่กับแบบฟอร์ม

6. ปัจจัยพิจารณาเพิ่มเติม

• การตรวจสอบแบบฟอร์ม: พิจารณาว่าการตรวจสอบแบบฟอร์มส่งผลต่อการตรวจหาการป้อนอัตโนมัติอย่างไร หากการตรวจสอบไม่สำเร็จ ระบบอาจทริกเกอร์เหตุการณ์การเปลี่ยนแปลงไม่ถูกต้อง
• แบบฟอร์มแบบไดนามิก: หากมีแบบฟอร์มแบบไดนามิก โปรดตรวจสอบว่าโค้ด JavaScript สามารถจัดการการเปลี่ยนแปลงจํานวนและรหัสของช่องได้ คุณอาจต้องใช้ MutationObserver เพื่อติดตามการเปลี่ยนแปลงในแบบฟอร์ม
• ประสิทธิภาพ: หลีกเลี่ยงการเพิ่ม JavaScript ลงในหน้าเว็บมากเกินไป อย่าลืมทดสอบโค้ดเพื่อดูผลกระทบต่อประสิทธิภาพ
• ความเป็นส่วนตัวของผู้ใช้: โปรดคำนึงถึงความเป็นส่วนตัวของผู้ใช้เมื่อเก็บรวบรวมข้อมูล หลีกเลี่ยงการเก็บรวบรวมข้อมูลที่ละเอียดอ่อนโดยไม่ได้รับความยินยอมที่เหมาะสม
• ขีดจํากัดของเหตุการณ์: GA4 มีขีดจํากัดเกี่ยวกับจํานวนเหตุการณ์และพารามิเตอร์ที่คุณส่งได้ วางแผนการติดตั้งใช้งานตามนั้น
• แบบฟอร์มหลายรายการ: หากมีแบบฟอร์มหลายรายการในหน้าเดียวกัน ให้ปรับโค้ดเพื่อติดตามแบบฟอร์มทั้งหมด คุณจะต้องปรับformIdตัวเลือกและเครื่องมือฟังเหตุการณ์ให้เข้ากับแต่ละแบบฟอร์ม
• การช่วยเหลือพิเศษ: ตรวจสอบว่าการติดตั้งใช้งานของคุณเข้าถึงได้สำหรับผู้ใช้ที่มีข้อจำกัดทางร่างกาย
• การทดสอบ: ทดสอบการติดตั้งใช้งานอย่างละเอียดในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าทำงานได้ตามที่คาดไว้

7. บทสรุป

สำเร็จแล้ว! ตั้งแต่การตั้งค่าเครื่องมือตรวจสอบ JavaScript ไปจนถึงการกําหนดค่ามิติข้อมูลที่กําหนดเองเหล่านั้นใน Google Analytics 4 คุณได้ทําตามขั้นตอนต่างๆ จนสําเร็จและได้พิชิตการติดตามการป้อนข้อความอัตโนมัติอย่างแท้จริง ตอนนี้คุณพร้อมแล้วที่จะเปลี่ยนข้อมูลที่รวบรวมมาให้เป็นประสบการณ์ของผู้ใช้ที่น่าพึงพอใจและมีประสิทธิภาพอย่างแท้จริงในแบบฟอร์ม

เตรียมรับข้อมูลเชิงลึกที่มีประโยชน์ได้เลย คุณจะระบุได้อย่างแม่นยำว่าผู้ใช้โต้ตอบกับแต่ละช่องอย่างไร ค้นพบว่าส่วนใดของแบบฟอร์มได้รับประโยชน์มากที่สุดจากการป้อนข้อความอัตโนมัติ และระบุจุดที่ทำให้เกิดความไม่สะดวกที่อาจมองไม่เห็นก่อนหน้านี้ เมื่อมีความรู้ที่ทรงพลังนี้ คุณจะทำการปรับแต่งที่ตรงเป้าหมายและชาญฉลาด เพิ่มประสิทธิภาพเส้นทางของผู้ใช้ ลดการละทิ้งแบบฟอร์ม และดูอัตรา Conversion ที่สำคัญยิ่งเหล่านั้นเพิ่มขึ้นได้

ตอนนี้คุณสามารถเพิ่มประสิทธิภาพและปรับแต่งแบบฟอร์มบนเว็บได้อย่างต่อเนื่อง โปรดคิดว่านี่ไม่ใช่แค่ Codelab ที่ทำเสร็จแล้ว แต่เป็นจุดเริ่มต้นของการผจญภัยที่น่าตื่นเต้นและต่อเนื่องในการออกแบบที่อิงตามข้อมูล ดังนั้น จงใช้พลังวิเคราะห์ใหม่ของคุณ ทดลองปรับปรุง และทำให้แบบฟอร์มไม่เพียงใช้งานได้ แต่ยังยอดเยี่ยมสำหรับผู้ใช้ทุกคนที่โต้ตอบกับแบบฟอร์ม ขอให้สนุกกับการเพิ่มประสิทธิภาพ