Shopify中document.referrer变量传递至GTM失败求助

你遇到的核心问题是Liquid是服务器端渲染语言，而document.referrer是客户端浏览器提供的动态信息——你用{% capture ref %}捕获的是服务器生成的静态HTML（也就是<div class="referrer">Referrer: </div>），后面的JS是页面加载完成后才在客户端追加referrer内容，这时候Liquid已经完成了渲染，{{ ref }}里根本不会包含JS动态添加的内容，所以dataLayer里的referrer字段自然没有正确值。

下面是两种直接可行的解决方案：

方案一：直接在dataLayer中使用JS获取referrer #

这是最简单的方式，不需要绕Liquid，直接在推送dataLayer时调用document.referrer：

<!-- 保留页面展示referrer的逻辑（如果需要） -->
<script type="text/javascript">
 $(document).ready(function () {
 var content = document.referrer;
 $(".referrer").append(content);
 });
</script>
<div class="referrer">Referrer: </div>

<!-- 修正后的GTM推送代码 -->
<script type="text/javascript">
 dataLayer.push({
 'userEmail' : '{{ customer.email }}',
 'productCategory' : '{{ collection.title }}',
 'productName' : '{{ product.title }}',
 'price' : '{{ sca_price | money }}',
 'originalPrice' : '{{ sca_price | money }}',
 'cartItems' : '{{ cart.item_count }}',
 'currency' : '{{ shop.currency }}',
 'referrer' : document.referrer, // 直接用JS获取浏览器的referrer
 'productRating' : '',
 'reviewCount' : null,
 'event' : null
 });
</script>

方案二：先存储referrer再推送（适合有额外逻辑的场景） #

如果需要对referrer做预处理（比如空值时标记为"Direct"），可以先把值存到JS变量里再使用：

<script type="text/javascript">
 $(document).ready(function () {
 // 获取并处理referrer
 var userReferrer = document.referrer || 'Direct';
 // 页面展示
 $(".referrer").append(userReferrer);
 // 推送至GTM
 dataLayer.push({
 'userEmail' : '{{ customer.email }}',
 'productCategory' : '{{ collection.title }}',
 'productName' : '{{ product.title }}',
 'price' : '{{ sca_price | money }}',
 'originalPrice' : '{{ sca_price | money }}',
 'cartItems' : '{{ cart.item_count }}',
 'currency' : '{{ shop.currency }}',
 'referrer' : userReferrer,
 'productRating' : '',
 'reviewCount' : null,
 'event' : null
 });
 });
</script>
<div class="referrer">Referrer: </div>

重要提醒 #

你原代码里的单引号是中文格式的‘’，要改成英文单引号''，否则会触发JS语法错误！

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