> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 配置 Shopify web pixels

> 使用 Web Pixels 为购后 upsell 设置转化追踪

[Shopify Web Pixels](https://help.shopify.com/en/manual/promoting-marketing/pixels) 是 Shopify 用于追踪购买数据（如转化率）的方案。你主要通过两种方式与它们交互：

* App Web Pixels
* Custom Web Pixels

<div id="app-web-pixels">
  # App Web Pixels
</div>

一些应用像素（例如 Omega Facebook Pixel）直接与 Shopify Web Pixels 集成。这些应用无需额外设置即可与 Aftersell 配合工作。

<div id="custom-web-pixels">
  # Custom Web Pixels
</div>

如果在 Shopify 应用市场找不到满足你需求的应用像素，自定义像素可以提供定制化方案。下面详细介绍如何将现有的订单状态页追踪脚本改为使用自定义像素。在继续之前，请注意[自定义像素的潜在风险](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks)。

如果你使用的是 Google Tag Manager，Shopify 提供了[完成此迁移的实用文档](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial)。

创建用于转化追踪的自定义像素有 3 个核心步骤。

1. 准备第三方 JavaScript SDK
2. 使用 web pixels 设置转化追踪
3. 连接你的自定义像素

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. 准备第三方 JavaScript SDK
</div>

你需要移除所提供像素代码中的所有 HTML。任何通过 HTML `<script>` 标签加载的 JavaScript，都应改为通过纯 JavaScript 的方式加载。

此过程的更多细节见[这里](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk)。

以 Google Tag Manager 为例

*原始像素代码：*

```
<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>
```

*移除 HTML 并改写 `<script>` 标签后：*

```
const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');
```

请注意，Google 的像素 SDK 不会自动从 Shopify 自定义像素传输数据。要传输数据，你需要订阅事件。

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. 使用 web pixels 设置转化追踪
</div>

要使用自定义像素追踪转化，请订阅 Shopify 提供的 `checkout_completed` 事件。此事件会在购后页面触发（如果向客户展示了购后页面），否则在感谢页触发。无论哪种情况，此事件都只触发一次，因此无需额外逻辑来避免重复统计购买。

```
analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});
```

使用此参考文档查看你可以从 `event` 中获取哪些数据点。

[Shopify checkout\_completed 事件](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

自定义 Meta 像素示例

*结账完成时触发的追踪代码：*

```
!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');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. 连接你的自定义像素
</div>

在添加自定义像素之前，请移除或修改任何现有像素，以确保客户事件不会被重复统计。应从现有像素代码所在的任何位置手动移除，例如 `theme.liquid`、`checkout.liquid`（仅限 Plus 商家）以及结账设置中的 Additional scripts。

完成后，按照以下步骤将自定义像素连接到你的商店。

1. 前往 Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. 为你的自定义像素输入一个名称。
2. 将你的自定义像素代码粘贴到"Code"部分。
3. 确保客户隐私设置已正确配置。
4. 在你的自定义像素上点击"Save"。
5. 点击"Connect"让你的自定义像素上线！