Only follow these steps for product cards that are NOT rendered through the Depict UI (SDK)

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 fromName of ID in display (display = product data provided from API response)Attribute name to be used
/v3/listings/*product_listing_result_iddata-product-listing-result-id
/v2/product-listingproduct_listing_result_iddata-product-listing-result-id
/v3/recommend/productsrecommendation_iddata-recommendation-id
/v2/recommend/*recommendation_iddata-recommendation-id
/v3/search/*search_result_iddata-search-result-id
/v2/search/related, /v2/search/resultssearch_result_iddata-search-result-id

This step enables DPC to add click tracking to the product cards as well as tracking when the product card is visible to the user according to certain criteria.

Examples:

Category page:

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

Recommendations:

Recommendation id set on a div