1 Overview
Mapp Intelligence enables tracking of different product statuses to analyze user interaction across the full shopping funnel. The product status defines the context in which a product is viewed or interacted with.
Tracking is handled via a single object using the appropriate action value.
2 Configurable Properties
Mapp Intelligence enables tracking of different product statuses to analyze user interaction across the full shopping funnel. The product status defines the context in which a product is viewed or interacted with.
The following product statuses are available and can be used for the action property:
Product Status | Description |
|---|---|
list | Viewed in a catalog or product overview page |
view | Viewed on a product detail page |
addToWishlist | Added to a wishlist |
deleteFromWishlist | Removed from a wishlist |
addToCart | Added to a shopping cart |
deleteFromCart | Removed from a shopping cart |
checkout | Moved to checkout |
confirmation | Purchased |
displayReco | A product in a recommendation is loaded |
clickReco | A product in a recommendation is clicked |
For details on implementing each product status, see section 3 Objects and Methods.
2 Configurable Properties
The following properties are available for product tracking:
Property | Description | Data type | {{glossary.Request Parameter}} |
|---|---|---|---|
id | A unique product identifier. Use a SKU or article number to support catalog imports. | string | ba |
cost | Product price. For multiple quantities, send the total price. "0" values are allowed. | number | co |
quantity | Quantity of the product. | number | qn |
soldOut | Indicates if the product is sold out ( | boolean | cb760 |
variant | Identifier of the product’s variant or style context (not SKU-level). | string | cb767 |
fashionStyleId * | Style ID — groups variants that share the same color but differ in size. | string | — |
fashionProductId ** | Product ID — groups all variants of a product, regardless of color or size. | string | — |
fashionItemTitle * | Product name. | string | — |
fashionItemCategory * | Product category. | string | — |
parameter | Optional e-commerce parameters. Can enrich product data with attributes like color or size. | object | cb[ID] |
category | Defines the product category. Each product can only have one category per category ID. | object | ca[ID] |
* Sent to the Mapp Fashion extension only. Not transferred to Mapp Intelligence and not shown as a request parameter.
**
fashionProductIdis processed by the recommendation tracking plugin to match recommended products to an order. It is not sent to Mapp Intelligence or Mapp Fashion.
Product identifiers in tracking
Mapp Intelligence uses the same product identifier model as the Mapp Cloud Product Catalog. Each tracking field maps to one catalog identifier:
Smart Pixel field | Catalog identifier | Example |
|---|---|---|
| Variant ID |
|
| Product ID |
|
| Style ID |
|
The id references a single purchasable item including color and size. fashionProductId is optional and groups all variants of a product. Setting it lets Mapp match a tracked product to its product group even when variant identifiers change, which is relevant for recommendation tracking. Set it in addition to id whenever the value is available, including in non-Fashion setups.
For the full identifier model, see How Product Catalogs Work.
2.1 Parameters
Parameters allow you to enrich product data with website-specific values (e.g., product size, color). You must configure parameters in Mapp Q3 > Configuration > Custom Parameters > E-Commerce Parameters. Values appear in E-Commerce > E-Commerce Parameters for type "Text" or as metrics for type "Number".
For setup instructions: How to Set Up Custom Parameters
2.2 Categories
Categories group products into structured hierarchies (e.g., category, brand). Each product can only have one value per category ID. Categories must be set up under Mapp Q3 > Configuration > Categorisation > Product Categories.
Tracked categories of type "Text" appear under E-Commerce > Product Categories. Categories of type "Number" are available as metrics.
For setup instructions: How to Set Up Categories
3 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,
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,
parameter: {1: "L"},
category: {1: "tops", 2: "noname"}
}]);
}
}Please add
WebtrekkSmartPixelModuleto 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,
soldOut: false,
category: {1: 'category-1', 5: 'category-5'},
parameter: {1: 'parameter-1', 7: 'parameter-7'}
}
}