Interaction Tracking

5 Minutes to read

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback!

Hosted widgets will automatically be instrumented with this tracking. If you're using Dressipi.js to get recommendations as JSON, you should follow the instructions below.

When integrated via the Mapp Fashion API (instead of using the hosted widgets), tracking must be added to report when:

A user clicks on a recommendation.
A user interacts with the recommendations (e.g., navigates a carousel).

This can be done via Dressipi.js and data attributes on elements in your placement.

How does it work?

Dressipi.js watches your site for HTML data attributes matching the definitions below. This allows you to style the output as you wish while benefiting from the automated tracking and identity management that Dressipi.js provides.

Setup

Please install Dressipi.js on your site and mark up your HTML as described below - the rest is handled automatically.

Example

Let's say you've made a request to our API to request outfits and 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_similar_items=2&garment_format=retailer_ids&identifier_type=product-code&pretty=true&include_dressipi_ids=true' \
     --header 'accept: application/json'

You should get a response that looks like the following (with many attributes omitted for simplicity):

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

As in the following example, you should then mark up the HTML in your placement with data attributes. Only the data attributes are required. The rest of your HTML does not need to match the example.

Dressipi.js will listen automatically to clicks on any elements marked up with data attributes such as data-dressipi-product-link-pdp

<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>
          <!-- Quick view may or may not be nested within data-dressipi-product-link-pdp -->
          <!-- but must be within the data-dressipi-raw-garment-id element -->
        </a>
      </div>
      <div data-dressipi-raw-garment-id="5417179">
        <a href="http://example.org/pdp/shoes" data-dressipi-product-link-pdp>
          <img src="..." />
          <span>Bracelet</span>
        </a>
      </div>
      <div data-dressipi-raw-garment-id="5417179">
        <a href="http://example.org/pdp/shoes" data-dressipi-product-link-pdp>
          <img src="..." />
          <span>Bag</span>
        </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>
    <!-- Next outfit: data-dressipi-content-id="64a4235910bb3e5ff0155f87" -->
  </div>
  <button data-dressipi-navigate-previous>Previous outfit</button>
  <button data-dressipi-navigate-next>Next outfit</button>
  <div>
    <!-- Pagination is not a requirement -->
    <button data-dressipi-paginate="0">Dot</button>
    <button data-dressipi-paginate="1">Dot</button>
  </div>

  <h2>Similar item</h2>
  <!-- Similar items share the same content_id -->
  <div
    class="dressipi-similar-items"
    data-dressipi-content-id="64a4235910bb3e5ff0155f8a"
  >
    <div data-dressipi-raw-garment-id="5368268">
      <a href="http://example.org/pdp/dress" data-dressipi-product-link-pdp>
        <img src="..." />
        <span>Similar Dress</span>
      </a>
    </div>
    <div data-dressipi-raw-garment-id="5387457">
      <a href="http://example.org/pdp/dress" data-dressipi-product-link-pdp>
        <img src="..." />
        <span>Similar Dress</span>
      </a>
    </div>
    <!-- Other similar items -->
    <!-- Navigation and pagination as above -->
  </div>
</div>

Attribute	Value	Purpose	API value
data-dressipi-placement-id	UUID	This is provided by Mapp Fashion and indicates where you should show the recommendations on the page. If you display outfits and similar items separately, you'll need a separate placement ID.
data-dressipi-event-id	UUID	This value is included in the request to get related items as `event_id`. You must set this on the element containing the recommendations.	event_id
data-dressipi-content-id	UUID	This value is included in the request to get related items, as `content_id` you must set this on the element wrapping each set of products. There is a separate `content id` for each outfit, only one for all similar items.	outfits[].content_id
data-dressipi-raw-garment-id	String	This is the `raw_garment_id` returned to you in the API. It represents the Mapp Fashion identifier for this product and should be passed through from the related items API response for each product shown.	outfits[].items[].raw_garment_id
data-dressipi-product-link-PDP	None	Attach this to any element that links to a PDP. Mapp Fashion will automatically track clicks on this element.
data-dressipi-product-link-quickview	None	Attach this to any element that displays a quick view. Mapp Fashion will automatically track clicks on this element.
data-dressipi-navigate-next	None	Attach this to any element that navigates to the next set of garments (e.g., the next outfit in a carousel). Mapp Fashion will automatically track clicks on this element.
data-dressipi-navigate-previous	None	Attach this to any element that navigates to the previous set of garments (e.g., the previous outfit in a carousel). Mapp Fashion will automatically track clicks on this element.
data-dressipi-paginate	Number	Attach this to any element that paginates to a set of garments (e.g., pagination pips/dots that jump to an outfit in a carousel). Mapp Fashion will automatically track clicks on this element.
data-dressipi-tab	String	Attach this to any tab that toggles between different content, such as (personalized) outfits vs. partner outfits (e.g., model wears). Mapp Fashion will automatically track clicks on this element.

Note:
For carousel navigation and pagination, you may need to customize the HTML rendered by your carousel library for these controls if you use one. Most popular carousel libraries provide a way to do this.
Below are a couple examples providing more information. Please note that the examples given on these pages only contain the HTML, not our Dressipi.js snippet. The events can therefore not be sent as-is.
a Mapp Fashion-specific working example for Slick (using Slick's customPaging, prevArrow and nextArrow settings)
a Mapp Fashion-specific working example for Swiper (and documentation for Swiper's navigation and pagination)

Was this article helpful?

What's Next

Retrieve outfits and similar items

Table of contents

How does it work?
Setup
Example