DOCS
Checkout•
BerandaReferensi API API REST Checkout Facebook Pixel

Facebook Pixel untuk Checkout iframe

Lacak saluran checkout penuh dengan Meta (Facebook) Pixel saat menggunakan integrasi Checkout warisan berbasis iframe.

Pedagang yang menggunakan integrasi Checkout warisan (iframe yang dihosting di iglobalstores.com) dapat melacak acara Meta Pixel di seluruh saluran checkout. Zonos Checkout secara otomatis meneruskan acara analitik dari iframe ke halaman induk menggunakan skrip relai ringan yang sama dengan yang digunakan untuk Google Analytics 4, sehingga acara muncul di Meta Events Manager seolah-olah berasal dari situs Anda sendiri.

Untuk setiap langkah saluran, dua acara dipancarkan:

  • Acara kustom bernama zonos-checkout-... (melalui fbq('trackCustom', ...)) untuk audiens khusus saluran penuh.
  • Acara standar Meta yang cocok (melalui fbq('track', ...)) untuk optimisasi bawaan, misalnya InitiateCheckout, AddPaymentInfo, dan Purchase.

Integrasi native tidak memerlukan panduan ini. Jika <zonos-checkout> dirender langsung di situs Anda (bukan iframe), Zonos memanggil window.fbq halaman Anda sebagai gantinya — cukup aktifkan Facebook Pixel di dasbor Zonos di bawah Pengaturan Checkout → Pelacakan dan pastikan kode dasar Meta Pixel yang biasa Anda gunakan dimuat di halaman. Pengaturan relai di bawah hanya diperlukan saat Checkout dihosting dalam iframe di asal yang berbeda.

Cara kerjanya 

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

  1. Checkout mengirim ping ke induk -- Ketika checkout dimuat di dalam iframe, ia mengirim pesan ke jendela induk yang menunjukkan bahwa ia siap meneruskan acara, termasuk Pixel ID.
  2. Induk mengakui -- Skrip relai di halaman Anda menerima ping, mendeteksi (atau menyuntikkan) kode dasar Meta Pixel Anda, dan mengirimkan sinyal kembali bahwa ia siap menerima acara.
  3. Acara diteruskan -- Seiring pembeli maju melalui checkout, setiap acara analitik dikirim melalui postMessage ke halaman Anda, di mana skrip relai meneruskannya ke fbq dengan mode track / trackCustom yang sesuai.

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

Prasyarat 

  • Meta Pixel dengan Pixel ID (string numerik, biasanya 15-16 digit). Anda dapat membuat yang baru di Meta Events Manager.
  • Integrasi Checkout warisan yang memuat Zonos Checkout dalam iframe di halaman Anda.
  • Facebook Pixel diaktifkan di pengaturan Zonos Checkout Anda (di dasbor Zonos, di bawah pengaturan Checkout -> Pelacakan).

Pengaturan 

Langkah 1: Tambahkan kode dasar Meta Pixel ke halaman Anda

Jika Anda belum menginstal Meta Pixel di situs Anda, tambahkan kode dasar Pixel standar ke <head> halaman yang menghosting iframe Checkout. Ganti YOUR_PIXEL_ID dengan Pixel ID numerik Anda sendiri.

1<!-- Meta Pixel Code -->
2 
3<script>
4 !(function (f, b, e, v, n, t, s) {
5 if (f.fbq) return;
6 n = f.fbq = function () {
7 n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
8 };
9 if (!f._fbq) f._fbq = n;
10 n.push = n;
11 n.loaded = !0;
12 n.version = "2.0";
13 n.queue = [];
14 t = b.createElement(e);
15 t.async = !0;
16 t.src = v;
17 s = b.getElementsByTagName(e)[0];
18 s.parentNode.insertBefore(t, s);
19 })(
20 window,
21 document,
22 "script",
23 "https://connect.facebook.net/en_US/fbevents.js",
24 );
25 fbq("init", "YOUR_PIXEL_ID");
26 fbq("track", "PageView");
27</script>

