Shopify 分析与像素

自定义像素里读 document.cookie 报错该怎么改

现象#

自定义像素执行到 document.cookie 直接抛 ReferenceError: document is not defined,整个像素不工作;同一段代码放到主题里却正常。

原因#

  • 自定义像素运行在独立沙箱帧里,只有自己的 document,读不到店铺主文档与主题写入的 cookie
  • App Pixel 的 strict 沙箱连 document 都没有,只能用 Standard API 访问
  • 沙箱无法直接读 _ga、_fbp 这类主域 cookie,必须走异步的 browser.cookie 接口
  • 取当前页地址也不能用 window.location,只能读事件自带的 context

处理步骤#

  1. cookie 改用 browser.cookie.get('_fbp') 读取
  2. 写 cookie 用 browser.cookie.set('name', value)
  3. 取页面地址改为 event.context.document.location.href
  4. 沙箱里的 dataLayer 是空对象,改用 Shopify.analytics.publish 传值
  5. 在 Pixel Helper 里确认回调为绿点,控制台不再出现 ReferenceError

验收标准#

Pixel Helper 中回调不再报错,网络面板里发往第三方的请求带上取到的 _fbp 值。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。