Cara Tracking Konversi Live Chat di Google Analytics 4

Untuk tracking konversi live chat di Google Analytics 4, dengarkan event JavaScript dari widget chat, kirim ke GA4 dengan gtag('event', …), lalu tandai event yang penting sebagai key event di Admin → Data display → Events. Bagian itu cuma sekitar dua puluh baris kode. Yang lebih sulit adalah memutuskan event chat mana yang benar-benar konversi — dan di situlah kebanyakan toko online salah hitung.

Apa yang dihitung sebagai konversi live chat?

Konversi live chat adalah saat pengunjung berubah jadi pertanyaan yang bisa Anda tindak lanjuti — bukan saat jendela chat terbuka. Membuka chat itu murah: orang mengklik gelembung chat karena penasaran, lalu pergi, atau membukanya dua kali. Kalau setiap pembukaan ditandai sebagai key event, angka konversi Anda menggelembung dan bidding Google Ads belajar dari data sampah.

Jadi sebelum menulis kode, tentukan dulu sinyal mana yang Anda ukur. Ini yang tersedia dan dari mana asalnya:

Sinyal	Dibaca dari mana	Cocok jadi key event?
Jendela chat dibuka	Browser, event open dari widget	Hanya kalau chat jalur utama pertanyaan masuk
Balasan masuk ke jendela pengunjung	Browser, event message dari widget	Tidak — ini mengukur tim Anda, bukan pengunjung
Pengunjung mengirim pesan pertama	Server, webhook conversation.created	Ya, ini pertanyaan yang sebenarnya
Pengunjung meninggalkan email atau nomor	Server, webhook visitor.identified	Ya, ini prospek
Ada pesanan setelah chat	Server, kirim balik data pesanan	Ya, tapi dibaca di konsol chat, bukan GA4

Browser hanya tahu dua baris pertama. Itu batas semua widget chat, bukan kekurangan satu produk tertentu: halaman melihat jendelanya dan balasan yang masuk, tapi tidak tahu apa yang diketik pengunjung. Jadi untuk kebanyakan situs kecil, susunan yang masuk akal adalah — kirim chat_open dari browser sebagai sinyal keterlibatan, dan biarkan server mengirim konversi yang presisi nanti, setelah Anda punya paket dengan webhook.

Langkah 1: Pastikan GA4 sudah ada di halaman

Buka situs Anda, tekan F12, lalu ketik typeof gtag di konsol browser. Kalau jawabannya "function", Anda siap. Kalau "undefined", berarti GA4 belum terpasang atau dipasang lewat Google Tag Manager — langsung lompat ke cara lewat Google Tag Manager.

Siapkan juga measurement ID Anda, yaitu G- diikuti sepuluh karakter, ada di Admin → Data streams → web stream Anda. Pemasangan gtag biasa terlihat seperti ini di HTML:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag("js", new Date());
  gtag("config", "G-XXXXXXXXXX");
</script>

Dua detail penting untuk langkah berikutnya. gtag sebenarnya sebuah antrean, jadi memanggilnya sebelum skrip Google selesai dimuat tetap aman — panggilannya diputar ulang. Dan skrip widget chat berdiri sendiri; urutan kedua tag di halaman tidak masalah.

Langkah 2: Kirim event chat ke GA4

Tempel potongan ini setelah kedua tag tadi, sebelum </body>. Kodenya menunggu widget siap, meneruskan dua event, dan menolak mengirim event yang sama dua kali dalam satu sesi browser:

<script>
  function whenChatReady(fn) {
    if (window.SealReply) fn();
    else window.addEventListener("sealreply:ready", fn, { once: true });
  }

  // GA4 menghitung setiap event. Satu pengunjung yang membuka chat
  // di empat halaman akan jadi empat konversi. Kirim sekali per sesi.
  function sendOnce(name, params) {
    var key = "sr_ga4_" + name;
    if (sessionStorage.getItem(key)) return;
    sessionStorage.setItem(key, "1");
    gtag("event", name, params);
  }

  whenChatReady(function () {
    SealReply.on("open", function () {
      sendOnce("chat_open", { chat_page: location.pathname });
    });
    SealReply.on("message", function () {
      sendOnce("chat_reply_received", { chat_page: location.pathname });
    });
  });
