---
title: "Recommendation Tracking"
slug: "recommendation-tracking-fashion"
updated: 2026-10-08T11:01:56Z
published: 2026-10-08T11:01:56Z
canonical: "docs.mapp.com/recommendation-tracking-fashion"
---

> ## 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.

# Recommendation Tracking

## Overview

Recommendation Tracking records how shoppers interact with Mapp Fashion recommendations on your website. It captures engagement with recommendation placements, such as clicks and navigation, and links these interactions to the underlying recommendation request.

This setup is required if you want to provide recommendations yourself using the [Mapp Fashion API](https://docs.mapp.com/apidocs/introduction-2). If you use our Hosted Widgets, recommendation tracking is included automatically, and no additional setup is required.

Typical use cases include:

- Measuring clicks on recommended products
- Tracking carousel navigation (next/previous)
- Tracking pagination or tab switches within recommendation placements
- Linking recommendation interactions to user journeys and orders

---

## Tracked Interaction Types

The following interaction types can be tracked for Mapp Fashion recommendations.

- **Product Clicks**

Tracks clicks on recommended products, including navigation to the product detail page and quick-view interactions.
- **Carousel Navigation**

Tracks navigation within a recommendation carousel. For example, moving to the next or previous set of items. This works with any carousel implementation, including Slick, Swiper, or custom components.
- **Pagination**

Tracks page actions within recommendation placements, such as switching between pages or indicator dots.
- **Tabs**

Tracks switching between tabs or recommendation groups within a placement, for example, Outfits and Similar Items.

---

## Tracking Approaches

Recommendation interactions can be tracked in two ways, depending on how recommendations are rendered:

- via HTML data attributes
- via explicit JavaScript tracking calls

Both approaches use the same underlying tracking logic and can be combined if needed.

### HTML-based Recommendation Tracking

If recommendations are rendered as HTML elements, interactions can be tracked by adding the data attributes returned by the Mapp Fashion API to the corresponding elements.

Once the attributes are present, the Mapp Fashion extension automatically tracks supported interactions, including product clicks, navigation, and pagination.

> [!NOTE]
> Note
> 
> Use a unique data-dressipi-placement-id for each recommendation placement to ensure consistent and understandable reporting.

**Example:**

```xml
<div
  class="dressipi-recommendations"
  data-dressipi-event-id="641e229eef291a10413a1cfe"
  data-dressipi-placement-id="[insert placement_id provided separately]"
>
  <h2>Outfits</h2>
  <div class="dressipi-outfits">
    <div data-dressipi-content-id="64a4235910bb3e5ff0155f86">
      <div data-dressipi-raw-garment-id="12345">
        <a href="http://example.org/pdp/dress" data-dressipi-product-link-pdp>
          <img src="..." />
          <span>Dress</span>
          <button data-dressipi-product-link-quickview>Quick View</button>
        </a>
      </div>
      <div data-dressipi-raw-garment-id="5447235">
        <a href="http://example.org/pdp/shoes" data-dressipi-product-link-pdp>
          <img src="..." />
          <span>Shoes</span>
        </a>
      </div>
    </div>
  </div>
  <button data-dressipi-navigate-previous>Previous outfit</button>
  <button data-dressipi-navigate-next>Next outfit</button>
  <div>
    <button data-dressipi-paginate="0">Dot</button>
    <button data-dressipi-paginate="1">Dot</button>
  </div>
</div>
```

Only the data attributes are required for tracking. Styling and layout depend entirely on your implementation.

### JavaScript-based Recommendation Tracking

Use this approach when recommendations are rendered dynamically or when interactions are handled programmatically.

Typical scenarios include:

- recommendations rendered without static DOM attributes,
- interactions handled outside the DOM,
- fine-grained control over event timing is needed.

---

### Tracking Events and Parameters

This section lists all available recommendation tracking events and their parameters for JavaScript-based implementations.

#### itemClickPDP

Tracks a click on a recommended product that leads to a product detail page.

```javascript
wtSmart.extension.fashion.call('track', 'itemClickPDP', {
  setId: '44ff586f-ac79-4810-bbac-146f49f02f9c',
  itemId: 123,
  requestId: 'UUID',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});
```

| Parameter | Type | Description |
| --- | --- | --- |
| `setId` | String | Related items set ID (API `content_id`). |
| `itemId` | Number | Clicked item ID (`raw_garment_id`). |
| `requestId` | String | Request identifier for the placement (`event_id`). |
| `parentPageViewId` | String | *(Optional)* Page view context ID. |

---

#### itemClickQuickView

Tracks a quick-view interaction on a recommended product.

| Parameter | Type | Description |
| --- | --- | --- |
| `setId` | String | Identifier of the set containing the item (returned by the API as `content_id`). |
| `itemId` | Number | The item ID that was clicked (API `raw_garment_id`). |
| `requestId` | String | Identifier of the server request that generated the content (`event_id`). |
| `parentPageViewId` | String | *(Optional)* Page view context ID that links the interaction to the correct page. |

---

#### carouselNavigate

Tracks navigation within a recommendation carousel.

```javascript
wtSmart.extension.fashion.call('track', 'carouselNavigate', {
  requestId: 'UUID',
  direction: 'next',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});
```

| Parameter | Type | Description |
| --- | --- | --- |
| `direction` | String | `"next"` or `"previous"`. |
| `requestId` | String | Identifier of the request that produced the carousel content (`event_id`). |
| `parentPageViewId` | String | *(Optional)* Page view context ID. |

---

#### carouselPaginate

Tracks pagination within a recommendation placement.

```javascript
wtSmart.extension.fashion.call('track', 'carouselPaginate', {
  requestId: 'UUID',
  page: 2,
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});
```

| Parameter | Type | Description |
| --- | --- | --- |
| `requestId` | String | Identifier of the request that produced the content (`event_id`). |
| `page` | Number | Page number (numeric). |
| `parentPageViewId` | String | *(Optional)* Page view context ID. |

---

#### tabClick

Tracks switching between tabs or recommendation groups.

```javascript
wtSmart.extension.fashion.call('track', 'tabClick', {
  tabName: 'Recently Viewed',
  requestId: 'UUID',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});
```

| Parameter | Type | Description |
| --- | --- | --- |
| `tabName` | String | Name of the tab as displayed to the user. |
| `requestId` | String | Identifier of the request that produced the tab’s content (`event_id`). |
| `parentPageViewId` | String | *(Optional)* Page view context ID. |

---

## Attribute Reference

Here you’ll find a reference of all HTML data attributes used for recommendation tracking.

> [!WARNING]
> Warning
> 
> If you retrieve recommendations through the v2 endpoints or the Smart Pixel, set `include_fashion_ids` to `true`. Otherwise `raw_garment_id` is not returned for recommended items.

| **Attribute** | **Value Type** | **Purpose / Description** |
| --- | --- | --- |
| `data-dressipi-placement-id` | UUID | Provided by Mapp. Identifies where recommendations are displayed on the page. Use a separate placement ID for each placement type (e.g., “similar items”). |
| `data-dressipi-event-id` | UUID | Returned by the API when retrieving related items. Must be set on the element containing the recommendations. |
| `data-dressipi-content-id` | UUID | Returned by the API. Set this on the container, wrapping each set of items (for example, each outfit or similar items group). |
| `data-dressipi-raw-garment-id` | String | Represents the `raw_garment_id` returned by the API. Corresponds to the Mapp Fashion identifier for the product shown. |
| `data-dressipi-product-link-pdp` | None | Attach to any link element that leads to a Product Detail Page (PDP). Tracks when users click to view a product. |
| `data-dressipi-product-link-quickview` | None | Attach to any element that triggers a quick view. Tracks quick-view interactions automatically. |
| `data-dressipi-navigate-next` | None | Attach to any element that navigates to the next group of garments (for example, the next outfit in a carousel). |
| `data-dressipi-navigate-previous` | None | Attach to any element that navigates to the previous group of garments (for example, the previous outfit in a carousel). |
| `data-dressipi-paginate` | Number | Attach to any element that paginates between sets of items (for example, pagination dots in a carousel). |
| `data-dressipi-tab` | String | Attach to any tab that toggles between content types (for example, “personalized outfits” vs. “model wear”). |