在Shopify中用jQuery推送商品点击dataLayer事件的问题

现有代码的核心问题 #

1. Liquid变量上下文错误：如果这段代码在商品列表页（如集合页），直接用{{ product.id }}会取当前模板上下文的商品，而非点击的目标商品——因为Liquid是服务器端渲染，每个商品链接对应的是不同的product实例，无法通过全局模板变量获取点击项的数据。
2. 语法错误：index: ,和item_category: 属于未赋值的语法错误，会直接导致JS代码报错中断执行。
3. 事件绑定局限性：直接用$('a[href*="/products/"]').click()绑定的事件，无法作用于页面动态加载的商品（如无限滚动加载的内容）。

优化实现步骤 #

1. 渲染商品链接时嵌入数据到DOM

在商品循环的Liquid模板中，给每个商品链接添加data-*属性，存储需要的商品参数：

{% for product in collection.products %}
  <a href="{{ product.url }}" class="product-link"
     data-product-id="{{ product.id }}"
     data-product-title="{{ product.title | remove: "'" | remove: '"' }}"
     data-product-vendor="{{ product.vendor }}"
     data-product-price="{{ product.selected_variant.price | money_without_currency }}"
     data-product-category="{{ product.collections.first.title }}">
    <!-- 商品展示内容（图片、标题等） -->
  </a>
{% endfor %}

注：item_category可根据实际业务调整，比如取商品的自定义分类字段、主分类等；如果是首页推荐商品，可对应修改item_list_id和item_list_name。

2. 用事件委托实现点击事件监听

使用事件委托绑定点击事件，兼容动态加载的商品，同时从DOM的data属性中读取商品参数：

// 确保dataLayer存在
window.dataLayer = window.dataLayer || [];

// 事件委托绑定，支持动态加载的商品
$(document).on('click', '.product-link', function() {
  // 清除之前的ecommerce对象（GA推荐的重置方式）
  window.dataLayer.push({ ecommerce: null });

  const $link = $(this);
  // 计算商品在列表中的索引（从1开始符合GA规范）
  const itemIndex = $link.closest('.product-item').index() + 1;

  // 推送select_item事件到dataLayer
  window.dataLayer.push({
    event: "select_item",
    ecommerce: {
      items: [
        {
          item_id: $link.data('product-id'),
          item_name: $link.data('product-title'),
          index: itemIndex,
          item_brand: $link.data('product-vendor'),
          item_category: $link.data('product-category'),
          item_list_id: 'collection-{{ collection.handle }}', // 集合页用handle作为列表ID
          item_list_name: '{{ collection.title }}', // 集合名称作为列表名称
          price: $link.data('product-price'),
          quantity: 1
        }
      ]
    }
  });
});

关键优化点说明 #

• 精准获取商品数据：通过DOM的data属性存储每个商品的专属参数，点击时直接读取，避免Liquid上下文混淆。
• 兼容动态内容：事件委托绑定在document上，后续动态加载的商品链接也能触发事件。
• 符合GA规范：补全index、item_list_id等必填/推荐字段，确保事件能被Google Analytics正确解析。

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