</script>

Apa fungsi tiap bagiannya:

1. whenChatReady mengatasi kenyataan bahwa widget.js dimuat async: saat skrip Anda jalan, window.SealReply mungkin belum ada. Widget memicu event sealreply:ready di window begitu siap, jadi Anda entah menemukannya sudah termuat, atau menunggu event itu. Tanpa penjaga ini, listener Anda terpasang di koneksi lambat dan diam-diam hilang di koneksi cepat — atau sebaliknya.
2. sendOnce menulis penanda ke sessionStorage, yang bertahan saat pindah halaman tapi hilang di tab baru atau browser yang dibuka ulang. Sesi GA4 sendiri dihitung dari 30 menit tanpa aktivitas, jadi keduanya tidak persis sama; dalam praktiknya pengunjung yang kembali besok tetap sesi baru di kedua sisi.
3. chat_page mencatat dari halaman mana chat dibuka. GA4 memang selalu menyertakan page_location, tapi parameter buatan sendiri lebih enak dipakai di Explorations, dan langsung menunjukkan apakah halaman harga atau halaman produk yang memicu pertanyaan.

Ada beberapa batas dari sisi Google yang perlu diketahui sebelum Anda mengarang nama event: nama event maksimal 40 karakter, satu event membawa maksimal 25 parameter, dan nilai parameter dipotong di 100 karakter. Semuanya tertulis di batas properti GA4, dan nama event di atas 40 karakter tidak akan dilaporkan sebagai key event sama sekali.

Aplikasi satu halaman: pasang listener sekali saja

Di React, Vue, atau Next.js, jalankan kode di atas sekali di komponen root, bukan di komponen yang merender tombol "Hubungi kami". Navigasi sisi klien tidak memuat ulang widget.js, jadi listener yang dipasang di komponen halaman akan terpasang lagi setiap ganti rute dan event Anda berlipat. Kalau mau melepas listener, simpan fungsinya di variabel lalu berikan ke SealReply.off("open", handler). Detail routing-nya ada di cara memasang live chat di Next.js.

Langkah 3: Tandai event sebagai key event

Key event di GA4 adalah apa yang dulu disebut conversion: event yang Anda tandai berharga, sehingga muncul di laporan konversi, audiens, dan bidding Google Ads. Menandainya cuma empat klik, tapi GA4 harus sudah pernah menerima event itu.

1. Picu sendiri sekali — buka chat di situs Anda sendiri.
2. Di GA4, masuk ke Admin → Data display → Events. chat_open muncul di daftar dalam sehari.
3. Nyalakan sakelar Mark as key event di barisnya. Panduan Google tentang membuat dan mengubah event membahas sakelar yang sama.
4. Biarkan nilai key event default kosong, kecuali Anda benar-benar tahu rata-rata nilai satu chat. Angka karangan akan menyebar ke semua laporan yang menampilkan pendapatan.

Jangan tandai chat_reply_received sebagai key event. Event ini terpicu saat tim Anda menjawab, artinya angka konversi naik waktu Anda cepat dan turun waktu Anda makan siang — metrik tentang jadwal kerja yang menyamar jadi metrik tentang pengunjung. Biarkan jadi event biasa; gunanya ada di Langkah 5.

Langkah 4: Pastikan event benar-benar sampai

Pakai Reports → Realtime: buka chat di situs Anda, tunggu paling lama satu menit, dan cari chat_open di kartu jumlah event. Realtime menampilkan 30 menit terakhir, sementara laporan standar bisa tertunda sehari, jadi Realtime satu-satunya tempat yang masuk akal untuk menguji.

Untuk detailnya — parameternya sampai atau tidak, nilainya apa — nyalakan DebugView. Tambahkan ?debug_mode=1 di URL halaman, atau tambahkan debug_mode: true sementara di panggilan gtag("config", …), lalu pantau Admin → DebugView sambil mengklik. Tiap event muncul sebagai kartu lengkap dengan parameternya, dalam hitungan detik.

Langkah 5: Apakah pengunjung yang chat lebih sering membeli?

