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', ...))用於完整漏斗自訂受眾。
  • 對應的 Meta 標準事件(透過 fbq('track', ...))用於內建最佳化,例如 InitiateCheckoutAddPaymentInfoPurchase

原生整合不需要本指南。 如果 <zonos-checkout> 直接在您的網站上呈現(不使用 iframe),Zonos 會呼叫您頁面的 window.fbq,只需在 Zonos 儀表板的結帳設定追蹤下啟用 Facebook Pixel,並確保您的常用 Meta Pixel 基礎代碼已載入頁面。下面的轉發設定僅在 Checkout 託管在不同來源的 iframe 中時需要。

運作方式 

因為 Zonos Checkout 在不同來源的 iframe 內執行,所以無法直接存取您頁面的 fbq 函數。轉發系統使用兩步握手(步驟 1-2)後跟事件轉發(步驟 3)來解決此問題:

  1. 結帳 ping 父級 - 當結帳在 iframe 內載入時,它會向父視窗發送訊息,表示已準備好轉發事件,包括 Pixel ID。
  2. 父級確認 - 您頁面上的轉發指令碼接收 ping,偵測(或注入)您的 Meta Pixel 基礎代碼,並發出信號表示已準備好接收事件。
  3. 事件被轉發 - 當購物者在結帳中進行時,每個分析事件都會透過 postMessage 發送到您的頁面,其中轉發指令碼使用適當的 track / trackCustom 模式將其轉發到 fbq

所有訊息都針對受信任的 Zonos 來源(zonos.comiglobalstores.com)透過 HTTPS 進行驗證。

先決條件 

  • Meta Pixel 及 Pixel ID(數字字串,通常為 15-16 位數字)。您可以在 Meta Events Manager 中建立一個。
  • 舊版 Checkout 整合,在您的頁面上的 iframe 中載入 Zonos Checkout。
  • Facebook Pixel 已啟用在您的 Zonos Checkout 設定中(在 Zonos 儀表板中,結帳設定 -> 追蹤下)。

設定 

步驟 1:將 Meta Pixel 基礎代碼新增到您的頁面

如果您的網站上還沒有 Meta Pixel,請將標準 Pixel 基礎代碼新增到託管 Checkout iframe 的頁面的 <head>。將 YOUR_PIXEL_ID 替換為您自己的數字 Pixel ID。

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>

注意: 如果您的網站已經安裝了 Meta Pixel(例如透過 Google Tag Manager、Shopify 原生整合或直接片段),您可以跳過此步驟。轉發指令碼將使用您現有的 fbq 函數。

您可以在 Meta Events Manager 中您的 Pixel 的設定 -> 繼續 Pixel 設定 -> 手動安裝代碼下找到此片段。

步驟 2:將您的 Pixel ID 傳遞給 Zonos Checkout

透過在結帳的 customHTML 中設定 window.Zonos.facebookPixelId 來告訴 Zonos Checkout 要使用哪個 Pixel ID。Zonos 儀表板在結帳設定下公開了 customHTML 編輯器 - 新增一個如下所示的 <script> 標籤:

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

此值在轉發握手期間發送到父級。如果您的父頁面還沒有載入 fbq,轉發指令碼將使用您提供的 Pixel ID 為您注入 Meta Pixel 基礎代碼。

步驟 3:新增 Zonos 分析轉發指令碼

將以下指令碼標籤新增到載入 Checkout iframe 的同一頁面,放在 Meta Pixel 基礎代碼之後。這是用於 Google Analytics 4 的相同指令碼 - 單個轉發處理兩個提供者,因此如果您已經為 GA4 新增了它,請跳過此步驟。

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

完整範例

以下是您頁面的 <head> 中完整設定的外觀:

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>

就這樣。一旦您的頁面上有兩個指令碼,您的 Zonos 儀表板中啟用了 Facebook Pixel,且 customHTML 設定了 Pixel ID,轉發就會自動將所有結帳漏斗事件轉發給 Meta。

Meta Pixel 事件參考 

對於漏斗中的每一步,Zonos Checkout 會觸發自訂事件(因此您可以建立精確的受眾)和對應的 Meta 標準事件(因此它會出現在 Meta 的最佳化和轉換報告中)。所有事件都包含 isTestMode 標誌和 checkoutSessionId

