Shopify购买按钮：如何向Meta Pixel、GTM/GA4传递商品SKU等数据

问题 #

已成功在Shopify购买按钮中启用Meta（FB）像素与Google Tag Manager跟踪代码，现希望无需硬编码即可传递商品SKU、名称、价格及数量（使用集合购买按钮代码时尤为必要）。请问商品详情变量列表在哪里？

当前使用的事件回调代码如下：

"DOMEvents": {
  'click .shopify-buy__btn-wrapper .shopify-buy__btn': function (evt, target) {

    fbq('track', 'AddToCart', {
      content_name: ????,
      content_type: 'product',
      value: ????,
      quantity: ??,
      currency: 'USD'
    });

    // Push the "add_to_cart" event data to the data layer
    window.dataLayer.push({
      'event': 'add_to_cart',
      'ecommerce': {
        'add': {
          'products': [{
            'id': ?????,
            'price': ?????,
            'currencyCode': 'USD'
            
          }]
        }
      }
    });  

  }
},

尝试了以下代码但未生效：

fbq('track', 'AddToCart', {
  content_name: ui.components.product[0].selectedVariant.sku,
  content_type: 'product',
  value: ui.components.product[0].selectedVariant.price,
  currency: 'USD'
});

解决方案 #

1. 正确获取商品数据的方式 #

你之前用的ui.components.product[0]只会取集合里的第一个商品，集合购买按钮点击不同商品时会出错，且路径不符合Shopify Buy Button的组件数据结构。正确做法是在点击回调里通过this访问当前商品的Model实例（回调函数的上下文就是当前商品组件），所有商品/变体数据都存在this.model里。

2. 常用商品变量字段 #

直接在回调里打印console.log(this.model)就能查看所有可用的商品详情变量，常用字段包括：

• 商品名称：this.model.selectedVariant.product.title
• 商品SKU：this.model.selectedVariant.sku
• 商品价格（转成元单位，Shopify返回的是分）：this.model.selectedVariant.price / 100
• 购买数量：this.model.quantity
• 商品ID：this.model.selectedVariant.product.id
• 变体ID：this.model.selectedVariant.id

3. 修正后的完整代码 #

"DOMEvents": {
  'click .shopify-buy__btn-wrapper .shopify-buy__btn': function (evt, target) {
    // 获取当前商品的变体和数量数据
    const selectedVariant = this.model.selectedVariant;
    const quantity = this.model.quantity;
    const price = selectedVariant.price / 100;

    // Meta像素 AddToCart 跟踪
    fbq('track', 'AddToCart', {
      content_name: selectedVariant.product.title,
      content_type: 'product',
      content_ids: [selectedVariant.product.id.toString()],
      sku: selectedVariant.sku,
      value: price * quantity,
      quantity: quantity,
      currency: 'USD'
    });

    // GTM 数据层推送
    window.dataLayer.push({
      'event': 'add_to_cart',
      'ecommerce': {
        'add': {
          'products': [{
            'id': selectedVariant.product.id.toString(),
            'name': selectedVariant.product.title,
            'sku': selectedVariant.sku,
            'price': price,
            'quantity': quantity,
            'currencyCode': 'USD'
          }]
        }
      }
    });  
  }
},

4. 变量列表查看方法 #

如果需要更多字段，直接在回调函数里加入console.log(this.model)，点击购买按钮后打开浏览器控制台（F12），就能看到所有可用的商品、变体、数量等数据字段，按需取用即可。

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