Melacak Perilaku Isi Otomatis dengan Google Analytics 4

1. Pengantar

Codelab ini memandu Anda cara melacak perilaku pengisian otomatis di formulir web menggunakan Google Analytics 4 (GA4). API ini dibangun berdasarkan konsep dan motivasi untuk mengukur pengisian otomatis yang dibahas dalam artikel seperti Mengukur pengisian otomatis browser pada formulir Anda di web.dev.

Anda akan mempelajari cara:

• Terapkan JavaScript untuk mendeteksi interaksi isi otomatis, termasuk saat kolom diisi oleh isi otomatis, secara manual, atau kombinasi keduanya.
• Tentukan peristiwa GA4 kustom untuk melacak status isi otomatis.
• Kirim data isi otomatis sebagai parameter kustom ke GA4.
• Konfigurasi dimensi kustom di GA4 untuk pelaporan.
• Pahami cara menganalisis data yang dikumpulkan.

Dengan pendekatan ini, Anda dapat memahami seberapa sering pengguna mengandalkan fitur isi otomatis, kolom mana yang paling sering diisi otomatis, dan mengidentifikasi potensi masalah terkait kegunaan formulir. Hal ini akan memberi Anda insight tentang cara meningkatkan pengalaman pengguna dan meningkatkan konversi.

Prasyarat

• Pengetahuan dasar tentang HTML, CSS, dan JavaScript.
• Properti Google Analytics 4 yang disiapkan di situs Anda.
• Memahami library gtag.js untuk mengirim peristiwa ke GA4.
• Akses ke HTML formulir yang ingin Anda lacak.
• Pemahaman dasar tentang laporan Google Analytics 4.

Yang akan Anda pelajari

• Cara mendeteksi perilaku pengisian otomatis menggunakan JavaScript, dengan mempertimbangkan berbagai skenario interaksi pengguna.
• Cara membuat peristiwa GA4 kustom dengan parameter yang bermakna.
• Cara mengirim parameter peristiwa kustom ke GA4, termasuk ID formulir dan kolom.
• Cara mengonfigurasi dimensi kustom di GA4 untuk menganalisis data yang dikumpulkan.

Yang Anda butuhkan

• Editor teks atau IDE.
• Browser web dengan alat developer.
• Kode situs Anda.
• Akun Google Analytics 4 Anda.

2. Menerapkan Logika Deteksi Isi Otomatis

Pada langkah ini, kita akan menambahkan kode JavaScript ke halaman web Anda. Skrip ini akan memantau kolom formulir Anda untuk mendeteksi kapan kolom tersebut diisi menggunakan fitur isi otomatis browser versus input manual.

Contoh Struktur Formulir HTML

Pertama, mari kita lihat contoh formulir HTML yang akan kita gunakan. Hal-hal penting yang perlu diperhatikan adalah:

