---
title: "Product List Tracking"
slug: "vue-product-list-tracking"
updated: 2024-08-20T08:21:30Z
published: 2024-08-20T08:21:30Z
canonical: "docs.mapp.com/vue-product-list-tracking"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product List Tracking

The Product List Tracking extension allows you to analyze the products viewed and clicked in the catalog. Find more information [here](/v1/docs/implementing-the-product-list-tracking-plugin).

## 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 |
| position | Specifies the product position within the list. | `Number` |  | Yes | *E-Commerce > Product Position in List* | plp |
| selector | Specifies the element to be measured. You can pass the CSS selector of the element. | `String` | `current element` | - | - | - |
| shadowRoot | If your content to be measured is inside a shadow DOM element, specify the CSS selector of the shadow DOM element. If you have defined a CSS selector as the "selector", it will refer to the "shadowRoot" selector you have defined. | `String` |  | - | - | - |
| cost | Contains the product price ("0" prices are allowed). If the quantity is greater than 1, use the total price. | `Number` |  | - | Metrics - Value Product Views - Value Product Added to Cart - Value Purchased Products | co |
| quantity | Contains the product quantity. | `Number` |  | - | Metrics - Qty Product Views - Qty Product Added to Cart - Qty Purchased Products | qn |
| soldOut | Indicates that the product is sold out or in stock. `true` means sold out `false` to in stock. | `Boolean` |  | - | *E-Commerce > E-Commerce Parameters* | cb760 |
| category | Use this parameter to categorize products. Find more details below. | `Object` |  | - | *E-Commerce > Product Categories* or metric | ca[ID] |
| parameter | Use parameters to add additional information to a product. Find details below. | `Object` |  | - | *E-Commerce > E-Commerce Parameters or metric* | cb[ID] |

## Further information

### parameter

In contrast to categories, parameters can track different values with each product request. [Find more details here.](/v1/docs/whats-the-difference-between-page-parameters-and-content-groups)

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](/v1/docs/how-to-set-up-custom-parameters).

**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](/v1/docs/using-product-categories-to-measure-performance).

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](/v1/docs/how-to-set-up-categories).

**Example (parameter with ID "1"):** {1:"Woman"},

> [!WARNING]
> 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?](/v1/docs/how-can-i-replace-missing-values-in-categories)

## Implementation Example

```xml
<template>
  <a href="#" ref="product_list_element">Product</a>
</template>
 
<script>
export default {
  name: "example",
  mounted() {
    this.$webtrekk.extension("product_list_tracking"); // activate product list tracking
    this.$webtrekk.extension("product_list_tracking", "add", {
      selector: this.$refs.product_list_element,
      data: {
        id: "product id 1",
        position: 2,
        cost: 19.95,
        quantity: 1,
        soldOut: false,
        category: {1: "category-1", 5: "category-5"},
        parameter: {1: "parameter-1", 7: "parameter-7"}
      }
    });
  }
};
</script>
```

```xml
<template>
  <div
    v-webtrekk.product_list_tracking="{
      data: { 
        id: 'product id 1',
        position: 2,
        cost: 19.95,
        quantity: 1,
        soldOut: false,
        category: {1: 'category-1', 5: 'category-5'},
        parameter: {1: 'parameter-1', 7: 'parameter-7'}
      }
    }"
  >
    product
  </div>
</template>
```