Convbox for Headless Ecommerce设置指南
Headless Ecommerce的优势
Headless允许商家在SSR代码框架基础上方便地定制前端页面,仅使用Shopify作为后端服务。其优势包括:
用户界面的个性化。**商家可以完全掌控店铺页面创意设计,并可以各种平台(如网站、应用程序和物联网设备)上灵活地交付内容。
提高网站性能。**通常Headless的方案较Shopify原生平台的速度可以快数倍。
可以更好地进行SEO的个性化处理。
Headless Eommerce对于用户事件回传和营销效果分析的痛点
由于Headless采用的是个性化和灵活性最大的技术方案,Shopify官方的事件追踪不能提供很好的个性化支持。很多开发者缺乏对营销技术Martech足够的处理经验,事件追踪很容易出现问题,导致无法将用户的网站行为准确、无遗漏地传输给Meta等媒体,从而 导致广告效果下降;同时网站对用户行为的追踪也无法准确进行,导致营销效果分析的混乱。 而大部分Shopify应用市场上的用户行为跟踪的产品也并没有针对Headless做兼容处理。
针对Headless电商, Convbox提供了一套开箱即用的解决方案 ,使您几乎不需要代码开发工作量,即可快速部署一套用户事件回传和用户行为跟踪分析的 最佳解决实践 。Convbox方案的原理,请参照 这篇官网帮助 。
安装设置Convbox提供的Shopify Headless解决方案
Step1: 安装Convbox Tracking(Omnitrack)产品App应用
通过访问Shopify应用市场,安装我们在应用市场的ConvboxTrackin产品公开应用 Convbox Tracking(Omnitrack) App 。
Convbox Analysis归因产品目前是私有应用形式存在,需要申请。请联系您的Convbox客户经理协助完成试用的申请和订阅。
完成Convbox的基础设置,详见 Convbox安装指南 。请注意,在 步骤 12:停用Facebook Pixel 中,需要将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的跟踪代码,如下图中有两段代码需要删除。

Step4: 检查并删除在 Facebook Events Manager 中设置的事件
有可能在Facebook Events Manager中,通过Facebook的 “Event Setup” 功能设置过事件,这会导致这种事件也会 重复发送网站事件给Facebook 。因此需要检查是否存在该类事件,如果存在则需要删除。
检查与操作步骤:
访问Facebook Events Manager,找到您网站安装的Pixel,点击 Settings ,然后找到 Open Event Setup Tool 按钮,点击该按钮。

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

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

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

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

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

恭喜!
至此Convbox for Headless Ecommerce已全部设置完成!
更新于: 12/08/2024
谢谢!