Product List Tracking
The Product List Tracking extension allows you to analyze the products viewed and clicked in the catalog. Find more information here.
Overview
| Value | Description | Data type | Default value | Required | Where to analyze | Request Parameter |
|---|---|---|---|---|---|---|
| id | Contains the product id or product name. | String | Yes | E-Commerce > Products | ba | |
| position | Specifies the product position within the list. | Number | Yes | E-Commerce > Product Position in List | plp | |
| selector | Specifies the element to be measured. You can pass the CSS selector of the element. | String | current element | - | - | - |
| shadowRoot | If your content to be measured is inside a shadow DOM element, specify the CSS selector of the shadow DOM element. If you have defined a CSS selector as the "selector", it will refer to the "shadowRoot" selector you have defined. | String | - | - | - | |
| cost | Contains the product price ("0" prices are allowed). If the quantity is greater than 1, use the total price. | Number | - | Metrics
| co | |
| quantity | Contains the product quantity. | Number | - | Metrics
| qn | |
| variant | Contains the variant of the product. | String | - | E-Commerce > E-Commerce Parameters | cb767 | |
| soldOut | Indicates that the product is sold out or in stock. true means sold out false to in stock. | Boolean | - | E-Commerce > E-Commerce Parameters | cb760 | |
| category | Use this parameter to categorize products. Find more details below. | Object | - | E-Commerce > Product Categories or metric | ca[ID] | |
| parameter | Use parameters to add additional information to a product. Find details below. | Object | - | E-Commerce > E-Commerce Parameters or metric | cb[ID] |
Further information
parameter
In contrast to categories, parameters can track different values with each product request. Find more details here.
Before use, parameters must be set up under Mapp Q3 > Configuration > Custom Parameters > E-Commerce Parameter. The ID and data type (text/number) are defined for each parameter during setup. Find more info here.
Example (parameter with ID "1"): {1:"position-1"}
category
With categories, you can add unique information for each product. You can track them onsite or import data. Learn about use cases here.
Before use, categories must be set up under Mapp Q3 > Configuration > Categorisation > Content Groups. The ID and data type (text/number) are defined for each parameter during setup. Find more info here.
Example (parameter with ID "1"): {1:"Woman"},
Categories are assigned once to a page only: in the first-ever request of a page. We, therefore, recommend implementing page and content group tracking in parallel.
See also How can I replace missing values ("-") in categories?
Implementation Examples
Please add WebtrekkSmartPixelModule to your root NgModule and configure the options before using directives.
import { Component } from "@angular/core";
@Component({
template: `<div id="my-product" [wt-product-list]="webtrekkData"></div>`,
styles: [
'div { height: 500px; width: 100%; border: solid 1px black; }'
]
})
export class ExampleComponent {
webtrekkData = {
selector: '#my-product',
id: 'product id 1',
position: 2,
cost: 19.95,
quantity: 1,
variant: 'product variant',
soldOut: false,
category: {1: 'category-1', 5: 'category-5'},
parameter: {1: 'parameter-1', 7: 'parameter-7'}
}
}