Jembatan GTM & Jembatan Peristiwa GA4

1. Ringkasan Arsitektur & Kemampuan

Analitik web modern sering menghadapi pemisahan data mendasar: platform kuantitatif (seperti Google Analytics 4) melaporkan apa yang terjadi di situs web, sementara alat pemutaran ulang sesi kualitatif menjelaskan mengapa hal itu terjadi. Jembatan GTM & GA4 MousePlayer menghilangkan celah ini dengan membangun saluran sinkronisasi dua arah dalam lingkungan eksekusi JavaScript browser.

Saat diaktifkan, skrip pelacakan menginisialisasi dua modul inti khusus:

Pengekspor Pemutaran Ulang Sesi (initGa4SessionBridge): Secara otomatis mengirim pengenal sesi rekaman aktif (mp_session_id) dan URL pemutaran langsung (mp_session_url) ke lapisan data situs web segera setelah sesi dibuat.
Pengambil Peristiwa GA4 (initDataLayerBridge): Memasang listener yang tidak merusak pada array lapisan data. Setiap peristiwa e-commerce atau perilaku kustom yang dikirim untuk GA4 langsung dicerminkan ke basis data analitik MousePlayer sebagai peristiwa kustom (ce), termasuk semua parameter numerik dan string.

Dukungan Objek dataLayer Kustom: Jika aplikasi web menggunakan nama array JavaScript kustom sebagai pengganti standar dataLayer (misalnya, xyzDataLayer), mesin menyesuaikan secara dinamis dengan parameter gtm_datalayer_name yang dikonfigurasi tanpa memerlukan perubahan kode manual.

2. Nilai Bisnis Strategis

Mengintegrasikan tautan pemutaran ulang langsung ke alur analitik enterprise memberikan sejumlah manfaat operasional berdampak besar:

Kemampuan Bisnis	Dampak Operasional
Pengoptimalan Tingkat Konversi (CRO)	Memungkinkan analis digital mengidentifikasi titik hambatan dalam funnel konversi GA4 dan segera membuka rekaman pengguna yang meninggalkan keranjang belanja pada langkah checkout tertentu.
Atribusi Pendapatan & Audit	Transaksi e-commerce bernilai tinggi dapat diaudit dengan meninjau jalur penunjuk, klik, dan keadaan area tampilan secara tepat yang menghasilkan pembelian.
Debugging Teknis Lebih Cepat	Tim rekayasa QA dapat menghubungkan peristiwa pengecualian JavaScript GA4 atau log kesalahan API langsung dengan rekaman layar visual, sehingga tidak perlu mereproduksi bug secara manual.
Penyelesaian Dukungan Pelanggan	Tiket dukungan yang berisi ID sesi pengguna memungkinkan agen dukungan meninjau pemutaran ulang sesi pelanggan secara tepat, sehingga sangat mengurangi waktu penyelesaian.

3. Panduan Konfigurasi Google Tag Manager

Untuk mengambil URL pemutaran ulang di Google Tag Manager dan menyalurkannya ke Google Analytics 4, tiga aset GTM yang berbeda harus dikonfigurasi:

Langkah 1: Buat Variabel Lapisan Data

Di ruang kerja GTM, buka Variabel → Variabel yang Ditentukan Pengguna dan buat dua variabel bertipe Variabel Lapisan Data:

Nama Variabel: dlv - mp_session_id • Nama Variabel Lapisan Data: mp_session_id
Nama Variabel: dlv - mp_session_url • Nama Variabel Lapisan Data: mp_session_url

Langkah 2: Buat Pemicu Aktivasi

Buka Pemicu → Baru dan pilih jenis pemicu Peristiwa Kustom. Konfigurasikan parameter berikut:

Nama Peristiwa: mp_session_ready
Pemicu ini diaktifkan pada: Semua Peristiwa Kustom

Langkah 3: Konfigurasikan Tag Peristiwa GA4