• Formulir itu sendiri memiliki id (misalnya, myForm) dan idealnya atribut data-form-id (misalnya, data-form-id="myForm").
• Setiap kolom input yang ingin Anda lacak memerlukan id yang unik (misalnya, 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 Pelacakan Isi Otomatis

Berikut adalah kode JavaScript yang melakukan deteksi. Library ini menginisialisasi pelacakan, memproses perubahan di kolom tertentu, menentukan status isi otomatis, dan mengirim peristiwa ke GA4 saat pengiriman formulir.

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

Konfigurasi (Penting!)

Agar skrip berfungsi dengan benar, Anda harus mengubah dua baris ini dalam kode 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.

Tindakan Diperlukan: Jika Anda tidak memperbarui formId dan fieldsToTrack agar cocok dengan ID kolom dan formulir HTML tertentu, skrip pelacakan tidak akan menemukan elemen formulir Anda dan tidak ada data yang akan dikirim ke Google Analytics.

Praktik Terbaik: Gunakan data-form-id: Skrip yang diberikan memprioritaskan penggunaan atribut data-form-id dari formulir Anda (jika ada) saat mengirim parameter form_id ke GA4. Cara ini umumnya lebih andal daripada hanya mengandalkan atribut id, terutama jika Anda melacak beberapa formulir atau menggunakan framework yang dapat memanipulasi ID elemen. Pastikan data-form-id disetel di Anda

untuk manfaat ini.

Penjelasan Kode:

• form.dataset.formId: Mendapatkan nilai atribut data-form-id untuk menggunakannya sebagai parameter formId.
• event.preventDefault(): Mencegah pengiriman formulir default, sehingga kami dapat mengirim peristiwa sebelum mengirimkan formulir.
• gtag('event', 'autofill_form_interaction', ...): Mengirim peristiwa kustom dengan parameter berikut:
• form_id: ID formulir.
• field_id: ID kolom.
• autofill_status: Status pengisian otomatis kolom saat ini.
• form.submit(): Mengirimkan formulir setelah mengirimkan peristiwa ke GA4.
• document.addEventListener('DOMContentLoaded', ...): Memastikan skrip hanya berjalan setelah struktur HTML halaman dimuat sepenuhnya, sehingga mencegah error saat mencoba menemukan elemen yang belum ada.

3. Pengujian

• Kirim formulir di browser Anda.
• Gunakan laporan Real-Time atau DebugView di GA4 untuk memverifikasi bahwa peristiwa autofill_form_interaction sedang dikirim.
• Periksa apakah parameter peristiwa diisi dengan benar (misalnya, form_id, field_id, autofill_status).

Tips Pro untuk Pengujian: Gunakan DebugView di GA4 (di bagian Konfigurasi > DebugView) untuk validasi peristiwa dan parameter real-time yang mendetail. Laporan ini memberikan informasi yang lebih langsung dan terperinci daripada laporan Realtime standar selama pengujian.

Kecocokan Persis Diperlukan: Saat membuat dimensi kustom, pastikan nama 'Parameter peristiwa' yang Anda masukkan di GA4 (misalnya, field_id) cocok persis dengan kunci parameter yang digunakan dalam panggilan gtag('event', ...) di kode JavaScript, termasuk garis bawah dan huruf besar/kecil.

4. Mengonfigurasi Dimensi Kustom di GA4

Untuk menggunakan parameter field_id dan autofill_status dalam laporan GA4, Anda harus membuat dimensi kustom:

1. Buka properti GA4 Anda.
2. Buka "Konfigurasi" > "Definisi kustom".
3. Buat dimensi kustom baru:
   • Parameter peristiwa: field_id
   • Nama dimensi: Field ID
   • Cakupan: Peristiwa
4. Buat dimensi kustom lainnya:
   • Parameter peristiwa: autofill_status
   • Nama dimensi: Autofill Status
   • Cakupan: Peristiwa
5. Buat dimensi kustom ketiga:
   • Parameter peristiwa: form_id
   • Nama dimensi: Form ID
   • Cakupan: Peristiwa

Penundaan Pemrosesan Penting: Dimensi kustom yang baru dibuat memerlukan waktu hingga 48 jam untuk diproses oleh Google Analytics. Anda tidak akan dapat melihat atau menggunakannya dalam laporan segera setelah dibuat. Buat rencana yang sesuai dan periksa kembali nanti.

5. Menganalisis Data di GA4

Setelah mengumpulkan data, Anda dapat menganalisisnya dalam laporan GA4:

1. Buka "Laporan" > "Engagement" > "Peristiwa".
2. Pilih acara autofill_form_interaction Anda.
3. Gunakan dropdown "Dimensi sekunder" untuk memilih dimensi kustom Anda (misalnya, "ID Kolom", "Status Isi Otomatis", "ID Formulir"). Menambahkan "ID Kolom" akan menunjukkan kolom formulir tertentu yang memicu peristiwa autofill_form_interaction.Untuk mendapatkan insight yang lebih mendalam tentang cara setiap kolom diisi, Anda dapat memeriksa "Status Isi Otomatis" sebagai dimensi lain bersama "ID Kolom". Kombinasi ini secara langsung menunjukkan distribusi jenis interaksi untuk setiap kolom.
4. Buat Eksplorasi untuk mendapatkan lebih banyak insight tentang data. Anda dapat menggunakan berbagai teknik, seperti:
   • Bentuk Bebas: Untuk menjelajahi data dan membuat visualisasi kustom.
   • Tabel: Untuk melihat data dalam format tabel.
   • Funnel: Untuk menganalisis perjalanan pengguna melalui formulir. Eksplorasi funnel dapat membantu memvisualisasikan progres pengguna melalui formulir multi-langkah, yang berpotensi menandai tahap saat perilaku isi otomatis (atau tidak adanya) memengaruhi progres.
   

Dapatkan Insight yang Lebih Mendalam: Meskipun laporan Peristiwa standar berguna, manfaatkan Eksplorasi GA4 (Bentuk Bebas, Eksplorasi funnel, dll.) yang dikombinasikan dengan dimensi kustom 'ID Bidang' dan 'Status Isi Otomatis' untuk analisis perilaku isi otomatis pengguna yang jauh lebih kaya dan fleksibel.

Contoh pertanyaan yang dapat Anda jawab dengan data ini:

• Kolom mana yang paling sering diisi otomatis?
• Seberapa sering pengguna mengandalkan isi otomatis?
• Apakah ada kolom tertentu tempat pengguna cenderung mengisi informasi secara manual?
• Apakah perilaku isi otomatis berubah dari waktu ke waktu?
• Bagaimana perubahan perilaku isi otomatis bergantung pada formulir?

6. Pertimbangan Tambahan

• Validasi Formulir: Pertimbangkan pengaruh validasi formulir terhadap deteksi isi otomatis. Jika validasi gagal, peristiwa perubahan mungkin tidak dipicu dengan benar.
• Formulir Dinamis: Jika Anda memiliki formulir dinamis, pastikan kode JavaScript Anda dapat menangani perubahan pada jumlah dan ID kolom. Anda mungkin perlu menggunakan MutationObserver untuk melacak perubahan dalam formulir.
• Performa: Hindari menambahkan terlalu banyak JavaScript ke halaman Anda. Pastikan untuk menguji dampak performa kode Anda.
• Privasi Pengguna: Perhatikan privasi pengguna saat mengumpulkan data. Hindari mengumpulkan informasi sensitif tanpa izin yang tepat.
• Batas Peristiwa: GA4 memiliki batas jumlah peristiwa dan parameter yang dapat Anda kirim. Rencanakan penerapan Anda dengan tepat.
• Beberapa formulir: Jika Anda memiliki beberapa formulir di halaman yang sama, pastikan untuk menyesuaikan kode guna melacak semua formulir. Anda harus menyesuaikan pemilih formId dan pemroses peristiwa untuk setiap formulir.
• Aksesibilitas: Pastikan penerapan Anda dapat diakses oleh pengguna penyandang disabilitas.
• Pengujian: Uji penerapan Anda secara menyeluruh di berbagai browser dan perangkat untuk memastikan semuanya berfungsi seperti yang diharapkan.

7. Kesimpulan

Anda berhasil! Mulai dari menyiapkan pendengar JavaScript hingga mengonfigurasi dimensi kustom tersebut di Google Analytics 4, Anda telah berhasil menyelesaikan langkah-langkah dan benar-benar menguasai pelacakan isi otomatis. Sekarang Anda telah siap dan dapat mengubah data yang Anda kumpulkan menjadi pengalaman pengguna yang benar-benar menyenangkan dan efisien di formulir Anda.

Bersiaplah untuk melihat serangkaian insight berharga mulai berdatangan. Anda akan dapat menentukan secara tepat cara pengguna berinteraksi dengan setiap kolom, menemukan bagian formulir yang paling diuntungkan dari fitur isi otomatis, dan mengidentifikasi titik gesekan tersembunyi yang mungkin tidak terlihat sebelumnya. Dengan pengetahuan yang efektif ini, Anda dapat melakukan penyesuaian yang cerdas dan tertarget, menyederhanakan perjalanan pengguna, mengurangi pengabaian formulir, dan melihat rasio konversi yang sangat penting tersebut meningkat lebih tinggi.

Kini Anda dapat terus mengoptimalkan dan menyempurnakan formulir web. Anggap ini bukan hanya Codelab yang telah selesai, tetapi awal dari petualangan yang menarik dan berkelanjutan dalam desain berbasis data. Jadi, lanjutkan, manfaatkan kemampuan analisis baru Anda, bereksperimenlah dengan peningkatan, dan buat formulir Anda tidak hanya berfungsi, tetapi juga sangat luar biasa bagi setiap pengguna yang berinteraksi dengannya. Selamat mengoptimalkan!