觸發自訂事件 (fbq('trackCustom', ...))標準事件 (fbq('track', ...))其他中繼資料
結帳開啟zonos-checkout-startInitiateCheckout--
購物者輸入客戶資訊zonos-checkout-customer-infonone--
購物者選擇配送方法zonos-checkout-shipping-infononeserviceLevelId
購物者輸入付款詳細資訊zonos-checkout-payment-infoAddPaymentInfopaymentMethod
付款嘗試失敗zonos-checkout-payment-failnone--
訂單成功完成zonos-checkout-successnoneorder_id, currency, value, contents, content_ids
訂單完成(電子商務事件)purchasePurchaseorder_id, currency, value, contents, content_ids
購物者關閉結帳zonos-checkout-closenone--

沒有 Meta 標準等效項的步驟(例如客戶資訊、配送資訊)只會觸發自訂 zonos-checkout-... 事件。您可以透過使用「事件 = zonos-checkout-customer-info」在 Meta 廣告管理程式中透過自訂受眾將這些定位。

Purchase 事件中繼資料

Purchase 標準事件遵循 Meta Pixel Purchase 事件架構。購物車項目從 GA 型 items 陣列對應到 Meta 的 contents 陣列:

欄位描述
value訂單總價值
currency三字母貨幣代碼(例如 USD
order_idZonos 訂單 ID 或結帳工作階段 ID
contents購物車項目陣列,每個都包含 idquantityitem_price
content_ids項目 ID 陣列(SKU、產品 ID 或產品名稱回退)
content_type始終為 "product"
num_items所有項目的總數量

偵錯 

若要啟用轉發指令碼的偵錯記錄,請將 zonosDebug=1 查詢參數新增到您的頁面 URL:

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

開啟您瀏覽器的開發者主控台以查看轉發握手和轉發事件的詳細日誌。這有助於驗證:

  • 轉發指令碼從結帳 iframe 接收 ping。
  • Meta Pixel 已使用正確的 Pixel ID 進行設定。
  • 事件以預期的 track / trackCustom 模式轉發給 fbq

Meta Pixel Helper Chrome 擴充功能對於即時檢查 Pixel 呼叫也很有幫助。

常見問題 

為什麼為同一步驟(例如 zonos-checkout-startInitiateCheckout)觸發兩個事件?

Meta 的標準事件可提供開箱即用的轉換最佳化、廣告報告和相似受眾。自訂 zonos-checkout-... 事件可讓您在確切的漏斗步驟上建立更細緻的自訂受眾,即使沒有 Meta 標準等效項(例如客戶資訊、配送資訊)。同時觸發兩者可讓您兩全其美,而無需損失任何訊號。

如果我同時執行 Google Analytics 和 Facebook Pixel 怎麼辦?

您不需要兩個轉發指令碼 - 相同的 analyticsRelayOnInit.js 在單次握手中處理兩個提供者。將 GA4 基礎標籤和 Meta Pixel 基礎代碼新增到您的 <head>,在 customHTML 中設定 window.Zonos.googleAnalyticIdwindow.Zonos.facebookPixelId,並在您的 Zonos 儀表板中啟用兩個提供者。每個事件會被分散到啟用的任何提供者。

如果我的父頁面沒有安裝 Meta Pixel 怎麼辦?

如果您的 customHTML 設定 window.Zonos.facebookPixelId 且轉發指令碼偵測到頁面上沒有 fbq,在握手期間它將使用您提供的 Pixel ID 為您注入 Meta Pixel 基礎代碼。您也可以自己預先安裝 Meta Pixel 基礎代碼,如果您想在結帳漏斗之外觸發 PageView 和其他事件。

測試訂單是否被追蹤?

所有事件都包含 isTestMode 欄位。當 Checkout 處於測試模式時,事件仍會轉發給 Meta,但標記為 isTestMode: true。您可以在 Meta 廣告管理程式中篩選這些事件或使用自訂轉換規則排除它們。

Conversions API (CAPI) 是否取代了這個?

否 - 這是在購物者的瀏覽器中執行的瀏覽器端 Pixel 整合。Meta Conversions API 是一個獨立的伺服器對伺服器通道,某些商家可能會與 Pixel 一起使用以實現冗餘。兩者是互補的,Zonos 的轉發只處理瀏覽器端 Pixel。