trackProductAdd()

Prev Next

trackProductAdd() is used to listen when a product has been added to cart. This functions by listening for clicks on an element. This data will be used for analytics and for powering XGen’s AI predictions.

id Must match exactly 1 to 1 with a prod_code in 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

trackProductAdd(productInfo);

Parameters

productInfo

type: object
description: Contains information for the product to be tracked.
keys:

id

type: string
description: The unique prod_code for the product being added to cart. 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 product being added.

price

type: number or string
description: The price of the product being added. 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 product that is being added. Make sure it is a three letter currency code in the format of 'USD', 'EUR', 'JPY', etc.

Return Value

This function has no return value.

Examples

Track product-add on element(s) using a selector

In this example, we get the product info from a global variable and track that information when the user clicks on an element that matches the provided 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;

// Set up listener to track PDP
document.querySelector('.addToCart', () => {
  // Track the PDP page
  integration.trackProductAdd({
    id: productInfo.sku,
    name: productInfo.name,
    price: productInfo.price,
    currency: 'USD'
  });
});