CAPI Sisi Server & Pelacakan Peristiwa

Lewati pemblokir iklan dan pembatasan ITP dengan menyalurkan lalu lintas MousePlayer melalui kontainer GTM sisi server pihak pertama Anda sendiri, dan lacak analitik e-commerce secara mendalam.

1. Ringkasan Mode Pelacakan

MousePlayer V2 memperkenalkan Event Router andal yang memungkinkan Anda mengendalikan aliran data dari browser pengguna ke server kami. Anda dapat memilih tiga mode berbeda:

  • Web Only (Bawaan): Mengalirkan semua data melalui WebSocket langsung ke MousePlayer. Terbaik untuk tampilan langsung waktu nyata, tetapi rentan terhadap pemblokir iklan yang ketat.
  • Mode Hybrid: Keunggulan keduanya. Mengirim koordinat mouse/gulir yang ringan melalui WebSocket untuk tampilan langsung yang mulus, sementara perubahan DOM berat dan Peristiwa Kustom dikelompokkan dan disalurkan dengan aman melalui GTM sisi server Anda menggunakan HTTP POST.
  • Pure CAPI: Pengelompokan HTTP POST 100%. Privasi maksimum, tanpa WebSocket, sepenuhnya pihak pertama. Catatan: Tampilan Langsung dinonaktifkan dalam mode ini.

2. Penyiapan Google Tag Manager (Direkomendasikan)

Cara termudah menerapkan mode Hybrid atau Pure CAPI adalah menggunakan Template Komunitas GTM resmi kami. Unduh file .tpl di bawah dan impor ke ruang kerja GTM Anda.

Unduh Template:

↓ Web GTM: Tag SDK MousePlayer

↓ Server GTM: Ingest Client MousePlayer

↓ Server GTM: Tag Konektor MousePlayer

Langkah 1: Konfigurasikan Klien & Tag Sisi Server

Di kontainer GTM sisi server Anda, impor template Ingest Client. Atur agar memantau jalur kustom (misalnya, /mp_capi). Lalu, impor Tag Konektor, konfigurasikan agar dipicu pada peristiwa mouseplayer_batch, lalu publikasikan kontainer Anda.

Langkah 2: Konfigurasikan Tag Web GTM

Di kontainer Web GTM Anda, impor Tag SDK. Pilih “Konfigurasi & Inisialisasi” sebagai Jenis Tag, masukkan Channel ID, pilih Mode Hybrid, lalu tempelkan URL Endpoint ssGTM Anda (misalnya, https://metrics.yourdomain.com/mp_capi).

3. Pemasangan Manual (Tanpa GTM)

Jika Anda lebih memilih memasang skrip langsung dalam kode, tentukan objek window.mp_config sebelum memuat cuplikan kode pelacakan.

<!-- MousePlayer Config & SDK --> <script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. Pelacakan Funnel E-Commerce

Lacak seluruh perjalanan pelanggan. Nama peristiwa standar memungkinkan MousePlayer otomatis menghasilkan laporan Funnel E-Commerce yang menarik di ruang kerja proyek Anda. Semua peristiwa sepenuhnya kompatibel dengan mode CAPI dan Web-Only.

1. view_item

Picu peristiwa ini saat pengguna melihat halaman produk tertentu.

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

Picu peristiwa ini saat pengguna menambahkan barang ke keranjang belanja.

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

Picu peristiwa ini saat pengguna melanjutkan ke layar checkout.

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

Picu peristiwa ini saat pembayaran berhasil atau pesanan dikonfirmasi.

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. Peristiwa Kustom & Perolehan Prospek

Anda tidak terbatas pada e-commerce. Lacak pengiriman formulir, pendaftaran buletin, atau interaksi kustom yang khusus untuk aplikasi web Anda.

Perolehan Prospek (Pengiriman Formulir)

Picu peristiwa ini saat pengguna berhasil mengirim formulir kontak atau meminta penawaran.

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

Interaksi UI Kustom

Pahami cara pengguna berinteraksi dengan elemen kompleks seperti kalkulator, modal, atau pergantian tab.

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. Batas Parameter & Panduan

Penentuan Tipe Data: MousePlayer otomatis mendeteksi tipe parameter. Kirim angka sebagai integer atau float (misalnya, 150.00, bukan "150.00") untuk mengaktifkan pemfilteran numerik lanjutan (misalnya, “Harga > 100”) di dasbor.

Aturan Deskripsi
Panjang Nama Peristiwa Maksimum 128 karakter. Gunakan snake_case agar mudah dibaca (misalnya, user_signup).
Panjang Kunci Parameter Maksimum 64 karakter per nama kunci (misalnya, transaction_id).
Nilai String Parameter teks dipotong hingga 255 karakter untuk memastikan kinerja basis data optimal.
Privasi Data Jangan pernah kirim Informasi Identitas Pribadi (PII) seperti alamat email mentah, nama asli, atau kata sandi sebagai parameter peristiwa.