Is there a way to send multiple product information to the Google data layer as an array of objects, rather than just one combined object? I currently have a script that sends all fields in one object, but I need each product to have its own object within the array. Can someone help me achieve this with my code below? Thank you!
$(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,
}]
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<!-- Product 1 -->
<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>
<!-- Product 2 -->
<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>
<!-- Product 3 -->
<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>
<!-- Product 4 -->
<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>