Theo dõi hành vi Tự động điền bằng Google Analytics 4

1. Giới thiệu

Lớp học lập trình này hướng dẫn bạn cách theo dõi hành vi tự động điền trên biểu mẫu web bằng Google Analytics 4 (GA4). API này dựa trên các khái niệm và động lực để đo lường tính năng tự động điền được thảo luận trong các bài viết như Đo lường tính năng tự động điền của trình duyệt trên các biểu mẫu trên web.dev.

Bạn sẽ tìm hiểu cách:

• Triển khai JavaScript để phát hiện các hoạt động tương tác tự động điền, bao gồm cả khi một trường được điền bằng tính năng tự động điền, theo cách thủ công hoặc kết hợp cả hai.
• Xác định một sự kiện tuỳ chỉnh trên GA4 để theo dõi trạng thái tự động điền.
• Gửi dữ liệu tự động điền dưới dạng thông số tuỳ chỉnh đến GA4.
• Định cấu hình phương diện tuỳ chỉnh trong GA4 để báo cáo.
• Hiểu cách phân tích dữ liệu đã thu thập.

Phương pháp này giúp bạn biết được tần suất người dùng sử dụng tính năng tự động điền, những trường nào thường được tự động điền nhất và xác định các vấn đề tiềm ẩn về khả năng sử dụng biểu mẫu. Nhờ đó, bạn sẽ biết được cách cải thiện trải nghiệm người dùng và tăng số lượt chuyển đổi.

Điều kiện tiên quyết

• Kiến thức cơ bản về HTML, CSS và JavaScript.
• Một tài sản Google Analytics 4 được thiết lập trên trang web của bạn.
• Quen thuộc với thư viện gtag.js để gửi sự kiện đến GA4.
• Có quyền truy cập vào HTML của biểu mẫu mà bạn muốn theo dõi.
• Hiểu biết cơ bản về báo cáo Google Analytics 4.

Kiến thức bạn sẽ học được

• Cách phát hiện hành vi tự động điền bằng JavaScript, có xét đến các trường hợp lượt tương tác khác nhau của người dùng.
• Cách tạo sự kiện GA4 tuỳ chỉnh bằng các thông số có ý nghĩa.
• Cách gửi thông số sự kiện tuỳ chỉnh đến GA4, bao gồm cả giá trị nhận dạng biểu mẫu và trường.
• Cách định cấu hình phương diện tuỳ chỉnh trong GA4 để phân tích dữ liệu đã thu thập.

Bạn cần có

• Một trình chỉnh sửa văn bản hoặc IDE.
• Một trình duyệt web có các công cụ dành cho nhà phát triển.
• Mã của trang web.
• Tài khoản Google Analytics 4 của bạn.

2. Triển khai logic phát hiện tính năng Tự động điền

Trong bước này, chúng ta sẽ thêm mã JavaScript vào trang web của bạn. Tập lệnh này sẽ theo dõi các trường trong biểu mẫu để phát hiện thời điểm các trường được điền bằng tính năng tự động điền của trình duyệt so với phương thức nhập thủ công.

Ví dụ về cấu trúc biểu mẫu HTML

Trước tiên, hãy xem biểu mẫu HTML mẫu mà chúng ta sẽ sử dụng. Những điều quan trọng cần lưu ý là:

