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
The following properties are available for product tracking:
Property | Description | Data type (Default) | Request Parameter |
|---|---|---|---|
id | A unique product identifier. Use a SKU or article number to support catalog imports. | string | ba |
action | Defines the product status. More information below. | string | st |
cost | Product price. For multiple quantities, send the total price. "0" values are allowed. | number (0) | co |
quantity | Quantity of the product. | number (0) | qn |
soldOut | Indicates if the product is sold out (true) or in stock (false). | boolean (false) | cb760 |
variant | Identifier of the product’s variant or style context (not SKU-level). | string | cb767 |
fashionStyleId | Product code or variant identifier. (Mapp Fashion only) | string | — |
fashionItemTitle | Product name. (Mapp Fashion only) | string | — |
fashionItemCategory | Product category (Mapp Fashion only) | string | — |
parameter | Optional e-commerce parameters. Can enrich product data with attributes like color or size. More information below. | object | cb[ID] |
category | Defines the product category. Each product can only have one category per category ID. More information below. | object | ca[ID] |
Mapp Fashion only
These properties are processed exclusively by the Mapp Fashion extension and are sent to Mapp Fashion. They are not transferred to Mapp Intelligence and therefore do not appear as request parameters in Mapp Intelligence tracking requests.
2.1 Product Status (action)
The following values can be used for the action property:
Value | Description |
|---|---|
view | The product is viewed on a product detail page |
addToCart | The product is placed in the shopping cart |
confirmation | The product has been purchased |
addToWishlist | Product is added to wishlist |
deleteFromWishlist | Product is removed from wishlist |
deleteFromCart | Product is removed from cart |
checkout | Product is in checkout |
displayReco | Product is loaded in a recommendation |
clickReco | Product is clicked in a recommendation |
2.2 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.3 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 Example
import { WebtrekkSmartPixelReact, WebtrekkProductData } from "@webtrekk-smart-pixel/react";import { WebtrekkSmartPixelReact, WebtrekkProductData } from "@webtrekk-smart-pixel/next";If you do not have automatic page tracking enabled, invoke the track method after adding all relevant tracking information.
Adds a single product
WebtrekkSmartPixelReact.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
WebtrekkSmartPixelReact.products("view", [{
id: "ABC-123",
cost: 99.90,
quantity: 2,
soldOut: false,
parameter: {1: "L"},
category: {1: "tops", 2: "noname"}
}]);If you do not have automatic page tracking enabled, invoke the track method after adding all relevant tracking information.
render()
{
return (
<div>
<WebtrekkProductData
id="ABC-123"
action="view"
cost={ 99.90 }
quantity={ 2 }
soldOut={ false }
parameter={ {1: "L"} }
category={ {1: "tops", 2: "noname"} }
/>
</div>
);
}