Bagaimana cara saya menyiapkan Google Analytics 4 dengan Zonos Checkout iframe legacy?

Tambahkan cuplikan gtag.js GA4 standar ke halaman yang menghost iframe Checkout, kemudian tambahkan skrip analyticsRelayOnInit.js Zonos. Skrip relai secara otomatis menangani komunikasi lintas-iframe dan meneruskan acara checkout ke properti GA4 Anda.

Acara GA4 apa yang dilacak Zonos Checkout?

Zonos Checkout melacak seluruh corong checkout termasuk zonos-checkout-start, zonos-checkout-customer-info, zonos-checkout-shipping-info, zonos-checkout-payment-info, zonos-checkout-payment-fail, zonos-checkout-success, zonos-checkout-close, dan acara pembelian GA4 standar dengan detail transaksi.

Checkout•

BerandaReferensi API API REST Checkout Google Analytics 4

Google Analytics 4 untuk Checkout iframe

Q: Apakah saya perlu memodifikasi panggilan API createTempCart saya untuk pelacakan GA4?

Tidak. Sistem relai bekerja secara independen dari API createTempCart. Anda hanya perlu menambahkan tag GA4 dan skrip relai Zonos ke halaman Anda.

Q: Bagaimana cara saya mem-debug acara GA4 dari Zonos Checkout?

Tambahkan parameter kueri zonosDebug=true ke URL halaman Anda dan buka konsol pengembang browser Anda untuk melihat log terperinci dari jabat tangan relai dan acara yang diteruskan. Anda juga dapat menggunakan GA4 DebugView di Google Analytics untuk memverifikasi acara secara real-time.

Lacak seluruh corong checkout dengan GA4 saat menggunakan integrasi Checkout legacy berbasis iframe.

Pedagang yang menggunakan integrasi Checkout legacy (iframe di-host di iglobalstores.com) sekarang dapat melacak acara analitik GA4 di seluruh corong checkout. Zonos Checkout secara otomatis meneruskan acara analitik dari iframe ke halaman induk menggunakan skrip relai ringan, sehingga acara muncul di properti GA4 Anda seolah-olah berasal dari situs Anda sendiri.

Integrasi native tidak memerlukan panduan ini. Jika <zonos-checkout> dirender langsung di situs Anda (tanpa iframe), Zonos memanggil window.gtag halaman Anda sebagai gantinya — cukup aktifkan Google Analytics di dasbor Zonos di bawah Pengaturan Checkout → Pelacakan dan pastikan tag dasar GA4 biasa Anda dimuat di halaman. Penyiapan relai di bawah ini hanya diperlukan saat Checkout di-host di iframe pada asal yang berbeda.

Mencari untuk melacak konversi Meta Ads? Lihat panduan Facebook Pixel -- itu menggunakan skrip relai yang sama dan dapat berjalan bersama GA4.

Cara kerjanya

Karena Zonos Checkout berjalan di dalam iframe pada asal yang berbeda, itu tidak dapat langsung mengakses fungsi gtag halaman Anda. Sistem relai menyelesaikan ini dengan jabat tangan dua langkah (langkah 1-2) diikuti oleh penerusan acara (langkah 3):

Checkout mengirim ping ke induk -- Saat checkout dimuat di dalam iframe, itu mengirimkan pesan ke jendela induk yang menunjukkan siap untuk meneruskan acara.
Induk mengakui -- Skrip relai di halaman Anda menerima ping, mendeteksi konfigurasi GA4 yang ada, dan mengirimkan sinyal kembali bahwa siap menerima acara.
Acara diteruskan -- Saat pelanggan maju melalui checkout, setiap acara analitik dikirim melalui postMessage ke halaman Anda, tempat skrip relai meneruskannya ke gtag.

Semua pesan divalidasi terhadap asal Zonos terpercaya (zonos.com dan iglobalstores.com) hanya melalui HTTPS.

Prasyarat

Sebuah properti GA4 dengan ID pengukuran (format: G-XXXXXXXXXX). Anda dapat membuat satu di Google Analytics.
Sebuah integrasi Checkout legacy yang memuat Zonos Checkout di iframe di halaman Anda.

Penyiapan

Langkah 1: Tambahkan tag GA4 ke halaman Anda

Jika Anda belum memiliki GA4 yang dipasang di situs Anda, tambahkan tag Google Analytics 4 standar ke <head> halaman yang menghost iframe Checkout. Gantikan G-XXXXXXXXXX dengan ID pengukuran Anda sendiri.

1

3<script

4 async

5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

6></script>

8<script>

9 window.dataLayer = window.dataLayer || [];

10 function gtag() {

11 dataLayer.push(arguments);

12 }

13 gtag("js", new Date());

14 gtag("config", "G-XXXXXXXXXX");

15</script>

Catatan: Jika situs Anda sudah memiliki tag GA4 yang dipasang (misalnya, melalui Google Tag Manager atau cuplikan langsung), Anda dapat melewati langkah ini. Skrip relai akan menggunakan fungsi gtag yang ada.

Anda dapat menemukan cuplikan ini di properti GA4 Anda di bawah Admin -> Data Streams -> pilih aliran Anda -> Lihat instruksi tag -> Instal secara manual.