Catatan: Jika situs Anda sudah memiliki Meta Pixel terpasang (misalnya, melalui Google Tag Manager, integrasi native Shopify, atau cuplikan langsung), Anda dapat melewati langkah ini. Skrip relai akan menggunakan fungsi fbq yang ada.

Anda dapat menemukan cuplikan ini di Meta Events Manager Anda di bawah Pengaturan Pixel -> Lanjutkan Penyiapan Pixel -> Instal kode secara manual.

Langkah 2: Teruskan Pixel ID Anda ke Zonos Checkout

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

1<script>
2 window.Zonos.facebookPixelId = "YOUR_PIXEL_ID";
3</script>

Nilai ini dikirim ke induk selama jabat tangan relai. Jika halaman induk Anda belum memiliki fbq yang dimuat, skrip relai akan menyuntikkan kode dasar Meta Pixel untuk Anda menggunakan ID ini.

Langkah 3: Tambahkan skrip relai analitik Zonos

Tambahkan tag skrip berikut ke halaman yang sama yang memuat iframe Checkout, setelah kode dasar Meta Pixel. Ini adalah skrip yang sama yang digunakan untuk Google Analytics 4 -- relai tunggal menangani kedua penyedia, jadi jika Anda sudah menambahkannya untuk GA4, lewati langkah ini.

1<script
2 async
3 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"
4></script>

Contoh lengkap

Inilah tampilan pengaturan lengkap di <head> halaman Anda:

1<head>
2 <!-- ... your existing head tags ... -->
3 
4 <!-- Meta Pixel Code -->
5 
6 <script>
7 !(function (f, b, e, v, n, t, s) {
8 if (f.fbq) return;
9 n = f.fbq = function () {
10 n.callMethod
11 ? n.callMethod.apply(n, arguments)
12 : n.queue.push(arguments);
13 };
14 if (!f._fbq) f._fbq = n;
15 n.push = n;
16 n.loaded = !0;
17 n.version = "2.0";
18 n.queue = [];
19 t = b.createElement(e);
20 t.async = !0;
21 t.src = v;
22 s = b.getElementsByTagName(e)[0];
23 s.parentNode.insertBefore(t, s);
24 })(
25 window,
26 document,
27 "script",
28 "https://connect.facebook.net/en_US/fbevents.js",
29 );
30 fbq("init", "YOUR_PIXEL_ID");
31 fbq("track", "PageView");
32 </script>
33 
34 <!-- Zonos analytics relay for iframe checkout -->
35 
36 <script
37 async
38 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"
39 ></script>
40</head>

Itu saja. Setelah kedua skrip berada di halaman Anda, Facebook Pixel diaktifkan di dasbor Zonos Anda, dan customHTML menetapkan Pixel ID, relai secara otomatis meneruskan semua acara saluran checkout ke Meta.

Referensi acara Meta Pixel 

Untuk setiap langkah dalam saluran, Zonos Checkout memicu acara kustom (sehingga Anda dapat membangun audiens yang tepat) dan acara standar Meta yang cocok (sehingga muncul dalam optimisasi dan pelaporan konversi Meta). Semua acara menyertakan bendera isTestMode dan checkoutSessionId.

Pemicu↕Acara kustom (fbq('trackCustom', ...))↕Acara standar (fbq('track', ...))↕Metadata tambahan↕
Checkout dibukazonos-checkout-startInitiateCheckout--
Pembeli memasukkan info pelangganzonos-checkout-customer-infotidak ada--
Pembeli memilih metode pengirimanzonos-checkout-shipping-infotidak adaserviceLevelId
Pembeli memasukkan detail pembayaranzonos-checkout-payment-infoAddPaymentInfopaymentMethod
Percobaan pembayaran gagalzonos-checkout-payment-failtidak ada--
Pesanan berhasil diselesaikanzonos-checkout-successtidak adaorder_id, currency, value, contents, content_ids
Pesanan selesai (acara e-commerce)purchasePurchaseorder_id, currency, value, contents, content_ids
Pembeli menutup checkoutzonos-checkout-closetidak ada--

