運作原理
由於 Zonos Checkout 在不同來源的 iframe 內執行，它無法直接存取您頁面的 fbq 函式。中繼系統透過兩步握手（步驟 1-2）後接著事件轉發（步驟 3）來解決這個問題：
- Checkout 向父頁面發送訊息 —— 當結帳在 iframe 內加載時，它會向父窗口發送訊息，表示它已準備好轉發事件，包括 Pixel ID。
- 父頁面確認 —— 您頁面上的中繼腳本收到訊息，檢測（或注入）您的 Meta Pixel 基礎代碼，並回信表示已準備好接收事件。
- 事件被轉發 —— 當購物者在結帳中進行時，每個分析事件都會透過
postMessage發送到您的頁面，其中中繼腳本將其轉發到fbq並使用適當的track/trackCustom模式。
所有訊息都會根據受信任的 Zonos 來源（zonos.com 和 iglobalstores.com）進行驗證，且僅透過 HTTPS。
先決條件
- 一個 Meta Pixel，具有 Pixel ID（數字字符串，通常 15-16 位數）。您可以在 Meta Events Manager 中建立一個。
- 一個 舊版 Checkout 整合，在您的頁面中的 iframe 內加載 Zonos Checkout。
- Facebook Pixel 已啟用在您的 Zonos Checkout 設定中（在 Zonos 儀表板的 Checkout 設定 -> 追蹤 下）。
設定
步驟 1：將 Meta Pixel 基礎代碼新增至您的頁面
如果您的網站上還沒有安裝 Meta Pixel，請將標準 Pixel 基礎代碼新增至託管 Checkout iframe 的頁面的 <head>。將 YOUR_PIXEL_ID 替換為您自己的數字 Pixel ID。
<!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');</script>注意： 如果您的網站已安裝 Meta Pixel（例如透過 Google Tag Manager、Shopify 的原生整合或直接代碼片段），您可以跳過此步驟。中繼腳本將使用您現有的
fbq函式。
您可以在 Meta Events Manager 中您的 Pixel 的 Settings -> Continue Pixel Setup -> Install code manually 下找到此代碼片段。
步驟 2：將您的 Pixel ID 傳遞給 Zonos Checkout
透過在 Checkout 的 customHTML 內設定 window.Zonos.facebookPixelId 來告訴 Zonos Checkout 要使用哪個 Pixel ID。Zonos 儀表板在 Checkout 設定下公開了一個 customHTML 編輯器 —— 新增一個 <script> 標籤，如下所示：
<script> window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';</script>此值在中繼握手期間發送到父頁面。如果您的父頁面上還沒有加載 fbq，中繼腳本會使用您提供的 ID 為您注入 Meta Pixel 基礎代碼。
步驟 3：新增 Zonos 分析中繼腳本
將下列腳本標籤新增至加載 Checkout iframe 的同一頁面，位於 Meta Pixel 基礎代碼之後。這是 與 Google Analytics 4 相同的腳本 —— 單個中繼會處理兩個提供者，因此如果您已為 GA4 新增了它，請跳過此步驟。
<script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"></script>完整範例
以下是您頁面 <head> 中完整設定的樣子：
<head> <!-- ... your existing head tags ... --> <!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView'); </script> <!-- Zonos 分析中繼 - iframe 結帳 --> <script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js" ></script></head>就這樣。一旦您頁面上有兩個腳本、在您的 Zonos 儀表板中啟用了 Facebook Pixel，以及 customHTML 設定了 Pixel ID，中繼就會自動將所有結帳漏斗事件轉發到 Meta。
Meta Pixel 事件參考
對於漏斗中的每個步驟，Zonos Checkout 會發送一個自訂事件（因此您可以構建精確的受眾）和相應的 Meta 標準事件（因此它會顯示在 Meta 的最佳化和轉換報告中）。所有事件都包括一個 isTestMode 旗標和 checkoutSessionId。
| 觸發事項↕ | 自訂事件（fbq('trackCustom', ...)）↕ | 標準事件（fbq('track', ...)）↕ | 其他中繼資料↕ |
|---|---|---|---|
| 結帳打開 | zonos-checkout-start | InitiateCheckout | -- |
| 購物者輸入客戶資訊 | zonos-checkout-customer-info | 無 | -- |
| 購物者選擇運送方式 | zonos-checkout-shipping-info | 無 | serviceLevelId |
| 購物者輸入付款詳細資訊 | zonos-checkout-payment-info | AddPaymentInfo | paymentMethod |
| 付款嘗試失敗 | zonos-checkout-payment-fail | 無 | -- |
| 訂單成功完成 | zonos-checkout-success | 無 | order_id、currency、value、contents、content_ids |
| 訂單完成（電子商務事件） | purchase | Purchase | order_id、currency、value、contents、content_ids |
| 購物者關閉結帳 | zonos-checkout-close | 無 | -- |
沒有 Meta 標準對應事件的步驟（例如客戶資訊、運送資訊）只會發送自訂
zonos-checkout-...事件。您可以在 Meta Ads Manager 中透過自訂受眾使用「事件 =zonos-checkout-customer-info」等方式來針對這些事件。
Purchase 事件中繼資料
Purchase 標準事件遵循 Meta Pixel Purchase 事件 的架構。購物車項目會從 GA 型式的 items 陣列對映到 Meta 的 contents 陣列：
| 欄位↕ | 描述↕ |
|---|---|
value | 總訂單價值 |
currency | 三字母貨幣代碼（例如 USD） |
order_id | Zonos 訂單 ID 或結帳工作階段 ID |
contents | 購物車項目陣列，每個包含 id、quantity 和 item_price |
content_ids | 項目 ID 陣列（SKU、產品 ID 或產品名稱備用） |
content_type | 總是 "product" |
num_items | 所有項目的總數量 |
偵錯
若要為中繼腳本啟用偵錯日誌，請將 zonosDebug=1 查詢參數新增至您的頁面 URL：
https://www.yourstore.com/checkout?zonosDebug=1打開您瀏覽器的開發者主控台以查看中繼握手和轉發事件的詳細日誌。這對於驗證以下事項很有幫助：
- 中繼腳本收到來自結帳 iframe 的訊息。
- Meta Pixel 已使用正確的 Pixel ID 進行設定。
- 事件正在以預期的
track/trackCustom模式轉發到fbq。
Meta Pixel Helper Chrome 擴充程式對於即時檢查 Pixel 呼叫也很有幫助。
常見問題
為什麼同一步驟會發送兩個事件（例如 zonos-checkout-start 和 InitiateCheckout）？
Meta 的標準事件可開箱即用地支援轉換最佳化、廣告報告和相似受眾。自訂 zonos-checkout-... 事件可讓您在確切的漏斗步驟上構建更詳細的自訂受眾，即使沒有 Meta 標準對應事件（例如客戶資訊、運送資訊）。同時發送兩者可讓您獲得兩者的最佳優勢而不會失去任何訊號。
如果我同時執行 Google Analytics 和 Facebook Pixel 呢？
您不需要兩個中繼腳本 —— 同一個 analyticsRelayOnInit.js 在單個握手中處理兩個提供者。將 GA4 基礎標籤和 Meta Pixel 基礎代碼新增至您的 <head>，在 customHTML 中設定 window.Zonos.googleAnalyticId 和 window.Zonos.facebookPixelId，並在您的 Zonos 儀表板中啟用兩個提供者。每個事件都會分散到啟用的提供者。
如果我的父頁面上沒有安裝 Meta Pixel 呢？
如果您的 customHTML 設定了 window.Zonos.facebookPixelId 且中繼腳本在頁面上偵測不到 fbq，它會在握手期間為您使用您提供的 Pixel ID 注入 Meta Pixel 基礎代碼。如果您想在結帳漏斗外發送 PageView 和其他事件，您也可以自己預先安裝 Meta Pixel 基礎代碼。
測試訂單是否被追蹤？
所有事件都包括一個 isTestMode 欄位。當 Checkout 處於測試模式時，事件仍會被轉發到 Meta 但標記為 isTestMode: true。您可以在 Meta Ads Manager 中篩選這些事件或透過自訂轉換規則排除它們。
Conversions API (CAPI) 會取代這個嗎？
不會 —— 這是一個在您購物者的瀏覽器中執行的瀏覽器端 Pixel 整合。Meta Conversions API 是一個單獨的伺服器對伺服器通道，某些商家在 Pixel 旁邊使用它以提高冗餘度。這兩者是互補的，Zonos 的中繼僅處理瀏覽器端 Pixel。
iframe 結帳的 Facebook Pixel
當使用 iframe 型式舊版 Checkout 整合時，使用 Meta (Facebook) Pixel 追蹤完整的結帳漏斗。
使用舊版 Checkout 整合的商家（iframe 託管在
iglobalstores.com）可以跨越完整的結帳漏斗追蹤 Meta Pixel 事件。Zonos Checkout 會自動透過與 Google Analytics 4 相同的輕量級中繼腳本，將 iframe 的分析事件轉發到父頁面，使事件在您的 Meta Events Manager 中顯示為來自您自己網站的事件。對於每個漏斗步驟，會發送兩個事件：
zonos-checkout-...的自訂事件（透過fbq('trackCustom', ...)），用於構建完整漏斗自訂受眾。fbq('track', ...)），用於內建最佳化，例如InitiateCheckout、AddPaymentInfo和Purchase。