> ## 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 Page Tracking

> How to make sure DPC tracks your Product Details Page (PDP) views correctly.

<Warning>
  This page does not apply to installs made in 2025 or later of the Depict Shopify apps
</Warning>

<Note>
  For attribution of purchases to work properly, the product ID used in
  `setProductId` and `addToCart` events must be the same type of id that is
  returned in the displays by our API as `product_id`. For an example of valid
  product IDs, see the bottom table on the "Tracking status" tab on
  [app.depict.ai](https://app.depict.ai).
</Note>

Every time after navigating to a page representing a product on your website, you need to send a `setProductId` event to register which product id is currently viewed.

```ts theme={null}
import { usePerformanceClient } from "@depict-ai/react-ui";

const ProductPage = ({ productId }) => {
  const { dpc } = usePerformanceClient();

  useEffect(() => {
    dpc.setProductId(productId);
  }, [dpc, productId]);

  return <div>Showing product {productId}</div>;
};
```