Getting Started with Depict Performance Client
Learn how to use 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:
Option | Type | Default | Description |
---|---|---|---|
market | string | undefined | This specifies the initial market identifier or locale present when the page loads. You must set it when initializing DPC. |
autoObserve (optional) | boolean | true | Automatically watches the DOM for elements with the data-recommendation_id attribute. If false , you must call trackRecommendationCard manually. |
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
Updated 19 days ago