Mengenal DataLayer dan Custom Event

Sampai chapter sebelumnya, semua tracking yang kamu buat mengandalkan interaksi yang bisa dideteksi GTM secara otomatis: pageview, klik, scroll, dan form submission. Tapi ada banyak situasi di mana GTM tidak bisa “melihat” apa yang terjadi, misalnya setelah transaksi berhasil diproses oleh sistem backend. Di sinilah dataLayer berperan.

Apa Itu DataLayer?

DataLayer adalah sebuah objek JavaScript yang berfungsi sebagai “papan pengumuman” antara website kamu dan GTM. Website menulis informasi ke dataLayer, dan GTM membacanya.

Secara teknis, dataLayer itu array JavaScript yang sudah otomatis dibuat oleh GTM saat container dimuat:

window.dataLayer = window.dataLayer || [];

Kamu bisa “mengirim pesan” ke dataLayer dengan cara:

dataLayer.push({
  'event': 'nama_event',
  'key1': 'value1',
  'key2': 'value2'
});

Setiap kali dataLayer.push() dipanggil dengan properti event, GTM langsung tahu ada sesuatu yang terjadi dan akan mengevaluasi trigger yang sesuai.

Analogi DataLayer

Bayangkan GTM itu satpam di lobi gedung. Satpam ini cuma bisa melihat apa yang terjadi di lobi (klik, scroll, pageview). Tapi kalau ada kejadian di lantai 5 (misalnya transaksi pembayaran berhasil diproses server), satpam tidak tahu.

DataLayer itu seperti interkom. Orang di lantai 5 pencet interkom dan bilang: “Pak, ada tamu yang baru bayar Rp 500.000 untuk produk XYZ.” Sekarang satpam punya informasinya dan bisa mencatat ke log.

Praktek: Tracking Pembelian (Purchase Event)

Skenario: kamu punya toko online yang memproses pembayaran. Setelah pembayaran berhasil, halaman “Terima Kasih” ditampilkan. Kamu ingin mengirim data transaksi ke GA4.

Langkah 1: Tambahkan dataLayer.push() di halaman “Terima Kasih”

Minta developer untuk menambahkan kode ini di halaman sukses pembayaran, sebelum kode GTM container:

<script>
  dataLayer.push({
    'event': 'purchase',
    'transaction_id': 'TRX-20260313-001',
    'value': 350000,
    'currency': 'IDR',
    'items': [
      {
        'item_name': 'Kelas Online SEO Dasar',
        'price': 350000,
        'quantity': 1
      }
    ]
  });
</script>

Dalam implementasi nyata, nilai-nilai seperti transaction_id, value, dan items diisi secara dinamis oleh backend berdasarkan data transaksi yang sebenarnya.

Langkah 2: Buat Trigger Custom Event di GTM

1. Triggers > New
2. Nama: Trigger - Purchase
3. Tipe: Custom Event
4. Event Name: purchase (harus sama persis dengan nama event di dataLayer.push())
5. Simpan

Langkah 3: Buat Data Layer Variables

Untuk mengambil data dari dataLayer, kamu perlu membuat variable:

1. Variables > New (User-Defined)
2. Nama: DLV - Transaction ID
3. Tipe: Data Layer Variable
4. Data Layer Variable Name: transaction_id
5. Simpan

Ulangi untuk variable lain yang dibutuhkan (value, currency).

Langkah 4: Buat Tag GA4 Event

1. Tags > New
2. Nama: GA4 Event - Purchase
3. Tag Configuration: Google Analytics: GA4 Event
4. Event Name: purchase
5. Event Parameters:
   • transaction_id / Value: {{DLV - Transaction ID}}
   • value / Value: {{DLV - Value}}
   • currency / Value: {{DLV - Currency}}
6. Triggering: pilih Trigger - Purchase
7. Simpan

Custom Event untuk Kasus Lain

DataLayer dan custom event tidak hanya untuk pembelian. Berikut beberapa contoh penggunaan yang sering saya implementasikan:

Login berhasil:

dataLayer.push({
  'event': 'user_login',
  'method': 'google'
});

Add to cart:

dataLayer.push({
  'event': 'add_to_cart',
  'item_name': 'Jaket Outdoor Premium',
  'item_price': 750000,
  'item_category': 'Outerwear'
});

Video selesai ditonton:

dataLayer.push({
  'event': 'video_complete',
  'video_title': 'Tutorial GTM Dasar',
  'video_duration': 480
});

Penamaan Event yang Konsisten

Ini hal kecil yang dampaknya besar. Punya konvensi penamaan dari awal akan menyelamatkan kamu di kemudian hari saat melihat data di GA4.

Rekomendasi saya:

• Pakai huruf kecil semua dan underscore sebagai pemisah: klik_whatsapp, bukan KlikWhatsApp atau Klik WhatsApp
• Gunakan format aksi_objek: submit_form, klik_cta, lihat_produk
• Hindari nama yang terlalu generik seperti click atau event1
• Kalau untuk GA4, sebisa mungkin pakai recommended event names dari Google seperti purchase, add_to_cart, sign_up

Debugging DataLayer

Cara cek apakah dataLayer sudah berjalan benar:

1. Buka Preview Mode di GTM
2. Lakukan aksi yang memicu dataLayer.push() (misalnya selesaikan pembelian test)
3. Di panel Tag Assistant, cari event dengan nama yang sesuai (misalnya purchase)
4. Klik event tersebut, lalu buka tab Data Layer untuk melihat isi datanya
5. Pastikan semua key-value pair muncul sesuai yang diharapkan

Kalau event tidak muncul di Tag Assistant, kemungkinan besar dataLayer.push() tidak terpanggil. Buka Console di browser (F12 > Console), ketik dataLayer, dan periksa isinya secara manual.

Chapter terakhir akan membahas debugging secara menyeluruh dan best practice untuk mengelola GTM di dunia nyata.