> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Card Tracking

> How to make sure DPC tracks your product cards correctly

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

We need to tell DPC about the product cards that you created using Depict data. Product cards rendered by Depict components (such as the [SearchPage](/js-ui-guide/search/adding-page) or [RecommendationSlider](/js-ui-guide/recommendations/slider)) will automatically have this attached. However, if you render product cards yourself, you need to add a data attribute to the product card.

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/\* | search\_result\_id | data-search-result-id |
| /v2/search/related, /v2/search/results | search\_result\_id | data-search-result-id |

This step enables DPC to track clicks on the product cards — including clicks on [add-to-cart buttons](/js-ui-guide/tracking/add-to-cart) 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.

```html Collection or category page (/v3/listings/*) theme={null}
<div data-product-listing-result-id="7ad3110d-7cd6-4352-83da-b93fa1bfe645">
  <!-- Product card -->
</div>
```

```html Recommendations (/v3/recommend/products) theme={null}
<div data-recommendation-id="59b344d9-bab9-488f-805b-e79a0e67a213">
  <!-- Product card -->
</div>
```

```html Search results (/v3/search/*) theme={null}
<div data-search-result-id="c1f0a6d2-3b5e-4a8f-9d21-6e4b7c0a9f13">
  <!-- Product card -->
</div>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.