DOCS
Checkout•
首页API 参考 Checkout REST API Facebook像素

iframe结账的Facebook像素

使用基于iframe的旧版Checkout集成时，使用Meta（Facebook）像素跟踪整个结账漏斗。

使用旧版Checkout集成（在iglobalstores.com上托管的iframe）的商家可以跟踪整个结账漏斗中的Meta像素事件。Zonos Checkout自动从iframe中继推送分析事件到父页面，使用与Google Analytics 4相同的轻量级中继脚本，因此事件在您的Meta事件管理器中显示为来自您自己网站的事件。

对于每个漏斗步骤，会发送两个事件：

  • 一个名为zonos-checkout-...的自定义事件（通过fbq('trackCustom', ...)），用于完整漏斗自定义受众。
  • 匹配的Meta标准事件（通过fbq('track', ...)），用于内置优化，例如InitiateCheckout、AddPaymentInfo和Purchase。

原生集成不需要本指南。 如果<zonos-checkout>直接在您的网站上呈现（没有iframe），Zonos将调用您页面的window.fbq — 只需在Zonos仪表板的Checkout设置 → 跟踪下启用Facebook像素，并确保您通常的Meta像素基本代码已加载到页面上。下面的中继设置仅在Checkout托管在不同来源的iframe中时才需要。

工作原理 

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

  1. Checkout向父级发送ping — 当checkout在iframe内加载时，它向父窗口发送消息，指示它已准备好中继事件，包括像素ID。
  2. 父级应答 — 您页面上的中继脚本接收ping，检测（或注入）您的Meta像素基本代码，并发出信号，表示已准备好接收事件。
  3. 事件被转发 — 当购物者在结账流程中推进时，每个分析事件通过postMessage发送到您的页面，其中中继脚本将其转发给fbq，使用适当的track / trackCustom模式。

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

先决条件 

  • 一个Meta像素，包含像素ID（一个数字字符串，通常为15-16位数字）。您可以在Meta事件管理器中创建一个。
  • 一个旧版Checkout集成，在您的页面上的iframe中加载Zonos Checkout。
  • Facebook像素已启用在您的Zonos Checkout设置中（在Zonos仪表板中，在Checkout设置 -> 跟踪下）。

设置 

步骤1：将Meta像素基本代码添加到您的页面

如果您还没有在您的网站上安装Meta像素，请将标准像素基本代码添加到托管Checkout iframe的页面的<head>中。将YOUR_PIXEL_ID替换为您自己的数字像素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像素（例如，通过Google标签管理器、Shopify的原生集成或直接代码片段），您可以跳过此步骤。中继脚本将使用您现有的fbq函数。

您可以在Meta事件管理器中您的像素的设置 -> 继续像素设置 -> 手动安装代码下找到此代码片段。

步骤2：将您的像素ID传递给Zonos Checkout

通过在Checkout的customHTML内设置window.Zonos.facebookPixelId来告诉Zonos Checkout使用哪个像素ID。Zonos仪表板在Checkout设置下公开customHTML编辑器 — 添加一个这样的<script>标签：

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

此值在中继握手期间发送到父级。如果您的父页面还没有加载fbq，中继脚本将使用您提供的此ID为您注入Meta像素基本代码。

步骤3：添加Zonos分析中继脚本

将以下脚本标签添加到加载Checkout iframe的同一页面，在Meta像素基本代码之后。这是与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像素，并且customHTML设置了像素ID，中继将自动将所有结账漏斗事件转发给Meta。

Meta像素事件参考 

对于漏斗中的每一步，Zonos Checkout会触发一个自定义事件（以便您可以构建精确的受众）和匹配的Meta标准事件（以便它显示在Meta的优化和转换报告中）。所有事件都包括一个isTestMode标志和checkoutSessionId。

触发器↕自定义事件 (fbq('trackCustom', ...))↕标准事件 (fbq('track', ...))↕其他元数据↕
打开结账zonos-checkout-startInitiateCheckout--
购物者输入客户信息zonos-checkout-customer-info无--
购物者选择运送方式zonos-checkout-shipping-info无serviceLevelId
购物者输入支付详情zonos-checkout-payment-infoAddPaymentInfopaymentMethod
支付尝试失败zonos-checkout-payment-fail无--
订单成功完成zonos-checkout-success无order_id, currency, value, contents, content_ids
订单完成（电子商务事件）purchasePurchaseorder_id, currency, value, contents, content_ids
购物者关闭结账zonos-checkout-close无--

没有Meta标准等效项的步骤（例如客户信息、运送信息）仅触发自定义zonos-checkout-...事件。您可以通过在Meta广告管理器中使用"Event = zonos-checkout-customer-info"等方式在自定义受众中定位这些步骤。

Purchase事件元数据

Purchase标准事件遵循Meta像素Purchase事件架构。购物车项目从GA样式的items数组映射到Meta的contents数组：

字段↕描述↕
value总订单值
currency三字母货币代码（例如，USD）
order_idZonos订单ID或结账会话ID
contents购物车项目数组，每个项目具有id、quantity和item_price
content_ids项目ID数组（SKU、产品ID或产品名称回退）
content_type始终为"product"
num_items所有项目中的总数量

调试 

要为中继脚本启用调试日志记录，请将zonosDebug=1查询参数添加到您的页面URL：

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

打开您的浏览器开发者控制台，查看中继握手和转发事件的详细日志。这对于验证以下内容很有用：

  • 中继脚本接收来自结账iframe的ping。
  • Meta像素配置了正确的像素ID。
  • 事件通过预期的track / trackCustom模式转发给fbq。

Meta像素助手Chrome扩展也有助于实时检查像素调用。

常见问题 

为什么会为同一步骤触发两个事件（例如zonos-checkout-start和InitiateCheckout）？

Meta的标准事件默认即可支持转换优化、广告报告和类似受众定向。自定义zonos-checkout-...事件让您构建更精细的自定义受众，针对确切的漏斗步骤，即使没有Meta标准等效项（例如客户信息、运送信息）。同时触发这两个事件可以让您两全其美，而不会失去任何信号。

如果我同时运行Google Analytics和Facebook Pixel怎么办？

您不需要两个中继脚本 — 同一个analyticsRelayOnInit.js在单个握手中处理两个提供商。将GA4基本标签和Meta像素基本代码添加到您的<head>中，在customHTML中同时设置window.Zonos.googleAnalyticId和window.Zonos.facebookPixelId，并在您的Zonos仪表板中启用两个提供商。每个事件都会发送给启用的任何提供商。

如果我的父页面没有安装Meta像素怎么办？

如果您的customHTML设置了window.Zonos.facebookPixelId，并且中继脚本在页面上检测不到fbq，它将使用您提供的像素ID在握手期间为您注入Meta像素基本代码。您也可以自己预安装Meta像素基本代码，如果您想在结账漏斗之外触发PageView和其他事件。

是否跟踪测试订单？

所有事件都包括一个isTestMode字段。当Checkout处于测试模式时，事件仍会中继到Meta，但标记为isTestMode: true。您可以在Meta广告管理器中过滤这些，或使用自定义转换规则排除它们。

Conversions API（CAPI）是否替代这个？

不——这是在您购物者浏览器中运行的浏览器端像素集成。Meta Conversions API是一个单独的服务器到服务器通道，一些商家将其与像素一起使用以提高冗余性。两者是互补的，Zonos的中继仅处理浏览器端像素。

这个页面有帮助吗？

获取支持·法律文件·© 2026 Zonos
在此页面：
  • iframe结账的Facebook像素
  • Meta像素事件参考