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.

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.

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>;
};