product
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 | |
| action | The products can have the following statuses:
See Product Statuses for more information. | String | Yes | E-Commerce | st | |
| cost | Contains the product price ("0" prices are allowed). If the quantity is greater than 1, use the total cost. | Number | 0 | - | Metrics
| co |
| quantity | Contains the product quantity. | Number | 0 | - | 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 refers to sold out, false to in stock. | Boolean | false | - | E-Commerce > E-Commerce Parameters | cb760 |
| parameter | Use parameters to add additional information to a product. Find details below. | Object | - | E-Commerce > E-Commerce Parameters or metric | cb[ID] | |
| category | Use this parameter to categorize products. Find more details below. | Object | - | E-Commerce > Product Categories or metric | ca[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
If you do not have automatic page tracking enabled, invoke the track method after adding all relevant tracking information.
Adds a single product
import { Component } from '@angular/core';
import { WebtrekkSmartPixelAngular } from '@webtrekk-smart-pixel/angular';
@Component({
template: `<div>[ ... ]</div>`
})
export class ExampleComponent {
constructor(private pixel: WebtrekkSmartPixelAngular) {
this.pixel.product("view", {
id: "ABC-123",
cost: 99.90,
quantity: 2,
soldOut: false,
variant: "green",
parameter: {1: "L"},
category: {1: "tops", 2: "noname"}
});
}
}Adds a list of products
import { Component } from '@angular/core';
import { WebtrekkSmartPixelAngular } from '@webtrekk-smart-pixel/angular';
@Component({
template: `<div>[ ... ]</div>`
})
export class ExampleComponent {
constructor(private pixel: WebtrekkSmartPixelAngular) {
this.pixel.products("view", [{
id: "ABC-123",
cost: 99.90,
quantity: 2,
soldOut: false,
variant: "green",
parameter: {1: "L"},
category: {1: "tops", 2: "noname"}
}]);
}
}
Please add WebtrekkSmartPixelModule to your root NgModule and configure the options before using directives.
If you do not have automatic page tracking enabled, invoke the track method after adding all relevant tracking information.
import { Component } from '@angular/core';
@Component({
template: `<div [wt-product-data]="webtrekkData"></div>`
})
export class ExampleComponent {
webtrekkData = {
id: 'product id 1',
action: 'view',
cost: 19.95,
quantity: 1,
variant: 'product variant',
soldOut: false,
category: {1: 'category-1', 5: 'category-5'},
parameter: {1: 'parameter-1', 7: 'parameter-7'}
}
}