• Bản thân biểu mẫu có một id (ví dụ: myForm) và tốt nhất là một thuộc tính data-form-id (ví dụ: data-form-id="myForm").
• Mỗi trường nhập dữ liệu mà bạn muốn theo dõi đều cần một id duy nhất (ví dụ: 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 theo dõi tính năng Tự động điền

Sau đây là mã JavaScript thực hiện việc phát hiện. Thao tác này sẽ khởi động tính năng theo dõi, theo dõi các thay đổi trong những trường được chỉ định, xác định trạng thái tự động điền và gửi một sự kiện đến GA4 khi biểu mẫu được gửi.

// 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);

Cấu hình (Rất quan trọng!)

Để tập lệnh hoạt động chính xác, bạn phải sửa đổi 2 dòng này trong mã 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.

Việc cần làm: Nếu bạn không cập nhật formId và fieldsToTrack cho phù hợp với biểu mẫu HTML và mã nhận dạng trường cụ thể, thì tập lệnh theo dõi sẽ không tìm thấy các phần tử biểu mẫu của bạn và không có dữ liệu nào được gửi đến Google Analytics.

Thực tiễn tốt nhất: Sử dụng data-form-id: Tập lệnh được cung cấp ưu tiên sử dụng thuộc tính data-form-id trong biểu mẫu của bạn (nếu có) khi gửi tham số form_id đến GA4. Cách này thường mạnh mẽ hơn so với việc chỉ dựa vào thuộc tính id, đặc biệt nếu bạn theo dõi nhiều biểu mẫu hoặc sử dụng các khung có thể thao tác với mã nhận dạng phần tử. Đảm bảo bạn đã đặt data-form-id trên

cho lợi ích này.

Giải thích mã:

• form.dataset.formId: Lấy giá trị của thuộc tính data-form-id để dùng làm tham số formId.
• event.preventDefault(): Ngăn chặn việc gửi biểu mẫu mặc định, cho phép chúng tôi gửi sự kiện trước khi gửi biểu mẫu.
• gtag('event', 'autofill_form_interaction', ...): Gửi sự kiện tuỳ chỉnh kèm theo các tham số sau:
• form_id: Mã nhận dạng của biểu mẫu.
• field_id: Mã nhận dạng của trường.
• autofill_status: Trạng thái hiện tại của tính năng tự động điền cho trường.
• form.submit(): Gửi biểu mẫu sau khi gửi sự kiện đến GA4.
• document.addEventListener('DOMContentLoaded', ...): Đảm bảo tập lệnh chỉ chạy sau khi cấu trúc HTML của trang được tải đầy đủ, ngăn chặn các lỗi khi cố gắng tìm các phần tử chưa tồn tại.

3. Thử nghiệm

• Gửi biểu mẫu trong trình duyệt.
• Sử dụng báo cáo Theo thời gian thực hoặc DebugView trong GA4 để xác minh rằng sự kiện autofill_form_interaction đang được gửi.
• Kiểm tra để đảm bảo các tham số sự kiện được điền chính xác (ví dụ: form_id, field_id, autofill_status).

Mẹo hay để kiểm thử: Sử dụng DebugView trong GA4 (trong mục Định cấu hình > DebugView) để xác thực chi tiết sự kiện và thông số theo thời gian thực. Trong quá trình thử nghiệm, báo cáo này cung cấp thông tin chi tiết và tức thì hơn so với Báo cáo theo thời gian thực tiêu chuẩn.

Cần có giá trị khớp chính xác: Khi tạo phương diện tuỳ chỉnh, hãy đảm bảo tên "Thông số sự kiện" mà bạn nhập trong GA4 (ví dụ: field_id) khớp chính xác với khoá thông số được dùng trong lệnh gọi gtag('event', ...) trong mã JavaScript, bao gồm cả dấu gạch dưới và trường hợp.

4. Định cấu hình phương diện tuỳ chỉnh trong GA4

Để sử dụng các thông số field_id và autofill_status trong báo cáo GA4, bạn cần tạo phương diện tuỳ chỉnh:

1. Chuyển đến tài sản GA4 của bạn.
2. Chuyển đến phần "Định cấu hình" > "Định nghĩa tuỳ chỉnh".
3. Tạo một phương diện tuỳ chỉnh mới:
   • Thông số sự kiện: field_id
   • Tên phương diện: Field ID
   • Phạm vi: Sự kiện
4. Tạo một phương diện tuỳ chỉnh khác:
   • Thông số sự kiện: autofill_status
   • Tên phương diện: Autofill Status
   • Phạm vi: Sự kiện
5. Tạo phương diện tuỳ chỉnh thứ ba:
   • Thông số sự kiện: form_id
   • Tên phương diện: Form ID
   • Phạm vi: Sự kiện

Lưu ý quan trọng về độ trễ xử lý: Google Analytics có thể mất tối đa 48 giờ để xử lý các phương diện tuỳ chỉnh mới tạo. Bạn sẽ không thể xem hoặc sử dụng các chỉ số này trong báo cáo ngay sau khi tạo. Hãy lên kế hoạch cho phù hợp và kiểm tra lại sau.

5. Phân tích dữ liệu trong GA4

Sau khi thu thập dữ liệu, bạn có thể phân tích dữ liệu đó trong báo cáo GA4:

1. Chuyển đến "Báo cáo" > "Mức độ tương tác" > "Sự kiện".
2. Chọn sự kiện autofill_form_interaction.
3. Sử dụng trình đơn thả xuống "Phương diện phụ" để chọn phương diện tuỳ chỉnh (ví dụ: "Mã trường", "Trạng thái tự động điền", "Mã biểu mẫu"). Việc thêm "Mã trường" sẽ cho biết những trường biểu mẫu cụ thể đang kích hoạt sự kiện autofill_form_interaction.Để hiểu rõ hơn về cách hoàn thành từng trường, bạn có thể kiểm tra "Trạng thái tự động điền" làm một phương diện khác cùng với "Mã trường". Tổ hợp này cho thấy trực tiếp mức phân phối các loại hoạt động tương tác cho từng trường.
4. Tạo Báo cáo khám phá để khai thác thêm thông tin chi tiết về dữ liệu. Bạn có thể sử dụng nhiều kỹ thuật, chẳng hạn như:
   • Biểu mẫu tuỳ ý: Để khám phá dữ liệu và tạo hình ảnh tuỳ chỉnh.
   • Bảng: Để xem dữ liệu ở định dạng bảng.
   • Phễu: Để phân tích hành trình của người dùng thông qua biểu mẫu. Kỹ thuật khám phá phễu có thể giúp bạn hình dung cách người dùng tiến hành điền vào một biểu mẫu nhiều bước, có thể làm nổi bật những giai đoạn mà hành vi tự động điền (hoặc việc không có hành vi này) ảnh hưởng đến tiến trình.
   

Khám phá thông tin chi tiết chuyên sâu hơn: Mặc dù báo cáo Sự kiện chuẩn rất hữu ích, nhưng bạn nên tận dụng công cụ Khám phá của GA4 (Biểu mẫu tuỳ ý, Khám phá phễu, v.v.) kết hợp với phương diện tuỳ chỉnh "Mã nhận dạng trường" và "Trạng thái điền sẵn" để phân tích hành vi điền sẵn của người dùng một cách linh hoạt và chi tiết hơn.

Ví dụ về những câu hỏi mà bạn có thể trả lời bằng dữ liệu này:

• Những trường nào thường được tự động điền nhất?
• Tần suất người dùng sử dụng tính năng tự động điền là bao nhiêu?
• Có những trường cụ thể mà người dùng thường điền thông tin theo cách thủ công không?
• Hành vi tự động điền có thay đổi theo thời gian không?
• Hành vi tự động điền thay đổi như thế nào tuỳ thuộc vào biểu mẫu?

6. Các yếu tố cần cân nhắc khác

• Xác thực biểu mẫu: Cân nhắc mức độ ảnh hưởng của việc xác thực biểu mẫu đến tính năng phát hiện thông tin tự động điền. Nếu quá trình xác thực không thành công, sự kiện thay đổi có thể không được kích hoạt đúng cách.
• Biểu mẫu động: Nếu bạn có biểu mẫu động, hãy đảm bảo mã JavaScript của bạn có thể xử lý các thay đổi về số lượng và mã nhận dạng của các trường. Bạn có thể cần sử dụng MutationObserver để theo dõi các thay đổi trong biểu mẫu.
• Hiệu suất: Tránh thêm quá nhiều JavaScript vào trang. Hãy nhớ kiểm thử mã của bạn để đánh giá tác động đến hiệu suất.
• Quyền riêng tư của người dùng: Hãy lưu ý đến quyền riêng tư của người dùng khi thu thập dữ liệu. Tránh thu thập thông tin nhạy cảm mà không có sự đồng ý thích hợp.
• Hạn mức sự kiện: GA4 có hạn mức về số lượng sự kiện và thông số mà bạn có thể gửi. Lập kế hoạch triển khai cho phù hợp.
• Nhiều biểu mẫu: Nếu bạn có nhiều biểu mẫu trên cùng một trang, hãy nhớ điều chỉnh mã để theo dõi tất cả biểu mẫu. Bạn cần điều chỉnh bộ chọn formId và trình nghe sự kiện cho từng biểu mẫu.
• Hỗ trợ tiếp cận: Đảm bảo rằng người dùng khuyết tật có thể sử dụng chế độ triển khai của bạn.
• Kiểm thử: Kiểm thử kỹ lưỡng việc triển khai của bạn trên nhiều trình duyệt và thiết bị để đảm bảo việc triển khai hoạt động như mong đợi.

7. Kết luận

Thật tuyệt! Từ việc thiết lập trình nghe JavaScript đến việc định cấu hình các phương diện tuỳ chỉnh đó trong Google Analytics 4, bạn đã hoàn tất các bước và thực sự chinh phục được tính năng theo dõi tính năng tự động điền. Giờ đây, bạn đã được trang bị đầy đủ và sẵn sàng chuyển đổi dữ liệu bạn thu thập thành trải nghiệm người dùng thực sự thú vị và hiệu quả trên biểu mẫu của mình.

Chuẩn bị sẵn sàng để đón nhận hàng loạt thông tin chi tiết có giá trị! Bạn sẽ có thể xác định chính xác cách người dùng tương tác với từng trường, khám phá những phần nào trong biểu mẫu của bạn được hưởng lợi nhiều nhất từ tính năng điền sẵn và xác định mọi điểm khó khăn tiềm ẩn mà trước đây có thể bạn không nhận thấy. Khi có được kiến thức hữu ích này, bạn có thể thực hiện các điều chỉnh thông minh, có mục tiêu, đơn giản hoá hành trình của người dùng, giảm tỷ lệ bỏ dở biểu mẫu và chứng kiến tỷ lệ chuyển đổi quan trọng đó tăng cao hơn nữa.

Giờ đây, bạn hoàn toàn có thể liên tục tối ưu hoá và tinh chỉnh biểu mẫu trên web. Hãy coi đây không chỉ là một Lớp học lập trình đã hoàn thành, mà còn là khởi đầu của một hành trình thú vị và liên tục trong thiết kế dựa trên dữ liệu. Vậy thì hãy bắt đầu, tận hưởng khả năng phân tích mới, thử nghiệm các điểm cải tiến và biến biểu mẫu của bạn không chỉ hoạt động hiệu quả mà còn mang lại trải nghiệm tuyệt vời cho mọi người dùng tương tác với biểu mẫu. Chúc bạn tối ưu hoá thành công!