Getting Started with Depict Performance Client

NOTE: NOT PUBLIC BECAUSE DUPLICATE OF doc:performance-client ????

Use Depict Performance Client (DPC) to track and measure user interactions and the effectiveness of product recommendations and search in your store. This quickstart shows you how to set up and integrate DPC in your app.

Prerequisites

Before proceeding, make sure you have Depict Recommendations on your application. If you haven't already, set up Depict Recommendations.

📘

DPC is a client-side performance tracking software and should only be implemented client-side for effectiveness.

Installation

Loading the Depict script from a CDN (content delivery network) automatically includes and initializes DPC in your application. The DPC package is also available in the npm and yarn directories. To install DPC:

npm i @depict-ai/dpc

yarn add @depict-ai/dpc

📘

If you loaded the Depict script from a CDN, skip to Track product cards.

Initialization

Initializing DPC attaches an observer that watches the DOM for elements with a data-recommendation_id attribute. Once found, another observer watches for changes in the position of these elements relative to the viewport and triggers a Depict event once detected.

Attach an observer by creating a new instance of the DPC object and passing your merchant identifier and your preferred configuration object as arguments:

import {DPC} from "@depict-ai/dpc

new DPC("MERCHANT_ID", {market: "MARKET_IDENTIFIER"})

import { DPC } from "@depict-ai/dpc";

/* We recommend initializing DPC in your app's root component.*/
const App = () => {
  useEffect(() => {
    new DPC("MERCHANT_ID", { market: "MARKET_IDENTIFIER" });
  }, []);

  return (
  <div className="App">
    ...
   </div>
  );
};

// pages/_app.tsx

import "../styles/globals.css";

/**
 * Initialize DPC as a dynamic import in a Next.js application
 * to prevent DPC from loading and running on the server.
 */

(async function initDepictTracking() {
  if (typeof window !== "undefined") {
    const { DPC } = await import("@depict-ai/dpc");
    new DPC("[MERCHANT_ID]", { market: "MARKET_IDENTIFIER" });
  }
})();

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

The first argument is your Merchant Identifier which is the unique identifier that gives you access to Depict's APIs and SDK. The second argument is the configuration object. The following table shows configuration object parameters and their descriptions:

📘

If the market value is unknown at the point of initializing DPC, you can initialize DPC without the configuration object as a second argument. However, you must provide the market identifier or locale once it becomes available. For more information, see Configuring an active market.

Track Product Cards

Upon initialization, DPC observes DOM elements with a data-recommendation_id attribute. Add this attribute to the product cards on your website to send events to Depict whenever your website shows a product based on Depict Recommendations. The following example shows a sample product card with the data-recommendation_id attribute:

<div class="product-card" data-recommendation_id="RECOMMENDATION_ID">
  <img src="...">
  <h2>T-shirt</h2>
  <span>€200</span>
</div>

DPC automatically tracks impressions and clicks on product recommendations on your site. You can also set up DPC to track add-to-cart events on product recommendations cards by including the depict-add-to-cart class on the DOM element that handles add-to-cart events. The layout you choose depends entirely on your site's user interface. For example, here is a sample product card with an add-to-cart button within the product card:

<div class="product-card" data-recommendation_id="RECOMMENDATION_ID">
  <img src="...">
  <h2>T-shirt</h2>
  <span>€200</span>
  <button class="depict-add-to-cart">Add to cart</button>
</div>

Track Product Recommendations

By default, DPC automatically tracks product recommendations by monitoring elements with the data-recommendation_id attribute. You can set autoObserve to false when you want DPC to only track specific elements on the DOM. If autoObserve is false, you must manually call the trackRecommendationCard method on each element to be tracked. The method accepts the HTML element to track as its argument. The element must also have the data-recommendations_id attribute.

The following code snippets demonstrate using the trackRecommendationCard method to track product recommendations:

import { DPC } from "@depict-ai/dpc";

const dpc = new DPC("MERCHANT_ID", {market: "MARKET_IDENTIFIER", autoObserve: false });

const recommendationCard = document.querySelector(
  "#recommendation-card"
);

dpc.trackRecommendationCard(recommendationCard);

import { DPC } from "@depict-ai/dpc";

const App = () => {
 const recommendationEl = useRef();

 useEffect(() => {
   const dpc = new DPC("MERCHANT_ID", {market: "MARKET_IDENTIFIER", autoObserve: false });

   dpc.trackRecommendationCard(recommendationEl.current);
    
 }, []);

 return (
  <div id="recommendation-card" ref={recommendationEl} data-recommendation_id="RECOMMENDATION_ID">
    ...
  </div>
 );
};

📘

Calling the trackRecommendationCard method on product cards automatically tracks add-to-cart events within the product cards. However, you must configure Depict to track add-to-cart events outside this recommendations card. For more information, see Tracking add-to-cart events on your product details page.

Log and debug DPC events

DPC monitors the DOM for user interaction events and automatically sends an event to Depict once this occurs. These events are suppressed by default. However, you may opt to show these events to gain insights into DPC's internals.

To view event logs from DPC, run the following command in your browser console:

localStorage.debug = true