如何在Google Tag Manager标签中正确使用Shopify Liquid变量

问题根因 #

不是单纯的双花括号语法冲突：
Liquid是Shopify的服务端模板语言，所有{{ }}包裹的Liquid变量、逻辑，只会在Shopify服务器生成页面HTML的阶段被解析替换为实际值，当页面发送到用户浏览器后，Liquid的执行流程就已经完全结束。
GTM的自定义HTML标签是页面加载到用户浏览器后，由GTM的前端脚本动态插入到页面中的，这段代码从来不会经过Shopify的Liquid渲染引擎，写在标签里的{{ product.selected_or_first_available_variant.id }}自然不可能被Liquid替换为真实ID，反而会被GTM识别为自身的变量引用，找不到对应配置的变量时就会返回undefined。

可行方案 #

方案1：通过dataLayer传递商品数据（官方推荐，稳定性最高） #

这是GTM官方推荐的电商数据传递方式，完全规避语法和执行环境的问题：

• 登录Shopify后台，进入主题代码编辑模式，找到主题全局模板theme.liquid，在GTM容器初始化代码之前插入如下代码（如果GTM代码装在<head>里，这段就放在GTM代码上方即可）：

<script>
window.dataLayer = window.dataLayer || [];
// 仅在商品详情页推送商品数据
{% if template.name == 'product' %}
dataLayer.push({
  event: 'product_view_ready',
  targito_product_id: {{ product.selected_or_first_available_variant.id | json }}
});
{% endif %}
</script>

这段代码写在Shopify模板文件中，会被Liquid正常渲染，最终输出到页面的是真实的数字ID，不会经过GTM解析。

• 进入GTM后台，新建用户定义变量：
  • 变量类型选择「数据层变量」
  • 数据层变量名称填写targito_product_id
  • 保存变量，可命名为Product ID - Targito方便识别
• 编辑之前创建的Targito事件自定义HTML标签，将原来的Liquid变量替换为刚创建的GTM变量：

Targito.push( 'event', 'product_view', { 'id' : {{Product ID - Targito}} } );

• 将标签的触发器设置为「自定义事件」，事件名填product_view_ready，保证标签触发时数据层里的商品ID已经准备好，发布容器即可正常运行。

方案2：直接抓取页面已有全局变量/元素值（无需修改主题代码） #

如果不想修改Shopify主题代码，可以直接从Shopify默认输出的全局对象、DOM元素里抓取商品ID：

• 新建GTM变量，类型选择「JavaScript变量」，全局变量路径填写ShopifyAnalytics.meta.selectedVariantId——绝大多数Shopify主题都会默认加载Shopify分析模块，这个全局变量会直接存储当前商品页默认选中的变体ID。
• 如果主题移除了默认分析模块，也可以新建「DOM元素」类型变量，选择CSS选择器匹配商品页的ID存储节点，比如Shopify默认会输出<input type="hidden" name="id" value="真实变体ID">的加购表单隐藏域，直接取这个元素的value属性即可。
• 同样将自定义HTML标签里的变量替换为新建的GTM变量，触发器设置为商品页DOM加载完成后触发即可。

注意：永远不要在GTM的自定义HTML标签里直接写Liquid语法，这类代码永远不会被Shopify的服务端渲染引擎执行，不可能拿到正确的Liquid变量值。

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