DOCS
Checkout•
首页API 参考 Checkout REST API Google Analytics 4

iframe Checkout 的 Google Analytics 4

使用基于 iframe 的旧版 Checkout 集成时，通过 GA4 跟踪完整的结账漏斗。

使用旧版 Checkout 集成（在 iglobalstores.com 上托管的 iframe）的商家现在可以跨整个结账漏斗跟踪 GA4 分析事件。Zonos Checkout 使用轻量级中继脚本自动将分析事件从 iframe 中继到父页面，因此事件在您的 GA4 属性中显示时就像来自您自己的网站一样。

本地集成不需要此指南。 如果 <zonos-checkout> 直接在您的网站上渲染（无 iframe），Zonos 会调用您页面的 window.gtag——只需在 Zonos 仪表板中的 Checkout 设置 → 跟踪 下启用 Google Analytics，并确保您通常的 GA4 基础标签已加载到页面上。下面的中继设置仅在 Checkout 在不同源的 iframe 上托管时才需要。

想要跟踪 Meta 广告转化？请参阅 Facebook Pixel 指南——它使用相同的中继脚本，可以与 GA4 并行运行。

工作原理 

因为 Zonos Checkout 在不同源的 iframe 中运行，它无法直接访问您页面的 gtag 函数。中继系统通过两步握手（第 1-2 步）解决了这个问题，然后进行事件转发（第 3 步）：

  1. Checkout 向父页面 ping——当 checkout 在 iframe 中加载时，它向父窗口发送消息，表示已准备好中继事件。
  2. 父页面应答——您页面上的中继脚本接收 ping，检测您的现有 GA4 配置，并发信号回应已准备好接收事件。
  3. 事件被转发——当购物者通过 checkout 时，每个分析事件通过 postMessage 发送到您的页面，其中中继脚本将其转发到 gtag。

所有消息都针对受信任的 Zonos 源（zonos.com 和 iglobalstores.com）通过 HTTPS 验证。

先决条件 

  • 一个 GA4 属性，带有测量 ID（格式：G-XXXXXXXXXX）。您可以在 Google Analytics 中创建一个。
  • 一个 旧版 Checkout 集成，在您的页面上的 iframe 中加载 Zonos Checkout。

设置 

步骤 1：将 GA4 标签添加到您的页面

如果您还没有在网站上安装 GA4，请将标准 Google Analytics 4 标签添加到托管 Checkout iframe 的页面的 <head>。将 G-XXXXXXXXXX 替换为您自己的测量 ID。

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 完成握手，并将所有 checkout 漏斗事件转发到您的 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 事件遵循 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 标签和中继脚本添加到您的页面。

如果我已经对 Google Analytics 使用 footerHTML 怎么办？

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 事件参考