Langsung ke konten

Mengenal DataLayer dan Custom Event

Arie Setiawan Arie Setiawan · · Artikel

Lacak progres belajar kamu

Masuk dan daftar kursus ini untuk melacak kemajuan belajar kamu.

Sampai modul 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 objek JavaScript yang berfungsi sebagai ‘jembatan’ komunikasi antara website kamu dan GTM. Sederhananya, website menaruh informasi ke dalam dataLayer, lalu GTM mengambil dan membacanya.

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.

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.

Contoh halaman pembelian berhasil di website Gambar 7.1: Contoh halaman pembelian berhasil yang perlu di-track dengan dataLayer

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

Minta developer untuk menambahkan kode ini di halaman sukses pembayaran. Idealnya, kode ini ditaruh sebelum snippet GTM container di <head>, supaya data sudah tersedia saat GTM dimuat. Tapi kalau ditaruh setelahnya pun tetap bisa berfungsi. GTM akan memprosesnya sebagai event terpisah, bukan sebagai data yang sudah ada sejak awal.

<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>

Contoh halaman checkout dengan dataLayer Gambar 7.2: Halaman terima kasih dengan kode dataLayer.push() yang mengirim data transaksi

Dalam implementasi nyata, nilai-nilai seperti transaction_id, value, dan items diisi secara dinamis oleh backend. Cara implementasinya berbeda tergantung platform.

WordPress (WooCommerce)

Kalau kamu pakai plugin GTM4WP, dataLayer purchase sudah otomatis terisi di halaman Order Received. Kamu tidak perlu menulis kode manual. Cukup aktifkan opsi Enhanced Ecommerce di pengaturan GTM4WP.

Kalau mau manual tanpa plugin, tambahkan kode di functions.php tema kamu:

add_action('woocommerce_thankyou', function($order_id) {
  $order = wc_get_order($order_id);
  if (!$order) return;
  ?>
  <script>
    dataLayer.push({
      'event': 'purchase',
      'transaction_id': '<?php echo esc_js($order->get_order_number()); ?>',
      'value': <?php echo $order->get_total(); ?>,
      'currency': '<?php echo esc_js($order->get_currency()); ?>'
    });
  </script>
  <?php
});

Custom HTML

Paling straightforward. Taruh script dataLayer.push() langsung di halaman terima kasih. Data transaksi biasanya di-render oleh backend (PHP, Python, dll):

<!-- thank-you.html -->
<script>
  dataLayer.push({
    'event': 'purchase',
    'transaction_id': 'TRX-001',  // diisi dinamis oleh backend
    'value': 350000,
    'currency': 'IDR'
  });
</script>

Pakai AI Coding Tools untuk Implementasi DataLayer

Implementasi dataLayer di custom website kadang tricky karena kamu harus tahu file mana yang menangani halaman tertentu. Kalau kamu pakai Claude Code atau Gemini CLI (seperti yang dibahas di modul 2), cukup berikan prompt seperti ini:

Tambahkan dataLayer.push() untuk event purchase di halaman terima kasih.
Data yang perlu dikirim: transaction_id, value, currency, dan items.
Ambil data dari [sumber data kamu, misal: API order, URL parameter, dll].

Atau untuk tracking event lain:

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 tempat yang tepat, sesuai dengan framework yang kamu pakai.

Contoh prompt AI coding tools untuk dataLayer Gambar 7.3: Contoh prompt ke AI coding tools untuk menambahkan dataLayer.push() secara otomatis

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

Trigger Custom Event di GTM Gambar 7.4: Konfigurasi trigger Custom Event dengan event name “purchase”

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

Data Layer Variable untuk transaction_id Gambar 7.5: Membuat Data Layer Variable untuk mengambil nilai transaction_id

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

Data Layer Variables lainnya (value, currency) Gambar 7.6: Data Layer Variables tambahan untuk value dan 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

Tag GA4 Event Purchase Gambar 7.7: Konfigurasi tag GA4 Event — event name “purchase” dengan parameter dari Data Layer Variables

Setelah semua siap, test lewat Preview Mode. Lakukan transaksi test, lalu cek di Tag Assistant apakah event purchase muncul dan tag fired.

Preview Mode — event purchase fired Gambar 7.8: Preview Mode menunjukkan event purchase berhasil fired

Konfirmasi juga di GA4 Realtime bahwa event purchase sudah masuk beserta parameternya.

GA4 Realtime menunjukkan event purchase Gambar 7.9: GA4 Realtime — event purchase tercatat dengan data transaksi yang lengkap

Praktek: Tracking Initiate Checkout

Selain purchase, event penting lainnya dalam e-commerce adalah begin_checkout (atau sering disebut Initiate Checkout). Event ini dikirim saat pengunjung mulai proses checkout, misalnya klik tombol “Checkout” dari halaman keranjang.

