如何用jQuery循环DOM元素并传递至GA4的dataLayer数组？

先明确表格结构示例（可根据你的实际DOM调整） #

<table id="order-table">
  <tbody>
    <!-- 每行对应一个商品 -->
    <tr class="product-row">
      <td class="prod-name">纯棉T恤</td>
      <td class="prod-sku">TS001</td>
      <td class="prod-price">79.9</td>
      <td class="prod-qty">1</td>
    </tr>
    <tr class="product-row">
      <td class="prod-name">休闲牛仔裤</td>
      <td class="prod-sku">PN003</td>
      <td class="prod-price">159.9</td>
      <td class="prod-qty">2</td>
    </tr>
  </tbody>
</table>

核心jQuery代码实现 #

$(function() {
  // 初始化空的items数组
  var gaItems = [];

  // 遍历所有商品行
  $('.product-row').each(function(index, row) {
    // 从当前行提取数据，注意匹配你的DOM类名
    var singleItem = {
      item_name: $(row).find('.prod-name').text().trim(),
      item_id: $(row).find('.prod-sku').text().trim(),
      price: parseFloat($(row).find('.prod-price').text().trim()),
      quantity: parseInt($(row).find('.prod-qty').text().trim())
    };
    // 将单个商品对象推入数组
    gaItems.push(singleItem);
  });

  // 组装GA4事件并推入dataLayer
  dataLayer.push({
    event: 'purchase', // 按需替换成你需要的事件名，比如view_item_list
    ecommerce: {
      transaction_id: 'ORD20240501001', // 实际订单ID
      value: 399.7, // 订单总金额，也可遍历计算
      currency: 'CNY',
      items: gaItems // 这里传入多行数据组成的数组
    }
  });
});

关键注意事项 #

• 选择器匹配：确保.product-row、.prod-name等选择器和你的实际DOM类名完全一致，这是之前$.each无效的常见原因
• 数据类型转换：GA4要求价格为浮点数、数量为整数，必须用parseFloat/parseInt处理，避免传入字符串
• 自动计算总金额：如果不想手动写总金额，可以在遍历的时候累加：

  var total = 0;
  $('.product-row').each(function(index, row) {
    var price = parseFloat($(row).find('.prod-price').text().trim());
    var qty = parseInt($(row).find('.prod-qty').text().trim());
    total += price * qty;
    // ... 其他代码
  });
  

• 验证数据：可以在each里加console.log(singleItem)，检查是否正确提取到了每行的数据

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