CARA MELACAK AKTIVITAS CHAT WIDGET MENGGUNAKAN GOOGLE ANALYTICS 4 (GA4)
Artikel ini menjelaskan langkah-langkah mengintegrasikan Chat Widget dari SunnyDay dengan Google Analytics 4 untuk memantau interaksi pengguna secara efektif di berbagai tahapan funnel, halaman website, dan platform seperti WordPress, Shopify, Wix, atau Squarespace.
Apa Itu Pelacakan Chat Widget dengan GA4?
Chat Widget dari SunnyDay dapat ditanamkan di berbagai platform seperti funnel, website, dan situs WordPress. Dengan integrasi Google Analytics 4 (GA4), kamu bisa melacak interaksi pengguna dengan widget ini sehingga dapat memahami perilaku dan tingkat keterlibatan pengguna secara lebih mendalam.
Manfaat Utama Pelacakan GA4 untuk Chat Widget
Enhanced User Insights
Memantau bagaimana pengguna berinteraksi dengan Chat Widget untuk mengoptimalkan strategi engagement.Performance Monitoring
Mengidentifikasi dan memperbaiki potensi masalah dalam pengalaman live chat.Data-Driven Decisions
Menggunakan data dari analytics untuk membuat keputusan yang lebih tepat terkait fitur chat.Seamless Integration
Menggabungkan script Chat Widget dan GA4 tanpa konflik.
Cara Mengintegrasikan Chat Widget dengan GA4
Langkah 1:
Pastikan GA4 Sudah Terpasang
Pastikan Google Analytics 4 telah terinstal di funnel atau situs tempat Chat Widget ditampilkan. Tidak diperlukan konfigurasi tambahan agar widget dapat mengirim data ke GA4.
Langkah 2:
Tambahkan Global Site Tag GA4
Tambahkan kode berikut ke bagian <head> situs:
<!-- Google Analytics 4 Global Site Tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=your-GA-code"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'your-GA-code');
</script>
Langkah 3:
Tanamkan Chat Widget
Masukkan snippet ini ke bagian <body> halaman:
<!-- Chat Widget Embed →
COPY THE CODE FROM THE SUB-ACCOUNT FOR GOOGLE TAG MANAGER (GTM)
<div
data-chat-widget
data-widget-id="widget-id"
data-location-id="location-id">
</div>
<script
data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js"
data-widget-id="widget-id">
</script>
Gunakan fitur "Get Code" pada dashboard SunnyDay, lalu pilih bagian "Via GTM" untuk menemukan snippet ini.
Penjelasan Atribut:
data-widget-id: ID unik untuk setiap Chat Widget.
data-location-id: ID lokasi atau bisnis kamu.
Langkah 4: Tambahkan Script Pelacakan Event GA4
Tambahkan script berikut tepat di bawah kode Chat Widget untuk menangkap aktivitas pengguna:
<script>
function trackGAEvent(eventName, label) {
gtag('event', eventName, {
event_category: 'Chat',
event_label: label
});
}
function beforeSubmit(values, host) {
trackGAEvent('form-submit', 'Form Submitted');
return true;
}
window.addEventListener("LC_chatWidgetLoaded", function (e) {
var observer = new MutationObserver(function () {
if (leadConnector.chatWidget.isActive()) {
trackGAEvent('widget-open', 'Widget Open');
} else {
trackGAEvent('widget-close', 'Widget Close');
}
});
observer.observe(e.detail, { attributes: true });
window.leadConnector.chatWidget.registerBeforeSubmit(beforeSubmit);
}, false);
</script>
Event yang Dicatat oleh GA4
chat-open: Event ini tercatat saat pengguna membuka Chat Widget.
chat-close: Event ini terjadi ketika pengguna menutup Chat Widget.
chat-form-submit: Event ini aktif saat pengguna mengirimkan formulir di Chat Widget.
Tips Pengujian & Debugging
Gunakan alat berikut untuk memastikan event tracking berjalan dengan benar:
Google Tag Assistant Extension
Memantau event saat berinteraksi dengan widget.GA4 DebugView
Melacak event secara real-time di dashboard Google Analytics.Network Logs
Gunakan tab Network di DevTools untuk memeriksa payload event.Live Test
Lakukan tes langsung dengan membuka, menutup, dan mengirim form chat untuk memverifikasi semua event.
FAQ (Pertanyaan Umum)
Q: Apakah tracking ini berlaku di semua halaman?
Ya, selama widget dan script pelacakan ditanamkan di halaman tersebut.
Q: Bisakah saya mengkustomisasi event Chat Widget?
Saat ini hanya event default yang bisa dilacak, tidak mendukung kustom event.
Q: Di mana saya bisa melihat data event Chat Widget?
Masuk ke menu "Events" di property GA4 kamu.
