trackPdp() is used to track events on a PDP (Product Details Page) including add-to-cart and product view events. This data will be used for analytics and for powering XGen’s AI predictions.
This function will cover both trackProductView() and trackProductAdd() functions with one call.
idMust match exactly 1 to 1 with aprod_codein the XGen catalog. If these do not match exactly, product tracking and predictions will not function properly.You can check to ensure they are the same by going to the XGen platform and going to the “Catalogs” section. Select the catalog you are tracking and search for the id you are passing into the event.
Syntax
trackPdp(productInfo);
trackPdp(productInfo, options);Parameters
productInfo
type: object
description: Contains information for the product to be tracked.
keys:
id
type: string
description: The unique prod_code for the PDP page’s product. Make sure this ID matches exactly 1 to 1 with a prod_code in XGen’s catalog. (see warning at the top for more info)
name
type: string
description: The name of the PDP page’s product.
price
type: number or string
description: The price of the PDP page’s product. Make sure this matches the price that the user will pay for that product. If the product is on sale, the marked down price should be used.
currency
type: string (currency code)
description: The currency code that will be used when purchasing the PDP’s product. Make sure it is a three letter currency code in the format of 'USD', 'EUR', 'JPY', etc.
options (optional)
type: object
description: Used to add additional functionality to the PDP tracking.
keys:
selector
type: string (query selector)
description: The query selector for an element that is used to add an item to the user’s cart. When that element is clicked, a product add event will be sent. Note: this will listen to all elements that match the selector value, not just the first.
element
type: element object
description: The element that is used to add an item to the user’s cart. When that element is clicked, a product add event will be sent.
Return Value
This function has no return value.
Examples
Track a PDP page without add-to-cart
In this example, we get the product info from a global variable and track it using the function. Product add events will not be tracked since there are no options passed in. The currency is also hard coded to 'USD' you will want to make sure to update this with the currency on the page.
// Import the integration from the 'installation' step
import { integration } from './xgenSdkIntegration';
// Get product info
const productInfo = window.productInfo;
// Track the PDP page
integration.trackPdp({
id: productInfo.sku,
name: productInfo.name,
price: productInfo.price,
currency: 'USD'
});Track a PDP page with a selector
In this example, we get the product info from a global variable and track it using the function. It is also listening for product add events when the user clicks on an element that matches the selector. The currency is also hard coded to 'USD' you will want to make sure to update this with the currency on the page.
// Import the integration from the 'installation' step
import { integration } from './xgenSdkIntegration';
// Get product info
const productInfo = window.productInfo;
// Track the PDP page
integration.trackPdp({
id: productInfo.sku,
name: productInfo.name,
price: productInfo.price,
currency: 'USD'
}, { selector: '.addToCart' });Track a PDP page with an element
In this example, we get the product info from a global variable and track it using the function. It is also listening for product add events when the user clicks on the element that is passed in. The currency is also hard coded to 'USD' you will want to make sure to update this with the currency on the page.
// Import the integration from the 'installation' step
import { integration } from './xgenSdkIntegration';
// Get product info
const productInfo = window.productInfo;
// Get add-to-cart button
const atcBtn = document.querySelector('.addToCart');
// Track the PDP page
integration.trackPdp({
id: productInfo.sku,
name: productInfo.name,
price: productInfo.price,
currency: 'USD'
}, { element: atcBtn });