> For the complete documentation index, see [llms.txt](https://docs.getpurpledot.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.getpurpledot.com/docs/shopify-stores/pre-order-tracking/custom-client-side-tracking-integration.md).

# Custom client side tracking integration

{% hint style="info" %}
This guide applies only when selling pre-orders through Purple Dot's own checkout.
{% endhint %}

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
  });
});
```