Tracking Scroll dan Form Submission

Di modul sebelumnya kamu sudah belajar tracking klik. Sekarang naik level: kamu akan belajar mengukur seberapa jauh pengunjung scroll halaman dan mendeteksi saat mereka mengirim formulir. Dua jenis tracking ini sangat berguna untuk mengoptimasi konten dan lead generation.

Scroll Depth Tracking

Pernah nulis artikel panjang 2000 kata, tapi curiga tidak ada yang baca sampai bawah? Dengan scroll tracking, kamu bisa tahu persis di titik mana pembaca “menyerah” dan meninggalkan halaman.

Mengaktifkan Built-in Variables Scroll:

1. Buka Variables > Configure (Built-In Variables)
2. Centang semua di kategori Scrolling:
   • Scroll Depth Threshold
   • Scroll Depth Units
   • Scroll Direction

Buat Trigger:

1. Triggers > New
2. Nama: Trigger - Scroll Depth
3. Tipe: Scroll Depth
4. Scroll Depth Type: pilih Vertical Scroll Depths > Percentages
5. Masukkan angka: 25, 50, 75, 90
6. Opsional: di bagian “This trigger fires on”, kamu bisa filter supaya hanya aktif di halaman tertentu. Contoh: Page Path — contains — /blog/
7. Simpan

Gambar 6.1: Trigger Scroll Depth — Vertical Scroll Depths dengan persentase 25, 50, 75, 90 dan filter halaman /blog/

Buat Tag:

1. Tags > New
2. Nama: GA4 Event - Scroll Depth
3. Tag Configuration: Google Analytics: GA4 Event
4. Event Name: scroll_depth
5. Event Parameters:
   • scroll_percentage / Value: {{Scroll Depth Threshold}}
   • page_location / Value: {{Page URL}}
6. Triggering: pilih Trigger - Scroll Depth
7. Simpan

Gambar 6.2: Tag GA4 Event — event name “scroll_depth” dengan parameter scroll_percentage dan page_location

Sekarang, setiap kali pengunjung scroll ke 25%, 50%, 75%, atau 90% halaman, GA4 akan merekam event-nya.

Penting: matikan scroll tracking bawaan GA4. Secara default, GA4 punya Enhanced Measurement yang otomatis tracking scroll di 90%. Kalau kamu buat scroll tracking sendiri lewat GTM tapi tidak mematikan yang bawaan, data scroll 90% akan terhitung dua kali. Matikan di Admin > Data Streams > klik stream kamu > Enhanced measurement > nonaktifkan Scrolls.

Gambar 6.4: Nonaktifkan Scrolls di Enhanced Measurement supaya tidak double tracking dengan GTM

Cara Membaca Data Scroll

Setelah data terkumpul beberapa hari, buka GA4. Navigasi ke bagian event reporting bisa sedikit berbeda tergantung konfigurasi GA4 kamu, tapi umumnya: Reports > Engagement > Events. Cari event scroll_depth.

Misalnya kamu melihat pola seperti ini di salah satu artikel blog:

• 25%: 1.000 event
• 50%: 600 event
• 75%: 200 event
• 90%: 50 event

Gambar 6.3: GA4 Realtime — event scroll_percentage tercatat di 25, 50, 75, dan 90 persen

Artinya ada penurunan drastis antara 50% dan 75%. Di bagian itu mungkin ada paragraf yang terlalu panjang, atau pembaca merasa informasinya sudah cukup. Ini insight yang bisa kamu pakai untuk memperbaiki struktur konten.

Contoh penting penggunaan event scroll adalah mengkombinasikannya untuk menghitung qualified event. Misalnya, kita dapat menghindari lead counts dari bot ketika leads masuk tetapi scroll tidak mencapai 50%. Hal tersebut tidak masuk akal jika trigger event berada di 90% halaman.

Form Submission Tracking

Kalau website kamu punya form kontak, form pendaftaran, atau form lead generation, tracking kapan form itu berhasil dikirim adalah data yang krusial.

Mengaktifkan Built-in Variables Form:

1. Variables > Configure (Built-In Variables)
2. Centang semua di kategori Forms:
   • Form Element
   • Form Classes
   • Form ID
   • Form Target
   • Form URL
   • Form Text

Gambar 6.5: Centang semua variable di kategori Forms pada Configure Built-In Variables

Buat Trigger:

Gambar 6.6: Contoh halaman “Hubungi Kami” dengan form kontak yang akan di-track

1. Triggers > New
2. Nama: Trigger - Form Submit
3. Tipe: Form Submission
4. Centang Wait for Tags (penting supaya tag sempat berjalan sebelum halaman berpindah)
5. Centang Check Validation (supaya trigger hanya aktif kalau form benar-benar valid dan terkirim, bukan saat user klik submit tapi form validation gagal)
6. Pilih Some Forms
7. Atur kondisi: Form ID — equals — contact-form (sesuaikan dengan ID form di website kamu)
8. Simpan