Begitu chat_open mengalir, Anda bisa menjawab pertanyaan yang membuat Anda memasang semua ini: apakah orang yang chat lebih sering membeli daripada yang tidak? Gunakan perbandingan, jangan membaca dua laporan terpisah.

1. Buka laporan standar mana pun, misalnya Reports → Engagement → Pages and screens.
2. Klik Add comparison → Create new, atur kondisinya ke Event name persis sama dengan chat_open, dengan cakupan user.
3. Tambahkan perbandingan kedua dengan kondisi kebalikannya, sehingga "chat" dan "tidak chat" tampil berdampingan.
4. Ganti metrik laporannya ke purchase atau key event apa pun yang sudah dikirim situs Anda.

Bacalah hasilnya dengan hati-hati. Pengunjung yang membuka chat memang sudah lebih berminat daripada yang tidak — mereka sudah lebih jauh sebelum chat menyentuh apa pun. Perbandingan ini memberi tahu seberapa besar dan seberapa aktif kelompok yang mau chat, dan angka itulah yang Anda butuhkan saat memutuskan apakah perlu menambah jam jaga chat. Perbandingan ini tidak membuktikan chat yang menyebabkan pembelian, dan tidak ada pengaturan GA4 yang bisa membuktikannya.

Bagaimana dengan nilai pesanan? Kirim balik datanya

Mengaitkan uang dengan sebuah chat adalah pekerjaan sisi server, dan konsol chat sudah melakukannya. Server Anda mengirim setiap pesanan ke endpoint pesanan, lalu pesanan yang dibuat dalam 30 hari setelah chat oleh pengunjung yang sama dikaitkan ke percakapan terakhirnya:

POST https://api.sealreply.com/v1/site-orders
Authorization: Bearer sr_live_…
Content-Type: application/json

{
  "site_id": "0192f000-0000-7000-8000-000000000201",
  "order_id": "A-1001",
  "amount": "59.90",
  "currency": "IDR",
  "external_id": "42"
}

external_id adalah ID pengguna di situs Anda sendiri, sama dengan yang Anda kirim ke widget, jadi fitur ini butuh verifikasi identitas aktif — caranya ada di cara identifikasi pengguna yang login di live chat. Pembeli yang memesan tanpa login tetap disimpan, tapi tidak dikaitkan ke chat. Kirim order_id yang sama lagi untuk memperbarui nilainya; DELETE /v1/site-orders/A-1001 menarik pesanan yang dibatalkan atau direfund keluar dari laporan.

Laporan → Hasil lalu menampilkan kartu "Memesan setelah chat (dari situs Anda)" dengan jumlah pesanan dan nilainya per mata uang, di sebelah transaksi yang ditandai berhasil oleh tim Anda. Judulnya sudah jujur: pesanan yang dibuat setelah chat, bukan pendapatan yang dihasilkan chat.

Kalau Anda tetap ingin konversi presisi itu ada di dalam GA4, jalurnya adalah Measurement Protocol dari server: ambil client ID GA4 pengunjung di browser dengan gtag("get", "G-XXXXXXXXXX", "client_id", cb), simpan bersama data pengunjung, dan saat webhook conversation.created tiba, kirim event generate_lead ke Google memakai client ID tadi. Verifikasi dulu signature webhook-nya sebelum dipercaya — kodenya ada di cara verifikasi signature webhook.

Yang tidak boleh dikirim ke Google

Jangan pernah mengirim isi pesan, alamat email, nomor telepon, atau nama ke GA4. Ketentuan Google melarang data yang bisa mengidentifikasi orang masuk ke Analytics, dan transkrip chat adalah hal paling sensitif di situs Anda: di sanalah orang mengetik nomor pesanan, alamat, dan keluhan. Parameter event itu untuk bentuk, bukan isi — halaman mana, paket apa, berapa halaman sebelum chat.

Versi praktisnya: susun parameter dari struktur halaman Anda sendiri, bukan dari isi chat. chat_page: "/harga" tidak masalah. first_message: "pesanan A-1001 saya belum sampai" adalah kebocoran data dengan langkah tambahan. Di SealReply, isi chat disimpan terenkripsi dengan kunci terpisah per pelanggan, dan tidak ada orang di pihak kami yang bisa membacanya tanpa persetujuan dua orang plus pemberitahuan ke Anda; mengirim teks yang sama ke produk analitik pihak ketiga membuang semua itu.

