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

Use a unique data-dressipi-placement-id for each recommendation placement to ensure consistent and understandable reporting.

Example:

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

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

itemClickQuickView

Tracks a quick-view interaction on a recommended product.

carouselNavigate

Tracks navigation within a recommendation carousel.

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

carouselPaginate

Tracks pagination within a recommendation placement.

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

tabClick

Tracks switching between tabs or recommendation groups.

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

Attribute Reference

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