DOCS
Checkout•
首頁API 參考資料 Checkout REST API Google Analytics 4

適用於 iframe Checkout 的 Google Analytics 4

在使用以 iframe 為基礎的舊版 Checkout 整合時，使用 GA4 追蹤完整結帳漏斗。

使用舊版 Checkout 整合的商家（iframe 託管於 iglobalstores.com）現在可以在完整結帳漏斗中追蹤 GA4 分析事件。Zonos Checkout 會自動使用輕量級中繼指令碼將分析事件從 iframe 中繼到父頁面，因此事件會在您的 GA4 資源中顯示為源自您自己網站的事件。

原生整合不需要本指南。 如果 <zonos-checkout> 直接在您的網站上呈現（無 iframe），Zonos 會呼叫您頁面的 window.gtag，只需在 Zonos 儀表板的 Checkout 設定 → 追蹤 中啟用 Google Analytics，並確保您通常的 GA4 基礎標籤已載入頁面上。下方的中繼設定僅在 Checkout 託管於不同來源上的 iframe 中時才需要。

想要改為追蹤 Meta Ads 轉換？請參閱 Facebook Pixel 指南 -- 它使用相同的中繼指令碼，並可與 GA4 並行執行。

運作方式 

因為 Zonos Checkout 在不同來源上的 iframe 內執行，它無法直接存取您頁面的 gtag 函式。中繼系統透過兩步驟握手（步驟 1-2）解決此問題，然後進行事件轉發（步驟 3）：

  1. Checkout ping 父級 -- 當 checkout 在 iframe 內載入時，它會傳送訊息到父視窗，指示它已準備好中繼事件。
  2. 父級確認 -- 您頁面上的中繼指令碼收到 ping，偵測您現有的 GA4 設定，並信號回它已準備好接收事件。
  3. 事件被轉發 -- 當購物者在結帳中進行時，每個分析事件都會透過 postMessage 傳送到您的頁面，中繼指令碼將其轉發到 gtag。

所有訊息都針對受信任的 Zonos 來源（zonos.com 和 iglobalstores.com）進行驗證，僅透過 HTTPS。

先決條件 

  • 帶有測量 ID（格式：G-XXXXXXXXXX）的 GA4 資源。您可以在 Google Analytics 中建立一個。
  • 在您的頁面上載入 Zonos Checkout 的 iframe 的 舊版 Checkout 整合。

設定 

步驟 1：將 GA4 標籤新增到您的頁面

如果您的網站上還沒有安裝 GA4，請將標準 Google Analytics 4 標籤新增到託管 Checkout iframe 的頁面的 <head> 中。使用您自己的測量 ID 替換 G-XXXXXXXXXX。

1<!-- Google tag (gtag.js) -->
2 
3<script
4 async
5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
6></script>
7 
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>

注意： 如果您的網站已安裝 GA4 標籤（例如，透過 Google Tag Manager 或直接程式碼片段），您可以跳過此步驟。中繼指令碼將使用您現有的 gtag 函式。

您可以在 GA4 資源中找到此程式碼片段，位於 管理 -> 資料串流 -> 選擇您的串流 -> 檢視標籤指令 -> 手動安裝。

步驟 2：將您的測量 ID 傳遞給 Zonos Checkout

透過在 Checkout 的 customHTML 內設定 window.Zonos.googleAnalyticId 來告訴 Zonos Checkout 要使用哪個 GA4 測量 ID。Zonos 儀表板在 Checkout 設定中公開 customHTML 編輯器 -- 新增一個像這樣的 <script> 標籤：

1<script>
2 window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';
3</script>

此值在中繼握手期間傳送給父級。如果您的父頁面還沒有載入 gtag，中繼指令碼將使用此 ID 為您注入 GA4 基礎標籤。

步驟 3：新增 Zonos 分析中繼指令碼

將以下指令碼標籤新增到同一頁面，在 GA4 標籤之後。此指令碼監聽來自 Zonos Checkout iframe 的分析事件，並將其轉發到您的 gtag。

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 <!-- Google tag (gtag.js) -->
5 
6 <script
7 async
8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
9 ></script>
10 
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>
19 
20 <!-- Zonos analytics relay for iframe checkout -->
21 
22 <script
23 async
24 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"
25 ></script>
26</head>

就這樣。一旦兩個指令碼都在您的頁面上，中繼指令碼會自動完成與 checkout iframe 的握手，並將所有結帳漏斗事件轉發到您的 GA4 資源。

GA4 事件參考 

Zonos Checkout 透過中繼發出以下事件。所有事件都包括 isTestMode 旗標和 checkoutSessionId。

事件↕觸發條件↕額外中繼資料↕
zonos-checkout-startCheckout 開啟--
zonos-checkout-customer-info購物者輸入客戶資訊--
zonos-checkout-shipping-info購物者選擇運送方式serviceLevelId
zonos-checkout-payment-info購物者輸入付款詳細資訊paymentMethod
zonos-checkout-payment-fail付款嘗試失敗--
zonos-checkout-success訂單成功完成transaction_id, currency, value, items
zonos-checkout-close購物者關閉 checkout--
purchase訂單完成（GA4 標準電子商務事件）transaction_id, currency, value, items

purchase 事件的中繼資料

purchase 事件遵循 GA4 電子商務 purchase 事件 結構：

欄位↕說明↕
transaction_idZonos 訂單 ID 或 checkout 工作階段 ID
currency三字母貨幣代碼（例如 USD）
value訂單總金額
items購物車項目陣列，每個項目包含 item_id、item_name、price 和 quantity

偵錯 

若要啟用中繼指令碼的偵錯日誌，請將 zonosDebug=1 查詢參數新增到您的頁面 URL：

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

開啟您的瀏覽器開發人員主控台以查看中繼握手和轉發事件的詳細日誌。這對驗證以下內容很有用：

  • 中繼指令碼接收來自 checkout iframe 的 ping。
  • GA4 設定了正確的測量 ID。
  • 事件被轉發到 gtag。

常見問題 

我需要修改我的 createTempCart API 呼叫嗎？

否。中繼系統獨立於 createTempCart API 工作。您只需要將 GA4 標籤和中繼指令碼新增到您的頁面。

如果我已經使用 footerHTML 來追蹤 Google Analytics，該怎麼辦？

createTempCart API 中的 footerHTML 參數會在 checkout iframe 內注入指令碼，僅限於追蹤 iframe 來源內的頁面層級事件。建議使用中繼方法，因為它會將事件傳送到您自己網域上的 GA4 資源，讓您在單一資源中完整查看漏斗。

設定中繼後，您可以安全地從 footerHTML 中移除任何 GA4 指令碼。

這是否適用於 Google Analytics 的 GA4 偵錯模式？

是的。您可以使用 zonosDebug=1 在瀏覽器開發人員主控台中啟用中繼指令碼日誌，並在 Google Analytics 中使用 GA4 DebugView 即時驗證事件。

測試訂單會被追蹤嗎？

所有事件都包括 isTestMode 欄位。當 Checkout 處於測試模式時，事件仍會傳送到 GA4，但標記為 isTestMode: true。如果需要，您可以在 GA4 中使用自訂維度篩選這些事件。

這個頁面有幫助嗎？

獲取支持·法律文件·© 2026 Zonos
在此頁面：
  • 適用於 iframe Checkout 的 Google Analytics 4
  • GA4 事件參考