Product example

A typical e-commerce implementation of a product's detail page could look like this.

<!-- Product Detail Page -->
<div class="detail" elb="product" elb-action="load:detail" elb-product="id:1">
<div class="image"></div>
<a href="#" elb-action="click">
<p class="name" elb-product="name:Bermuda Shorts Lisa">
Bermuda Shorts Lisa
</p>
</a>
<span class="producer" elb-product="brand:Discover">Discover</span>
<span class="variant" elb-product="variant:Slim fit">Slim fit</span>
<button class="badge incart" elb-action="click:remove"></button>
<div class="category" elb-product="category:Shorts">Shorts</div>
<div class="price" elb-product="price:29">โ‚ฌ 29</div>
<p class="description">...</p>
<p class="partner" elb-product="partner:Harald Logistics">...</p>
<button elb-product="quantity:1" elb-action="click:add">Add to cart</button>
</div>

When a visitor loads the page all property values from the element as well as from all children of the entity-container and its parent will be collected. This would result in the following Ention:

{
"action": "detail",
"entity": {
"type": "product",
"data": {
"id": 1,
"name": "Bermuda Shorts Lisa",
"brand": "Discover",
"variant": "Slim fit",
"category": "Shorts",
"price": 29,
"partner": "Harald Logistics",
"quantity": 1
}
},
"trigger": "load"
}

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].