Recommendation Tracking

1 Overview

Recommendation Tracking records user engagement with recommendation placements when using the Mapp Fashion API, rather than hosted widgets.

It tracks when users:

• Click on a recommendation

• Interact with recommendations (for example, by navigating a carousel)

This tracking is handled through Standalone Tracking, which automatically detects HTML data attributes and reports the relevant events.

Hosted widgets include this tracking automatically.
If you are using Standalone Tracking to fetch recommendations as JSON, follow the steps below to enable it manually.

2 Setup

1. Install Standalone Tracking on your site.

2. Add the required HTML data attributes to your recommendation placement elements (see examples below).

3. Once configured, Standalone Tracking automatically monitors and reports interactions — no additional scripting is required.

Tip: You can freely style your placement HTML. Only the data attributes are required for event tracking.

3 Example Implementation

3.1 API Request Example

Use the Mapp Fashion API to retrieve outfits or similar items:

curl --request GET \
--cookie "x-session-id=1ed19575-8f0c-4fcf-90a9-cadb53d16960" \
--url 'https://example.org/api/items/123456/related?exclude_source_garment=true&max_simil' \
--header 'accept: application/json'

3.2 Example API Response

A simplified example of the JSON response:

{
  "event_id": "64a4235910bb3e5ff0155f85",
  "outfits": [
    {
      "content_id": "64a4235910bb3e5ff0155f86",
      "raw_garment_id": 123456,
      "items": [
        { "raw_garment_id": 5417179 },
        { "raw_garment_id": 5447235 },
        { "raw_garment_id": 5403634 }
      ]
    }
  ],
  "similar_items": {
    "content_id": "64a4235910bb3e5ff0155f8a",
    "items": [
      { "raw_garment_id": 5368268 },
      { "raw_garment_id": 5387457 },
      { "raw_garment_id": 5418274 }
    ]
  }
}

4 Tracking Events and Functions

4.1 HTML Markup Example

Mark up your placement HTML using the data attributes returned from the API:

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

Once these attributes are in place, Standalone Tracking automatically listens for and tracks:

• Product clicks

• Carousel navigation

• Pagination interactions

4.2 Attribute Reference

4.3 Carousel Navigation and Pagination

For carousel navigation and pagination, you may need to customize your carousel library’s HTML controls.

Most popular libraries (e.g., Slick or Swiper) allow this via their navigation or pagination configuration.

• Slick Example

• Swiper Example

5 Manual Tracking via JavaScript

If you render recommendations via the API (JSON) instead of hosted widgets, call these tracking functions directly.
Note: All parameters below are required unless marked as Optional.

Tip:

When using hosted widgets, the HTML attributes you already documented fire the equivalent functions automatically (e.g., data-dressipi-product-link-pdp → itemClickPDP, data-dressipi-navigate-next → carouselNavigate).

5.1 itemClickQuickView

Use this function when a shopper opens a product in a Quick View from a recommendation set.

Dressipi('track', 'itemClickQuickView', {
  setId: '44ff586f-ac79-4810-bbac-146f49f02f9c',
  itemId: 123,
  requestId: 'UUID',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});

Parameters

5.2 itemClickPDP

Use this function when a shopper clicks from a recommendation to a Product Detail Page. Parameters are the same as itemClickQuickView.

Dressipi('track', 'itemClickPDP', {
  setId: '44ff586f-ac79-4810-bbac-146f49f02f9c',
  itemId: 123,
  requestId: 'UUID',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});

Parameters

5.3 carouselNavigate

Use this function when a shopper moves between carousel slides (e.g., Next / Previous).

Dressipi('track', 'carouselNavigate', {
  requestId: 'UUID',
  direction: 'next',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});

Parameters

5.4 carouselPaginate

Use this function when a shopper uses pagination dots/pips to jump between carousel pages.

Dressipi('track', 'carouselPaginate', {
  requestId: 'UUID',
  page: 2,
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});

Parameters

5.5 tabClick

Use this function when a shopper switches tabs between content groups (e.g., “You May Also Like”, “Recently Viewed”).

Dressipi('track', 'tabClick', {
  tabName: 'Recently Viewed',
  requestId: 'UUID',
  parentPageViewId: 'SnowplowParentPageViewUUID' // Optional
});

Parameters