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.
1
<!-- Product Detail Page -->
2
<div class="detail" elb="product" elb-action="load:detail" elb-product="id:1">
3
<div class="image"></div>
4
<p class="name" elb-product="name:Bermuda Shorts Lisa">Bermuda Shorts Lisa</p>
5
<span class="producer" elb-product="brand:Discover">Discover</span>
6
<span class="variant" elb-product="variant:Slim fit">Slim fit</span>
7
<button elb-action="click:remove"></button>
8
<div class="category" elb-product="category:Shorts">Shorts</div>
9
<div class="price" elb-product="price:29">€ 29</div>
10
<p class="description">...</p>
11
<p class="stock" elb-product="stock:soldout">We're so sorry!</p>
12
<input type="text" class="qantity" value="1" name="quantity" elb-product="quantity:#value">
13
<button elb-action="click:add">Add to cart</button>
14
</div>
Copied!
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:
1
elbLayer.push(
2
'product add',
3
{
4
id: 1,
5
name: 'Bermuda Shorts Lisa',
6
brand: 'Discover',
7
variant: 'Slim fit',
8
category: 'Shorts',
9
price: 29,
10
stock: 'soldout',
11
quantity: 1,
12
},
13
'click',
14
);
15
Copied!
We will add a lot more real world examples here in the upcoming weeks. If you want to know how to measure certain events or website elements with our walker please don't hesitate to reach out to us via [email protected].
Last modified 6d ago
Copy link