Cara lewat Google Tag Manager

Kalau GA4 masuk ke situs Anda lewat Google Tag Manager, strukturnya tetap, cuma baris terakhirnya berubah. Dorong ke data layer, jangan panggil gtag:

window.dataLayer = window.dataLayer || [];
dataLayer.push({ event: "chat_open", chat_page: location.pathname });

Lalu di GTM: tag Custom HTML yang jalan di Initialization — All Pages berisi kode listener, trigger Custom Event mencocokkan chat_open, dan tag GA4 Event mengirimkannya dengan chat_page diambil dari Data Layer Variable. Jalur ini tepat kalau Anda tidak bisa mengubah HTML situs, atau analitiknya dipegang orang lain dan Anda hanya ingin menyerahkan satu event.

Pertanyaan umum

Bisakah tracking live chat di GA4 tanpa Google Tag Manager?

Bisa. Widget menyediakan SealReply.on("open", handler) langsung di halaman, jadi satu blok <script> yang memanggil gtag("event", "chat_open") sudah cukup. Tag Manager baru sepadan kalau Anda memang sudah memakainya, atau kalau Anda tidak bisa mengedit HTML situs.

Apakah "chat dibuka" sebaiknya ditandai sebagai konversi di GA4?

Hanya kalau pertanyaan pelanggan memang biasanya masuk lewat chat. Membuka jendela chat cuma butuh satu klik penasaran, jadi di situs yang kebanyakan orang membeli tanpa bertanya, menandainya sebagai key event membuat angka konversi menggelembung dan memberi data sampah ke bidding Google Ads. Key event yang lebih aman adalah pengunjung meninggalkan kontak, yang sampai di server Anda sebagai webhook visitor.identified.

Kenapa angka chat_open saya terlihat terlalu tinggi?

Hampir selalu karena de-duplikasi belum dipasang. Widget membuka kembali jendela chat di halaman berikutnya yang dilihat pengunjung, yang memicu open tanpa klik, dan GA4 menghitung setiap event yang diterimanya. Helper sendOnce di atas menyimpan penanda di sessionStorage supaya tiap event dikirim sekali per sesi browser.

Bisakah saya melihat kampanye iklan mana yang menghasilkan chat?

Di GA4 bisa: chat_open mewarisi sumber, medium, dan kampanye dari sesinya seperti event lain, jadi Reports → Acquisition → Traffic acquisition dengan perbandingan chat akan menunjukkannya. Konsol chat juga menampilkannya tanpa pengaturan apa pun — Laporan → Sumber memuat saluran, kampanye iklan, negara, dan perangkat di balik percakapan Anda.

Apakah kode ini membuat situs jadi lambat?

Tidak sampai terukur. Anda menambahkan satu listener dan paling banyak dua panggilan gtag per sesi; beban di halaman tetap dua skrip yang sudah ada. Widget chat sendiri sekitar 38 KB JavaScript asinkron yang tidak menghambat tampilnya halaman, dan tag GA4 juga dimuat secara asinkron.

Bisakah tracking ini dipakai di paket Gratis?

Bisa, semua yang berjalan di browser tersedia di semua paket: API JavaScript widget, event open dan message, serta key event GA4. Yang butuh Starter ke atas adalah sisi server — webhook, API terbuka, dan pengiriman balik data pesanan yang mengaitkan pesanan dengan percakapan.

Langkah berikutnya

Buat pengukurannya jujur dulu, baru dibuat canggih. Kirim chat_open, amati dua minggu, dan lihat berapa banyak pengunjung yang benar-benar menyentuh chat; di banyak situs kecil angkanya mengejutkan, entah ke arah mana.

Kalau live chat di situs Anda masih setelan bawaan, dua pengaturan yang paling mengubah angka ini adalah pesan sambutan per halaman dan jalur yang jelas saat offline — keduanya dibahas di cara memasang live chat di website, dan seluruh rangkaian dari pemasangan sampai tindak lanjut prospek ada di panduan live chat untuk UMKM.