Interacting with Depict Performance Client
Discover ways to interact with DPC using Depict Queue events.
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:
Event name | Type | Event data description |
---|---|---|
setMarket | string | Sets the currently active market or locale. This value is necessary for all Depict tracking events. |
setProductId | string | Sets the product id of the associated product when a user views the product details page. |
purchase | object | Sends the details of the purchase event to Depict after a user completes checkout. |
setUserId | string | Sets the userId for a logged-in user for more personalized recommendations. |
setSessionId | string | Sets the sessionId for the current browser to match with tracking events sent from the server. |
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")
Updated about 1 month ago