Tidak tahu Form ID-nya apa? Buka website kamu, klik kanan pada form, pilih Inspect. Cari elemen <form> dan lihat atribut id-nya (Gambar 6.7).

Gambar 6.7: Inspect elemen form di DevTools untuk menemukan Form ID

Buat Tag:

1. Tags > New
2. Nama: GA4 Event - Form Submit
3. Tag Configuration: Google Analytics: GA4 Event
4. Event Name: form_submit
5. Event Parameters:
   • form_id / Value: {{Form ID}}
   • page_location / Value: {{Page URL}}
6. Triggering: pilih Trigger - Form Submit
7. Simpan

Gambar 6.8: Tag GA4 Event — event name “form_submit” dengan parameter form_id dan page_location

Setelah tag dan trigger dibuat, test lewat Preview Mode. Buka halaman form, isi dan kirim formulir, lalu cek Tag Assistant.

Gambar 6.9: Tag “GA4 - Form Submit” fired saat form dikirim — event gtm.formSubmit terdeteksi

Konfirmasi juga di GA4 Realtime bahwa event form_submit sudah masuk.

Gambar 6.10: Event form_submit muncul di GA4 Realtime — tracking form berhasil

Kalau Form Tracking Tidak Berfungsi

Form tracking di GTM itu yang paling sering bermasalah dibanding jenis tracking lain. Beberapa penyebab umum:

Form tidak pakai elemen <form> standar. Beberapa framework modern (React, Vue) tidak selalu render elemen <form> HTML tradisional. Kalau trigger Form Submission tidak berfungsi, coba pakai trigger Custom Event dan kirimkan event dari kode JavaScript secara manual via dataLayer.push(). Cara pakai dataLayer akan dibahas di modul 7.

Form dikirim via AJAX tanpa redirect. Kalau setelah submit form halamannya tidak pindah (AJAX submission), trigger Form Submission kadang tidak terdeteksi. Solusinya sama: pakai dataLayer.push() yang dipicu setelah AJAX berhasil.

Form dari pihak ketiga (Typeform, Google Forms, dll). Form yang di-embed dari platform lain biasanya berada di dalam <iframe>, dan GTM tidak bisa mendeteksi event di dalam iframe dari domain berbeda. Untuk kasus ini, cek apakah platform tersebut punya fitur callback URL atau webhook yang bisa dimanfaatkan.

Dari ketiga masalah di atas, yang paling sering terjadi di website bisnis Indonesia adalah AJAX form. Solusi umumnya adalah pakai dataLayer.push() yang dipicu setelah form berhasil dikirim. Cara kerja dataLayer akan dibahas detail di modul 7.

WordPress: Kalau kamu pakai plugin GTM4WP, plugin ini bisa otomatis push event ke dataLayer saat form berhasil dikirim jika kamu menggunakan plugin Contact Form 7 dengan cara masuk ke Settings -> GTM -> Integration -> Contact Form 7 lalu centang Contact Form 7.

Custom HTML atau framework lain: Untuk website custom, kamu bisa minta bantuan AI coding tools seperti Claude Code atau Gemini CLI (seperti yang dibahas di modul 2) untuk menambahkan dataLayer.push() di tempat yang tepat. Cukup berikan prompt seperti:

Saya sudah setup GTM. Tambahkan dataLayer.push() dengan event 'form_submit'
setelah form kontak di halaman /kontak berhasil dikirim via AJAX.
Kirim juga form_id dan page_location sebagai parameter.

Tools ini bisa membaca kode kamu dan menaruh dataLayer.push() di callback yang tepat, sesuai dengan framework yang kamu pakai.

Kombinasi Scroll dan Form untuk Optimasi Landing Page

Ini saran praktikal. Kalau kamu punya landing page dengan form di bagian bawah, kombinasikan data scroll dan form submission:

• Kalau banyak yang scroll sampai 75% tapi tidak ada yang submit form, berarti pengunjung sudah lihat form-nya dan memutuskan untuk tidak mengisi. Masalahnya ada di form: mungkin terlalu banyak field, atau tidak ada insentif.
• Kalau kebanyakan berhenti scroll di 25%, berarti mereka tidak sampai melihat form. Masalahnya ada di konten atas: headline-nya kurang menarik atau value proposition-nya tidak jelas.

Data mengarahkan kamu ke akar masalah yang spesifik, bukan sekadar “landing page nggak perform.”

Di modul berikutnya, kamu akan belajar cara memanfaatkan dataLayer untuk tracking yang lebih advanced.