Products
- 3 Minutes to read
- Print
- DarkLight
Products
- 3 Minutes to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback!
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 |
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] |
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 |
add | The product is placed in the shopping cart |
confirmation | The product has been purchased |
add-wl | Product is added to wishlist |
del-wl | Product is removed from wishlist |
del | Product is removed from cart |
checkout | Product is in checkout |
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
If you do not have automatic page tracking enabled, invoke the track method after adding all relevant tracking information.
<template>
<div>Example</div>
</template>
<script>
export default {
name: "example",
mounted() {
this.$webtrekk.product("view", {
id: "ABC-123",
cost: 99.9,
quantity: 2,
soldOut: false,
parameter: { 1: "L" },
category: { 1: "tops", 2: "noname" }
});
}
};
</script>Value | Description | Data type | Default value | Required |
|---|---|---|---|---|
track | If you want to track all current added information, add the |
|
| - |
If you do not have automatic page tracking or the additional property
trackenabled, invoke the track method after adding all relevant tracking information.
When you use the product in the directive, by default, a product view is triggered.
<template>
<div
v-webtrekk.product.basket="{
id: 'ABC-123',
cost: 99.9,
quantity: 2,
soldOut: false,
parameter: { 1: 'L' },
category: { 1: 'tops', 2: 'noname' }
}"
>
Example
</div>
</template>If you want to use the key syntax instead, you can add the status in the status property:
<template>
<div
v-webtrekk="{
product: {
id: 'ABC-123',
cost: 99.9,
status: 'basket',
quantity: 2,
parameter: { 1: 'L' },
category: { 1: 'tops', 2: 'noname' }
}
}"
>
Example
</div>
</template>Tracking via data property only works when automatic page tracking is set to
true.
<template>
<div>Example</div>
</template>
<script>
export default {
name: "example",
data() {
return {
webtrekk: {
product: {
id: "ABC-123",
cost: 99.9,
status: "basket",
quantity: 2,
soldOut: false,
parameter: { 1: "L" },
category: { 1: "tops", 2: "noname" }
}
}
};
},
mounted() {
}
};
</script>Was this article helpful?