---
title: "Product List Tracking"
slug: "react-next-product-list-tracking"
updated: 2024-08-22T11:30:17Z
published: 2024-08-22T11:30:17Z
canonical: "docs.mapp.com/react-next-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

```javascript
import { WebtrekkProductList } from "@webtrekk-smart-pixel/react";
```

```javascript
import { WebtrekkProductList } from "@webtrekk-smart-pixel/next";
```

**Component**

```javascript
render()
{
    return (
        <div>
            { products.data.map(function(product, i) {
                return (
                    <WebtrekkProductList
                        selector={ `#${product.id}` }
                        id={ product.id }
                        position={ i + 1 }
                        cost={ product.cost }
                        quantity={ 1 }
                        soldOut={ product.isSoldOut }
                        parameter={ {
                            1: product.name,
                            2: product.material,
                            4: product.color
                        } }
                        category={ {
                            1: product.description
                        } }
                    >
                        <Link to={ "/product/" + product.id } id={ product.id }>
                            <ProductImage product={ product } products={ products } />
                        </Link>
                    </WebtrekkProductList>
                );
            }) }
        </div>
    );
}
```