> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.rto.ai/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Convbox for Headless Ecommerce设置指南

# Headless Ecommerce的优势
Headless允许商家在SSR代码框架基础上方便地定制前端页面，仅使用Shopify作为后端服务。其优势包括：
1. 用户界面的个性化。**商家可以完全掌控店铺页面创意设计，并可以各种平台（如网站、应用程序和物联网设备）上灵活地交付内容。
2. 提高网站性能。**通常Headless的方案较Shopify原生平台的速度可以快数倍。
3. 可以更好地进行SEO的个性化处理。

# Headless Eommerce对于用户事件回传和营销效果分析的痛点
由于Headless采用的是个性化和灵活性最大的技术方案，Shopify官方的事件追踪不能提供很好的个性化支持。很多开发者缺乏对营销技术Martech足够的处理经验，事件追踪很容易出现问题，导致无法将用户的网站行为准确、无遗漏地传输给Meta等媒体，从而 *导致广告效果下降；同时网站对用户行为的追踪也无法准确进行，导致营销效果分析的混乱。* 而大部分Shopify应用市场上的用户行为跟踪的产品也并没有针对Headless做兼容处理。
针对Headless电商， ${color}[#5ac214](**Convbox提供了一套开箱即用的解决方案**) ，使您几乎不需要代码开发工作量，即可快速部署一套用户事件回传和用户行为跟踪分析的 ${color}[#5ac214](**最佳解决实践**) 。Convbox方案的原理，请参照 [这篇官网帮助](/zh/article/how-convboxtracking-works-with-a-headless-shopify-z9u6n9/) 。

# 安装设置Convbox提供的Shopify Headless解决方案
### Step1: 安装Convbox Tracking产品App应用
1. 通过访问Shopify应用市场，安装我们在应用市场的ConvboxTracking产品公开应用 [Convbox Tracking App](https://apps.shopify.com/convboxtracking) 。
2. Convbox Analysis归因产品目前是私有应用形式存在，需要申请。请联系您的Convbox客户经理协助完成试用的申请和订阅。
3. 完成Convbox的基础设置，详见 [Convbox安装指南](https://help.rto.ai/zh/article/convbox-tracking-dyhc2y/) 。请注意，在 **步骤 6：安装Pixel**完成后，您在Pixels页面，找到Pixel。当您鼠标移动到Pixel ID上时，右侧会出现一个编辑按钮，点击进入编辑页面需要将Pixel的状态设置为 **“Offline”** 状态。

### Step2: 在您的前端JS中嵌入Convbox的JS-SDK for Headless Ecommerce
根据Convbox提供Headless通用解决方案，联系您的技术人员将SDK代码嵌入网站。
提供Gmail邮箱给Convbox客户经理，以便查看headless通用解决方案：
https://docs.google.com/document/d/1iwBaY69LSIFfqA6Too3q4NdSFHP-0xAC2Yi77-qOYI0

### Step3: 清除之前使用其他Tracking App的残余代码
完成以上步骤后，您仍然需要删除安装Convbox之前使用的其他Tracking App的残余代码，以 **防止多个app重复发送网站事件给营销媒体** 。
例如，对于Facebook的跟踪代码，如下图中有两段代码需要删除。

![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_ytrrfe.png)

### Step4: 检查并删除在 Facebook Events Manager 中设置的事件

有可能在Facebook Events Manager中，通过Facebook的 “Event Setup” 功能设置过事件，这会导致这种事件也会 __重复发送网站事件给Facebook__ 。因此需要检查是否存在该类事件，如果存在则需要删除。

**检查与操作步骤：**

1.  访问Facebook Events Manager，找到您网站安装的Pixel，点击 **Settings** ，然后找到 **Open Event Setup Tool** 按钮，点击该按钮。

![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_1ddk67l.png)


2. 在弹窗中，输入您网站的地址，然后点击 **Open Website** 按钮。


![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_1us250g.png)

3. 打开网站后，通常在页面左上角会出现 **Meta Event Setup Tool** 弹窗中，您可以浏览网站的每个页面，查看是否会显示事件，如果有，则需要删除。
如下图，在商品详情页面，看到有一个 **Add to Cart** 事件，那么，需要点击 删除 按钮。


![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_bbuxz.png)

4. 点击 **删除** 按钮后，如果其他页面都没有发现事件，那么您可以点击 **Finish setup** 按钮，同时完成后续提示中的操作，确认事件删除成功。

![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_1nscg3j.png)

### Step5: 启用Convbox的Facebook Pixel，收集用户事件并回传至Facebook 
完成从上述所有设置步骤后，你需要在Convbox中启用Facebook Pixel。
1. 进入Convbox，在Pixels页面，找到Pixel。当您鼠标移动到Pixel ID上时，右侧会出现一个编辑按钮，点击进入编辑页面

![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_yfkfsp.png)

2. 在编辑页面中，点击Go Live按钮，在二次确认的弹窗中点击“Yes,Go Live”后，就可以启用Convbox的收集用户事件并回传至Facebook的功能。

![](https://storage.crisp.chat/users/helpdesk/website/bf925fddbcd2e800/image_ie3zbb.png)

### 恭喜！
至此Convbox for Headless Ecommerce已全部设置完成！