Kenapa ini penting? Karena dengan tracking begin_checkout dan purchase sekaligus, kamu bisa menghitung checkout completion rate: berapa persen orang yang mulai checkout tapi benar-benar menyelesaikan pembayaran. Kalau angkanya rendah, berarti ada friction di proses checkout yang perlu diperbaiki.

Langkah 1: Tambahkan dataLayer.push() saat checkout dimulai

dataLayer.push({
  'event': 'begin_checkout',
  'value': 350000,
  'currency': 'IDR',
  'items': [
    {
      'item_name': 'Kelas Online SEO Dasar',
      'price': 350000,
      'quantity': 1
    }
  ]
});

Kode ini dipanggil saat user klik tombol checkout atau saat halaman checkout pertama kali dimuat, tergantung flow website kamu.

Langkah 2: Buat Trigger dan Tag di GTM

Prosesnya sama seperti purchase. Buat trigger Custom Event dengan event name begin_checkout, lalu buat tag GA4 Event yang mengirim event tersebut beserta parameternya.

Tag GA4 Event Initiate Checkout Gambar 7.10: Konfigurasi tag GA4 Event untuk begin_checkout

Test di Preview Mode untuk memastikan event fired saat proses checkout dimulai.

Preview Mode — event begin_checkout fired Gambar 7.11: Preview Mode menunjukkan event begin_checkout berhasil fired

Dengan tracking checkout dan purchase aktif, kamu sekarang punya gambaran lengkap funnel checkout. Di GA4, kamu bisa bikin funnel exploration untuk melihat di mana drop-off terjadi.

Kamu mungkin perhatikan di screenshot saya menamai event-nya initiate_checkout, bukan begin_checkout yang merupakan recommended event name dari Google. Ini sebenarnya tidak masalah. Selama tujuannya sama, yaitu untuk menandai bahwa user mulai proses checkout, dan kamu konsisten memakainya di seluruh project, GA4 tetap akan merekam datanya. Bedanya, begin_checkout dikenali GA4 sebagai event standar sehingga otomatis muncul di laporan e-commerce bawaan. Kalau pakai nama custom seperti initiate_checkout, kamu perlu setup laporan manual. Pilih mana yang lebih cocok dengan kebutuhan dan konvensi tim kamu.

Custom Event untuk Kasus Lain

DataLayer dan custom event tidak hanya untuk pembelian. Beberapa contoh penggunaan yang umum:

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

Strategi Penamaan Event

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

Ada dua pendekatan, dan kamu perlu pilih salah satu lalu konsisten:

Pendekatan 1: Pakai recommended event names dari Google (disarankan) Google punya daftar nama event standar seperti purchase, add_to_cart, sign_up, login. Kalau event yang kamu track termasuk di daftar ini, pakai nama standar Google. Keuntungannya: GA4 otomatis mengenali event ini dan menyediakan laporan bawaan yang lebih kaya.

Pendekatan 2: Nama custom untuk event yang tidak ada di daftar Google Untuk event yang spesifik ke bisnis kamu dan tidak ada di daftar standar, buat nama sendiri. Formatnya: huruf kecil semua, underscore sebagai pemisah, pola aksi_objek. Contoh: klik_whatsapp, klik_marketplace, lihat_video_produk.

Jadi di modul-modul sebelumnya, saya sengaja pakai nama Bahasa Indonesia (klik_whatsapp, klik_daftar) karena event tersebut memang tidak ada padanannya di daftar standar Google. Tapi untuk event seperti pembelian, saya pakai purchase karena itu recommended event name dari Google.

Yang harus dihindari:

  • Nama yang terlalu generik seperti click atau event1
  • Campuran format dalam satu project (camelCase dan snake_case sekaligus)
  • Nama dengan spasi atau karakter khusus

Debugging DataLayer

Event tidak muncul di Tag Assistant Gambar 7.12: Contoh event yang tidak fired — dataLayer.push() kemungkinan tidak terpanggil

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

Event muncul di Tag Assistant Gambar 7.13: Event purchase muncul di Tag Assistant dengan data layer yang lengkap

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. Kalau array-nya kosong atau tidak mengandung event yang kamu harapkan, masalahnya ada di kode website, bukan di konfigurasi GTM.

Di modul terakhir, kamu akan belajar debugging secara lebih menyeluruh dan best practice untuk mengelola GTM jangka panjang.

Arie Setiawan

Ditulis oleh

Arie Setiawan

Founder Labkonversi & Sematin

Full time creator di Threads, lagi bangun tools saas untuk riset iklan di Sematin | Performance marketing specialist di Kitabisa.com 5+ years

Sebelumnya

Tracking Scroll dan Form Submission

Selanjutnya

Debugging, Best Practice, dan Langkah Selanjutnya