Buat tag baru bertipe Google Analytics: Peristiwa GA4 untuk mengirim tautan sesi ke properti GA4:

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. Mengonfigurasi Eksplorasi (Laporan Kustom) di GA4

Setelah tag GTM dipasang, GA4 mulai menerima URL pemutaran sebagai parameter peristiwa. Untuk menganalisis data ini dalam laporan eksplorasi kustom, parameter harus didaftarkan dahulu sebagai Dimensi Kustom.

Mendaftarkan Dimensi Kustom di Admin GA4

Di antarmuka Google Analytics 4, buka Admin → Tampilan data → Definisi kustom dan klik Buat dimensi kustom:

Nama dimensi: MousePlayer Session URL
Cakupan: Peristiwa (atau Sesi jika dilampirkan pada parameter bercakupan sesi)
Parameter peristiwa: mp_session_url

Membuat Eksplorasi Pemeriksaan Sesi

Di bagian Eksplorasi GA4, buat eksplorasi Bentuk bebas baru untuk memeriksa perjalanan pengguna individual:

Baris: Tambahkan Event name, Transaction ID (untuk e-commerce), atau Landing page.
Kolom / Dimensi: Sertakan dimensi kustom yang baru dibuat MousePlayer Session URL.
Nilai: Tambahkan Event count atau Total users.

Tabel laporan yang dihasilkan menampilkan URL langsung yang dapat diklik di samping metrik GA4, sehingga Anda dapat segera berpindah dari pencilan statistik ke pemutaran ulang visual.

5. Mengintegrasikan URL Pemutaran Ulang ke Laporan Bawaan GA4

Selain Eksplorasi, dimensi kustom dapat diintegrasikan ke laporan bawaan standar GA4 (seperti Akuisisi traffic, Halaman dan layar, atau Pembelian e-commerce) menggunakan Pustaka Laporan GA4.

Mengubah Tabel Laporan Standar

Di GA4, buka laporan terperinci bawaan apa pun (misalnya, Laporan → Interaksi → Halaman dan layar).
Klik ikon pensil Sesuaikan laporan di sudut kanan atas (memerlukan akses administratif).
Di panel kanan, pada Data Laporan, klik Dimensi.
Tambahkan MousePlayer Session URL ke daftar dimensi utama atau sekunder dan atur agar terlihat.
Klik Simpan → Simpan perubahan pada laporan saat ini.

Setelah disimpan, analis yang meninjau tabel akuisisi atau konversi standar dapat menambahkan MousePlayer Session URL sebagai dimensi sekunder, sehingga perilaku pengunjung di seluruh segmen lalu lintas standar dapat segera diperiksa secara visual.

6. Referensi Kompatibilitas API JavaScript & GA4 / GTM

MousePlayer menyediakan API JavaScript intuitif yang kompatibel dengan GA4 (menggunakan perintah standar bergaya gtag()) dan objek global publik (window.MousePlayer). Ini memungkinkan pengembang mengambil URL sesi di konsol, melampirkan ID pelanggan B2B, dan menyisipkan tautan pemutaran ulang ke pusat dukungan atau pelacak kesalahan pihak ketiga.

1. Penyisipan URL Pemutaran Ulang Langsung (Intercom / Zendesk / Jembatan Kustom)

Anda dapat mengambil URL pemutaran lengkap sesi pengunjung aktif langsung dari konsol browser atau skrip kustom apa pun menggunakan window.MousePlayer.getSessionUrl():

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. Menetapkan ID Pelanggan B2B Kustom (user_id)

Untuk mengidentifikasi pelanggan SaaS atau B2B yang sudah masuk, Anda dapat mengirim user_id kustom (seperti ID basis data, email, atau UUID) saat konfigurasi awal skrip atau secara dinamis saat berjalan menggunakan sintaks GA4:

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. Metode Pengambilan Data Asinkron

Anda dapat menggunakan sintaks callback GA4 standar untuk mengambil metadata sesi secara asinkron dalam skrip pengelolaan tag kustom:

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

Ada yang bisa kami bantu?