product
Use this to add a single 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 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,
variant: "green",
parameter: { 1: "L" },
category: { 1: "tops", 2: "noname" }
});
}
};
</script>
Overview
| Value | Description | Data type | Default value | Required |
|---|---|---|---|---|
| track | If you want to track all current added information, add the track property to your configuration. | Boolean | false | - |
If you do not have automatic page tracking or the additional property track enabled, invoke the track method after adding all relevant tracking information.
When you use product in the directive, by default a product view is triggered. If you want to have a basket, confirmation or list instead, you can simply add a corresponding directive modifier.
<template>
<div
v-webtrekk.product.basket="{
id: 'ABC-123',
cost: 99.9,
quantity: 2,
soldOut: false,
variant: 'green',
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,
variant: 'green',
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,
variant: "green",
parameter: { 1: "L" },
category: { 1: "tops", 2: "noname" }
}
}
};
},
mounted() {
}
};
</script>