如何正确存储落地URL的transaction_id并在Shopify感谢页转化像素中调用

问题根因 #

• 你写在像素标签里的{{ transaction_id }}是Shopify服务端渲染的Liquid模板变量，Shopify原生并未内置这个全局对象，服务端渲染页面时这个位置会直接输出空字符串
• 你存在浏览器localStorage里的transaction_id是前端环境下存储的值，服务端渲染HTML时无法跨环境读取，靠原来的写法永远不可能把本地存储的值传到服务端拼好的像素链接里，本质是前后端运行环境的隔离问题

具体解决步骤 #

第一步：优化落地页的参数存储逻辑 #

在原有代码基础上小范围调整，避免把空值写入存储覆盖有效数据：

var urlString = window.location.href;
var url = new URL(urlString);
var source = url.searchParams.get("utm_source");
var transaction = url.searchParams.get("transaction_id");
// 只有来源匹配、且transaction_id有效时才写入存储
if (source === "publisher" && transaction) {
  localStorage.setItem('utm_source', source);
  localStorage.setItem('transaction_id', transaction);
  // 同时写入sessionStorage做兜底，避免跨页面跳转时存储丢失
  sessionStorage.setItem('transaction_id', transaction);
}

第二步：重构感谢页的转化像素实现 #

不要把transaction_id的占位写在服务端渲染的img标签里，改成「先渲染带所有Shopify动态参数的基础像素标签，再通过前端JS从本地存储读取transaction_id，动态拼接到像素链接上」，适配前后端的运行逻辑。
把Shopify附加脚本里原来的像素代码替换成下面的内容：

<!-- 基础转化像素，保留原有所有服务端动态参数，移除原来的transaction_id Liquid占位 -->
<img id="aff_pixel" src="https://publisher.com/aff_l?offer_id=1234&currency={{ shop.currency }}&amount={{ line_item.final_line_price | money_without_currency | remove: ',' }}&adv_sub={{ order.order_number }}&adv_sub2={{ customer.orders_count }}&adv_sub3={{ line_item.title }}&adv_sub4={{ line_item.sku }}&adv_sub5={{ line_item.vendor }}" width="1" height="1" style="position:fixed; left:-100px" />

<script>
// 页面加载完成后读取本地存储的transaction_id，补全像素参数
window.addEventListener('load', function() {
  // 优先从localStorage读取，读取失败则从sessionStorage兜底
  let transactionId = localStorage.getItem('transaction_id') || sessionStorage.getItem('transaction_id');
  if (transactionId) {
    const pixelElement = document.getElementById('aff_pixel');
    // 对参数做编码避免特殊字符影响链接解析
    pixelElement.src = pixelElement.src + '&transaction_id=' + encodeURIComponent(transactionId);
  }
});
</script>

避坑提示 #

• 注意同源存储的限制：如果落地页和Shopify店铺不是同一个根域名，需要调整localStorage的作用域配置，否则会因为浏览器同源策略出现存储读不到的问题
• 不要尝试用Liquid变量读取前端存储的值：Liquid是服务端运行的模板代码，执行时机远早于前端JS运行，所有依赖浏览器本地存储的参数，都必须在前端JS执行阶段动态拼接，不能靠服务端提前渲染
• 这套实现不会影响原有参数的上报逻辑，就算transaction_id读取失败，像素也会正常加载上报，不会破坏已有的转化追踪流程

内容的提问来源于stack exchange，提问作者ryanster