Interacting with Depict Performance Client

The Depict Performance Client (DPC) SDK sends real-time events on product impressions, clicks, and purchases. For better recommendations and search performance, we advise including as much relevant data about the user and the product as possible when tracking user events. DPC provides an interaction API that sends information on users, users' events, and interactions on your site.

Depict Queue (DPQ) is the primary API for interacting with DPC. It sends additional data to DPC about users and their interactions on your site. After initializing DPC, DPQ also becomes available and is accessed by importing it from the @depict-ai/dpc package:

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

dpq("EVENT_NAME", "EVENT_DATA")

The dpq function takes two arguments:

• Event name: The name of the event sent to Depict.
• Event data: The corresponding value of this event.

DPQ events

DPQ events are directly integrated with DPC. They allow Depict to gather additional information about a user, the active market, and other user interactions.

The following table presents a list of all DPQ events, their descriptions, and the accepted data types for each event:

Configure an active market

For all Depict tracking events to run successfully, the market or locale must be present in the event request. We recommend setting the active market as soon as the page loads or whenever the market is updated.

Use the setMarket event to set the active market:

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

dpq("setMarket", "ACTIVE_MARKET")

Markup your Product Details Page

Whenever a user navigates to a Product Details Page (PDP) on your website, use DPQ to register the product ID of the associated product. Doing this helps Depict track the product discovery experience on your website alongside add-to-cart and purchase events made from the product details page.

To set the product ID:

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

dpq("setProductId", "PRODUCT_ID")

Track add-to-cart events on your PDP

By default, DPC automatically tracks add-to-cart events anywhere on your site by monitoring clicks on elements with the depict-add-to-cart class. However, you must manually call the trackAddToCartButton method if the autoObserve property was set to false when initializing DPQ.

The following snippet demonstrates using the trackAddToCartButton method to track add-to-cart events:

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

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

const addToCartButton = document.querySelector(".depict-add-to-cart");


dpc.trackAddToCartButton(addToCartButton);

Track purchase events

You can track when a user completes the checkout process and pays for a product by using the DPQ purchase event. The purchase event takes a JavaScript object containing details of the purchase as its second argument.

To send details of the purchase event to Depict:

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

 dpq("purchase", {
    transaction_id: "TRANSACTION_ID",
    products: [{ sku: "PRODUCT_SKU", price: 123, quantity: 4 }],
    currency: "EUR",
  });

📘

For accuracy, we recommend using our REST API to send details of purchase events from your backend. For more information, see Depict API reference.

Track authenticated users

For better product personalization, we recommend informing Depict of authenticated users on your website. You can do this by using the DPQ event to register the user ID of authenticated users. As a result, Depict can track and customize users' experiences across various devices and browsers rather than only relying on browser sessions.

Use the setUserId event to set the current user:

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

dpq("setUserId", "USER_ID")

Track browser sessions

If tracking events are sent to the Depict API from other sources than the performance client, such as server-to-server tracking, a common identifier needs to be set to match attribution between the different tracking sources. Set a shared browser session ID on DPC to be the same as the one used in the events you send directly to the API.

Use the setSessionId event to set the current browser session ID:

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

dpq("setSessionId", "SESSION_ID")