Custom client side tracking integration

This guide applies only when selling pre-orders through Purple Dot's own checkout.

Purple Dot dispatches several CustomEvent objects on the window object. These events can be used to track user interactions, monitor conversions, and integrate with analytics platforms like Google Analytics in a custom way.

To listen for these events, use the following pattern:

window.addEventListener('PurpleDot:<EventName>', (event) => {
  console.log('Event received:', event.detail);
  // Your custom logic here
});

PurpleDot:Ready

This is fired when the Purple Dot SDK is ready and initialized.

Example:

window.addEventListener('PurpleDot:Ready', () => {
  console.log('PurpleDot SDK is ready!');
});

PurpleDot:LearnMoreClicked

This is fired when a shopper clicks the "Learn More" link on the PDP.

This object contains some useful information:

• placementType - The type of placement

• instanceId - Unique identifier for this placement instance

• skuId - The SKU ID associated with the placement

• sku - The SKU object containing product information

• displayCurrency - The currency used for display

• releaseId - The release ID for this placement

Example:

window.addEventListener('PurpleDot:LearnMoreClicked', (event) => {
  console.log('Learn more clicked:', event.detail);

  // Send to GA4
  gtag('event', 'purple_dot_learn_more_clicked', {
    placement_type: event.detail.placementType,
    sku_id: event.detail.skuId,
    currency: event.detail.displayCurrency
  });
});

PurpleDot:AddToCart

This is fired when a product is added to the cart as a pre-order.

This object contains some useful information:

• skuId - Shopify's product variant ID of what got added to the cart

• internalSkuId - Purple Dot's own ID for the same, for internal tracking

• releaseId - The Waitlist ID for this product

• price - The price of the line item

• quantity - The quantity added to cart

Example:

window.addEventListener('PurpleDot:AddToCart', (event) => {
  console.log('Added to cart:', event.detail);

  // Send to GA4
  gtag('event', 'add_to_cart', {
    currency: 'USD', // You may need to determine this from context
    value: event.detail.price * event.detail.quantity,
    items: [{
      item_id: event.detail.skuId,
      item_name: 'Product', // You may need to get this from your product data
      quantity: event.detail.quantity,
      price: event.detail.price
    }]
  });
});

PurpleDot:RemoveFromCart

This is fired when line items are removed from the cart.

This object contains some useful information:

• lineItems - Array of line items in the cart

• shipping - Shipping information

• shippingAddress - Shipping address details

• email - Customer email

• total - Total cart value

• tax - Tax amount

• discountCode - Applied discount code

• checkoutState - Current state of checkout

Example:

window.addEventListener('PurpleDot:RemoveFromCart', (event) => {
  console.log('Removed from cart:', event.detail);

  // Send to GA4
  gtag('event', 'remove_from_cart', {
    currency: 'USD',
    value: event.detail.total,
    items: event.detail.lineItems
  });
});

PurpleDot:CheckoutLoaded

This is fired when the Purple Dot checkout interface is loaded.

This object contains some useful information:

• enableCombinedCart - Whether combined cart functionality is enabled

Example:

window.addEventListener('PurpleDot:CheckoutLoaded', (event) => {
  console.log('Checkout loaded:', event.detail);

  // Send to GA4
  gtag('event', 'purple_dot_checkout_loaded', {
    combined_cart_enabled: event.detail.enableCombinedCart
  });
});

PurpleDot:PreorderCheckoutStep

This is fired when a shopper progresses through a step in the pre-order checkout process.

This object contains some useful information:

• skuId - The SKU ID for the pre-order

• stepName - Name of the current step

• stepNumber - Number of the current step

• releaseId - The release ID for this pre-order

• lineItems - Array of line items

• shipping - Shipping information

• shippingAddress - Shipping address details

• email - Customer email

• total - Total order value

• tax - Tax amount

• discountCode - Applied discount code

Example:

window.addEventListener('PurpleDot:PreorderCheckoutStep', (event) => {
  console.log('Preorder checkout step:', event.detail);

  // Send to GA4
  gtag('event', 'purple_dot_preorder_checkout_step', {
    step_name: event.detail.stepName,
    step_number: event.detail.stepNumber,
    sku_id: event.detail.skuId,
    value: event.detail.total
  });
});

PurpleDot:PreorderCheckoutSubmitted

This is fired when a pre-order checkout form is submitted.

This object contains some useful information:

• skuId - The SKU ID for the pre-order

• releaseId - The Waitlist ID for this pre-order

Example:

window.addEventListener('PurpleDot:PreorderCheckoutSubmitted', (event) => {
  console.log('Preorder checkout submitted:', event.detail);

  // Send to GA4
  gtag('event', 'purple_dot_preorder_checkout_submitted', {
    sku_id: event.detail.skuId
  });
});

PurpleDot:PreorderCreated

This is fired when a pre-order is successfully created.

This object contains some useful information:

• reference - Pre-order reference number

• email - Customer email

• shippingAddress - Shipping address details

• lineItems - Array of line items

• total - Total order value

• shipping - Shipping information

• tax - Tax amount

• discountCode - Applied discount code

Example:

window.addEventListener('PurpleDot:PreorderCreated', (event) => {
  console.log('Preorder created:', event.detail);

  // Send to GA4
  gtag('event', 'purchase', {
    transaction_id: event.detail.reference,
    value: event.detail.total,
    currency: 'USD',
    items: event.detail.lineItems
  });
});