Product Card Tracking - Depict Documentation

These steps apply to product cards you render yourself. Cards rendered by a legacy Depict UI SDK already carry these attributes.

We need to tell DPC about the product cards that you created using Depict data. Also, you need to enable Depict to understand what product this product card is in our internal representation. In the response from all our API:s there’s an id inside each display. You need to add this id to your product card template as a data attribute. The ID is called different things based on different endpoints

Endpoint you got product data from	Name of ID in `display` (display = product data provided from API response)	Attribute name to be used
/v3/listings/*	product_listing_result_id	data-product-listing-result-id
/v2/product-listing	product_listing_result_id	data-product-listing-result-id
/v3/recommend/products	recommendation_id	data-recommendation-id
/v2/recommend/*	recommendation_id	data-recommendation-id
/v3/search/results	search_result_id	data-search-result-id
/v2/search/results	search_result_id	data-search-result-id
/v3/search/related	recommendation_id	data-recommendation-id
/v2/search/related	recommendation_id	data-recommendation-id

/v3/search/suggestions returns no displays, so there is nothing to tag for it.

This step enables DPC to track clicks on the product cards — including clicks on add-to-cart buttons inside them. Cards added later (for example after client-side navigation or infinite scroll) are picked up automatically.

Examples

One attribute per card, named after the endpoint the display came from (see the table above). The value is the id from that display.

Collection or category page (/v3/listings/*)

<div data-product-listing-result-id="7ad3110d-7cd6-4352-83da-b93fa1bfe645">
  <!-- Product card -->
</div>

Recommendations (/v3/recommend/products)

<div data-recommendation-id="59b344d9-bab9-488f-805b-e79a0e67a213">
  <!-- Product card -->
</div>

Search results (/v3/search/*)

<div data-search-result-id="c1f0a6d2-3b5e-4a8f-9d21-6e4b7c0a9f13">
  <!-- Product card -->
</div>

​Examples

Examples