DOCS

Piksel Facebook

Checkout•
BerandaReferensi API API REST Checkout Piksel Facebook

Piksel Facebook untuk Checkout iframe

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

Pedagang yang menggunakan integrasi Checkout warisan (iframe yang dihosting di iglobalstores.com) dapat melacak acara Piksel Meta di seluruh saluran checkout. Zonos Checkout secara otomatis meneruskan acara analitik dari iframe ke halaman induk menggunakan skrip relai yang sama dan ringan 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 asli tidak memerlukan panduan ini. Jika <zonos-checkout> dirender langsung di situs Anda (bukan iframe), Zonos memanggil window.fbq halaman Anda sebagai gantinya — cukup aktifkan Piksel Facebook di dasbor Zonos di bawah Pengaturan Checkout → Pelacakan dan pastikan kode dasar Piksel Meta 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 ID Piksel.
  2. Induk mengakui -- Skrip relai di halaman Anda menerima ping, mendeteksi (atau menyuntikkan) kode dasar Piksel Meta 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 

  • Piksel Meta dengan ID Piksel (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.
  • Piksel Facebook diaktifkan di pengaturan Zonos Checkout Anda (di dasbor Zonos, di bawah pengaturan Checkout -> Pelacakan).

Pengaturan 

Langkah 1: Tambahkan kode dasar Piksel Meta ke halaman Anda

Jika Anda belum menginstal Piksel Meta di situs Anda, tambahkan kode dasar Piksel standar ke <head> halaman yang menghosting iframe Checkout. Ganti YOUR_PIXEL_ID dengan ID Piksel 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 Piksel Meta terpasang (misalnya, melalui Google Tag Manager, integrasi asli 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 Piksel -> Lanjutkan Penyiapan Piksel -> Instal kode secara manual.

Langkah 2: Teruskan ID Piksel Anda ke Zonos Checkout

Beritahu Zonos Checkout ID Piksel 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 Piksel Meta 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 Piksel Meta. 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 <!-- ... tag head yang ada Anda ... -->
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, Piksel Facebook diaktifkan di dasbor Zonos Anda, dan customHTML menetapkan ID Piksel, relai secara otomatis meneruskan semua acara saluran checkout ke Meta.

Referensi acara Piksel Meta 

Untuk setiap langkah dalam saluran, Zonos Checkout menampilkan 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 menampilkan 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.
  • Piksel Meta dikonfigurasi dengan ID Piksel yang benar.
  • Acara diteruskan ke fbq dengan mode track / trackCustom yang diharapkan.

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

Pertanyaan umum 

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

Acara standar Meta memberdayakan optimisasi konversi, pelaporan iklan, dan audiens lookalike di luar kotak. 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). Menampilkan keduanya memberikan yang terbaik dari kedua dunia tanpa kehilangan sinyal apa pun.

Bagaimana jika saya menjalankan Google Analytics dan Facebook Pixel?

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 Piksel Meta ke <head> Anda, atur window.Zonos.googleAnalyticId dan window.Zonos.facebookPixelId dalam customHTML, dan aktifkan kedua penyedia di dasbor Zonos Anda. Setiap acara difan out ke penyedia mana pun yang diaktifkan.

Bagaimana jika halaman induk saya tidak memiliki Piksel Meta terpasang?

Jika customHTML Anda menetapkan window.Zonos.facebookPixelId dan skrip relai mendeteksi tidak ada fbq di halaman, ia akan menyuntikkan kode dasar Piksel Meta untuk Anda selama jabat tangan menggunakan ID Piksel yang Anda berikan. Anda juga dapat pra-instal kode dasar Piksel Meta sendiri jika ingin menampilkan 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 Piksel sisi browser yang berjalan di browser pembeli Anda. Meta Conversions API adalah saluran server-ke-server terpisah yang beberapa pedagang gunakan bersama Piksel untuk redundansi. Keduanya saling melengkapi dan relai Zonos hanya menangani Piksel sisi browser.

Pesan demo

Apakah halaman ini bermanfaat?

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