Langkah 2: Teruskan ID pengukuran Anda ke Zonos Checkout

Beri tahu Zonos Checkout ID pengukuran GA4 mana yang akan digunakan dengan mengatur window.Zonos.googleAnalyticId di dalam customHTML Checkout Anda. Dasbor Zonos mengekspos editor customHTML di bawah pengaturan Checkout -- tambahkan tag <script> seperti ini:

1<script>

2 window.Zonos.googleAnalyticId = "G-XXXXXXXXXX";

3</script>

Nilai ini dikirimkan ke induk selama jabat tangan relai. Jika halaman induk Anda tidak sudah memiliki gtag dimuat, skrip relai akan menyuntikkan tag dasar GA4 untuk Anda menggunakan ID ini.

Langkah 3: Tambahkan skrip relai analitik Zonos

Tambahkan tag skrip berikut ke halaman yang sama, setelah tag GA4. Skrip ini mendengarkan acara analitik dari iframe Checkout Zonos dan meneruskannya ke gtag Anda.

1<script

2 async

3 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

4></script>

Contoh lengkap

Inilah tampilan penyiapan lengkap di <head> halaman Anda:

1<head>

2 

4 

6 <script

7 async

8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

9 ></script>

11 <script>

12 window.dataLayer = window.dataLayer || [];

13 function gtag() {

14 dataLayer.push(arguments);

15 }

16 gtag("js", new Date());

17 gtag("config", "G-XXXXXXXXXX");

18 </script>

20 

22 <script

23 async

24 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

25 ></script>

26</head>

Itu saja. Setelah kedua skrip ada di halaman Anda, skrip relai secara otomatis menyelesaikan jabat tangan dengan iframe checkout dan meneruskan semua acara corong checkout ke properti GA4 Anda.

Referensi acara GA4

Zonos Checkout memancarkan acara-acara berikut melalui relai. Semua acara menyertakan bendera isTestMode dan checkoutSessionId.

Event↕	Trigger↕	Metadata tambahan↕
`zonos-checkout-start`	Checkout terbuka	--
`zonos-checkout-customer-info`	Pembeli memasukkan informasi pelanggan	--
`zonos-checkout-shipping-info`	Pembeli memilih metode pengiriman	`serviceLevelId`
`zonos-checkout-payment-info`	Pembeli memasukkan detail pembayaran	`paymentMethod`
`zonos-checkout-payment-fail`	Upaya pembayaran gagal	--
`zonos-checkout-success`	Pesanan diselesaikan dengan sukses	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Pembeli menutup checkout	--
`purchase`	Pesanan diselesaikan (acara e-commerce standar GA4)	`transaction_id`, `currency`, `value`, `items`

Metadata acara pembelian

Acara purchase mengikuti skema acara e-commerce purchase GA4:

Field↕	Description↕
`transaction_id`	ID pesanan Zonos atau ID sesi checkout
`currency`	Kode mata uang tiga huruf (misalnya, `USD`)
`value`	Nilai pesanan total
`items`	Array item keranjang, masing-masing dengan `item_id`, `item_name`, `price`, dan `quantity`

Debugging

Untuk mengaktifkan pencatatan debug untuk skrip relai, tambahkan parameter kueri zonosDebug=1 ke URL halaman Anda:

1https://www.yourstore.com/checkout?zonosDebug=1

Buka konsol pengembang browser Anda untuk melihat log terperinci dari jabat tangan relai dan acara yang diteruskan. Ini berguna untuk memverifikasi bahwa:

Skrip relai menerima ping dari iframe checkout.
GA4 dikonfigurasi dengan ID pengukuran yang benar.
Acara sedang diteruskan ke gtag.

Pertanyaan umum

Apakah saya perlu memodifikasi panggilan API `createTempCart` saya?

Tidak. Sistem relai bekerja secara independen dari API createTempCart. Anda hanya perlu menambahkan tag GA4 dan skrip relai ke halaman Anda.

Bagaimana jika saya sudah menggunakan `footerHTML` untuk Google Analytics?

Parameter footerHTML di API createTempCart menyuntikkan skrip di dalam iframe checkout, yang terbatas pada pelacakan acara tingkat halaman dalam asal iframe. Pendekatan relai direkomendasikan karena mengirimkan acara ke properti GA4 Anda sendiri di domain Anda, memberi Anda visibilitas corong lengkap dalam satu properti.

Anda dapat dengan aman menghapus skrip GA4 apa pun dari footerHTML setelah menyiapkan relai.

Apakah ini bekerja dengan mode debug GA4 di Google Analytics?

Ya. Anda dapat menggunakan zonosDebug=1 untuk mengaktifkan log skrip relai di konsol pengembang browser Anda, dan gunakan GA4 DebugView di Google Analytics untuk memverifikasi acara secara real-time.

Apakah pesanan uji dilacak?

Semua acara menyertakan bidang isTestMode. Ketika Checkout dalam mode uji, acara masih dikirim ke GA4 tetapi ditandai dengan isTestMode: true. Anda dapat memfilter ini di GA4 menggunakan dimensi khusus jika diperlukan.

Pesan demo