如何将页面多商品数据以对象数组形式推送至Google Data Layer？

页面上有多个商品，每个商品包含名称、ID、价格等信息，需要在页面加载时将这些数据以每个商品对应一个独立对象的数组形式推送到Google Data Layer。当前脚本仅生成了一个包含所有商品字段拼接内容的单对象数组，无法满足需求。

原代码 #

JavaScript 代码 #

$(function () {

        var Container = (".product");

        var itemName = $($(Container)).find(".item-name").text();

        var itemId = $($(Container)).find(".item-id").text();

        var itemPrice = $($(Container)).find(".item-price").text();

        var itemBrand = $($(Container)).find(".item-brand").text();

        var itemCategory = $($(Container)).find(".item-category").text();

        window.dataLayer.push({
            event: 'Ecommerce - Item List Views',
            event_name: 'view_item_list',
            view_item_list: {
                items: [{
                    item_name: itemName,
                    item_id: itemId, 
                    price: itemPrice, 
                    item_brand: itemBrand,
                    item_category: itemCategory, 
                }]
            }
        });
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="product">
        <div class="item-name">
            <h1>Nike blue shoes</h1>
        </div>
        <div class="item-id">
            SKU-3456
        </div>
        <div class="item-price">
            €22.00
        </div>
        <div class="item-brand">
            Nike
        </div>
        <div class="item-category">
            Shoes
        </div>
    </div>
    <div class="product">
        <div class="item-name">
            <h1>Adidas red shoes</h1>
        </div>
        <div class="item-id">
            SKU-4335
        </div>
        <div class="item-price">
            €55.00
        </div>
        <div class="item-brand">
            Adidas
        </div>
        <div class="item-category">
            Shoes
        </div>
    </div>
    <div class="product">
        <div class="item-name">
            <h1>Nike Yellow Sandals</h1>
        </div>
        <div class="item-id">
            SKU-9654
        </div>
        <div class="item-price">
            €11.00
        </div>
        <div class="item-brand">
            Nike
        </div>
        <div class="item-category">
            Sandals
        </div>
    </div>
    <div class="product">
        <div class="item-name">
            <h1>Vans Black Sneakers</h1>
        </div>
        <div class="item-id">
            SKU-362364
        </div>
        <div class="item-price">
            €99.00
        </div>
        <div class="item-brand">
            Vans
        </div>
        <div class="item-category">
            Sneakers
        </div>
    </div>
</div>

核心问题是原代码直接提取所有.product下对应字段的文本，会把所有商品的内容拼接在一起，而不是逐个处理。修改后的代码会遍历每个商品容器，单独提取每个商品的信息并生成对象，最终组成正确的数组：

$(function () {
    // 初始化空数组存储所有商品对象
    var items = [];

    // 遍历每个.product容器
    $(".product").each(function() {
        // 针对当前商品容器提取信息，用$(this)指向当前遍历的元素
        var itemName = $(this).find(".item-name").text().trim();
        var itemId = $(this).find(".item-id").text().trim();
        var itemPrice = $(this).find(".item-price").text().trim();
        var itemBrand = $(this).find(".item-brand").text().trim();
        var itemCategory = $(this).find(".item-category").text().trim();

        // 将当前商品的信息组装成对象，加入数组
        items.push({
            item_name: itemName,
            item_id: itemId,
            price: itemPrice,
            item_brand: itemBrand,
            item_category: itemCategory
        });
    });

    // 推送完整的商品数组到Data Layer
    window.dataLayer.push({
        event: 'Ecommerce - Item List Views',
        event_name: 'view_item_list',
        view_item_list: {
            items: items
        }
    });
});

关键改动说明 #

• 使用$(".product").each()遍历每个商品容器，确保每个商品单独处理
• 用$(this)指代当前遍历的.product元素，避免混淆不同商品的字段
• 调用.trim()去除文本内容前后的多余空格，保证数据整洁
• 先收集所有商品对象到items数组，再一次性推送到Data Layer

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