Langkah tanpa padanan standar Meta (misalnya info pelanggan, info pengiriman) hanya memicu acara zonos-checkout-... kustom. Anda dapat menargetkan ini di Meta Ads Manager melalui audiens kustom menggunakan "Event = zonos-checkout-customer-info", dll.

Metadata acara Purchase

Acara standar Purchase mengikuti skema acara Meta Pixel Purchase. Item keranjang dipetakan dari larik gaya GA items ke larik contents Meta:

Bidang↕Deskripsi↕
valueNilai pesanan total
currencyKode mata uang tiga huruf (misalnya, USD)
order_idID pesanan Zonos atau ID sesi checkout
contentsArray item keranjang, masing-masing dengan id, quantity, dan item_price
content_idsArray ID item (SKU, ID produk, atau fallback nama produk)
content_typeSelalu "product"
num_itemsTotal kuantitas di semua item

Debug 

Untuk mengaktifkan logging 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 detail dari jabat tangan relai dan acara yang diteruskan. Ini berguna untuk memverifikasi bahwa:

  • Skrip relai menerima ping dari iframe checkout.
  • Meta Pixel dikonfigurasi dengan Pixel ID yang benar.
  • Acara diteruskan ke fbq dengan mode track / trackCustom yang diharapkan.

Ekstensi Chrome Meta Pixel Helper juga berguna untuk memeriksa panggilan Pixel secara real-time.

Pertanyaan umum 

Mengapa dua acara dipicu untuk langkah yang sama (misalnya zonos-checkout-start dan InitiateCheckout)?

Acara standar Meta memberdayakan optimisasi konversi, pelaporan iklan, dan audiens lookalike secara bawaan. Acara kustom zonos-checkout-... memungkinkan Anda membangun audiens kustom yang lebih terperinci pada langkah saluran yang tepat, bahkan ketika tidak ada padanan standar Meta (misalnya info pelanggan, info pengiriman). Memicu keduanya memberikan yang terbaik dari kedua dunia tanpa kehilangan sinyal apa pun.

Bagaimana jika saya menjalankan Google Analytics dan Facebook Pixel sekaligus?

Anda tidak memerlukan dua skrip relai -- skrip analyticsRelayOnInit.js yang sama menangani kedua penyedia dalam satu jabat tangan. Tambahkan tag dasar GA4 dan kode dasar Meta Pixel ke <head> Anda, atur window.Zonos.googleAnalyticId dan window.Zonos.facebookPixelId dalam customHTML, dan aktifkan kedua penyedia di dasbor Zonos Anda. Setiap acara disalurkan ke penyedia mana pun yang diaktifkan.

Bagaimana jika halaman induk saya tidak memiliki Meta Pixel terpasang?

Jika customHTML Anda menetapkan window.Zonos.facebookPixelId dan skrip relai mendeteksi tidak ada fbq di halaman, ia akan menyuntikkan kode dasar Meta Pixel untuk Anda selama jabat tangan menggunakan Pixel ID yang Anda berikan. Anda juga dapat pra-instal kode dasar Meta Pixel sendiri jika ingin memicu PageView dan acara lain di luar saluran checkout.

Apakah pesanan pengujian dilacak?

Semua acara menyertakan bidang isTestMode. Ketika Checkout dalam mode pengujian, acara masih diteruskan ke Meta tetapi ditandai dengan isTestMode: true. Anda dapat memfilter ini di Meta Ads Manager atau mengecualikannya dengan aturan konversi kustom.

Apakah Conversions API (CAPI) menggantikan ini?

Tidak -- ini adalah integrasi Pixel sisi browser yang berjalan di browser pembeli Anda. Meta Conversions API adalah saluran server-ke-server terpisah yang beberapa pedagang gunakan bersama Pixel untuk redundansi. Keduanya saling melengkapi dan relai Zonos hanya menangani Pixel sisi browser.

Apakah halaman ini bermanfaat?

Dapatkan dukungan·Dokumen hukum·© 2026 Zonos
Di halaman ini:
  • Facebook Pixel untuk Checkout iframe
  • Cara kerjanya
  • Prasyarat
  • Pengaturan
  • Referensi acara Meta Pixel
  • Debug
  • Pertanyaan umum