Walker.js docs

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>
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:
'product add',
id: 1,
name: 'Bermuda Shorts Lisa',
brand: 'Discover',
variant: 'Slim fit',
category: 'Shorts',
price: 29,
stock: 'few',
quantity: 1,