Product Detail Page
What actions are typically being tracked on this page:
- Product detail (also known as product detail view)
- Product add (also known as Add_to_cart)
- Product like (also known as Add_to_wishlist)
What properties are typically being tracked on this page:
- name
- id (also known as SKU)
- Category
- Price
- Quantity
- Brand
- Variant
- Size
- Color
- etc.
A typical walker implementation of a product's detail page could look like this.
<!-- Product Detail Page -->
<div class="detail" data-elb="product" data-elbaction="load:detail" data-elb-product="id:1">
<div class="image"></div>
<p class="name" data-elb-product="name:Bermuda Shorts Lisa">Bermuda Shorts Lisa</p>
<span class="producer" data-elb-product="brand:Discover">Discover</span>
<span class="variant" data-elb-product="variant:Slim fit">Slim fit</span>
<button data-elbaction="click:remove"></button>
<div class="category" data-elb-product="category:Shorts">Shorts</div>
<div class="price" data-elb-product="price:29">€ 29</div>
<p class="description">...</p>
<p class="stock" data-elb-product="stock:few">Better hurry!</p>
<input type="text" class="qantity" value="1" name="quantity" data-elb-product="quantity:#value">
<button data-elbaction="click:add">Add to cart</button>
</div>
Once a page is loaded by a user all property values from the element as well as all child elements of the entity-container and their parents will be collected. In the background a dataLayer push will be generated with the following structure:
elbLayer.push(
'product add',
{
id: 1,
name: 'Bermuda Shorts Lisa',
brand: 'Discover',
variant: 'Slim fit',
category: 'Shorts',
price: 29,
stock: 'few',
quantity: 1,
},
'click',
);
Last modified 1yr ago