Product List Tracking

The Product List Tracking extension allows you to analyze the products viewed and clicked in the catalog. Find more information here.

Overview

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

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

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

Component

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>
    );
}