Pre-order Tracking

Client side tracking

The Purple Dot SDK can automatically forwarding events to various product analytics, ad and order tracking platforms if your store uses the Purple Dot init script introduced here.

You can activate these integrations from the Integration settings page in the Merchant Portal.

Google Analytics (via Google Tags)

If your store has Google tags enabled in the theme and you enabled the Google Analytics integration in the Purple Dot portal, then the Purple Dot SDK will forward the purchase event to Google Analytics.

The purchase event that PurpleDot sends is identical to the data sent by Shopify's native Google Analytics integration.

send_to: <the provided Measurement ID>,
transaction_id: <Purple Dot pre-order reference>,
value: <total pre-order amount>,
currency: <currency shopper paid in>,
tax: <total tax>,
shipping: <total shipping cost>,
items: event.lineItems.map((lineItem) => ({
  id: <line item product ID>,
  name: <line item product name>,
  brand: <your brand>,
  category: undefined,
  coupon: <any discount code that was applied>,
  price: <line item price>,
  quantity: <how many units of this line item>,
  variant: <line item SKU>,
  purchase_type: 'pre-order' | 'in-stock'
})),
purchase_type: 'Pre-order',

purchase_type is a custom attribute. To see it, an event-scoped custom dimension has to be created in GA.

Google Ads (via Google Tags)

If your store has Google tags enabled in the theme and you enabled the Google Ads integration in the Purple Dot portal, then the Purple Dot SDK will forward the conversion event to Google Ads.

send_to: <the provided Measurement ID>,
value: <total pre-order amount>,
currency: <currency shopper paid in>,
transaction_id: <Purple Dot pre-order reference>,

Meta Pixel

If your store has the Meta Pixel enabled in the theme and you enabled the Meta Pixel integration in the Purple Dot portal, then the Purple Dot SDK will forward the Purchase

currency: <currency shopper paid in>,
value: <total pre-order amount>,
content_type: 'product',
content_ids: <list of SKU ids in this pre-order>

and Preorder

currency: <currency shopper paid in>,
value: <total pre-order amount>,
content_type: 'product',
content_ids: <list of SKU ids in this pre-order>

events.

TikTok Pixel

If your store has TikTok Pixel enabled in the theme and you enabled the TikTok Pixel integration in the Purple Dot portal, then the Purple Dot SDK will forward the PlaceAnOrder event.

content_type: 'product',
quantity: <how many line items in this pre-order>,
content_id: <Purple Dot pre-order reference>,
currency: <currency shopper paid in>,
value: <total pre-order amount>,

Yotpo

If your store has Yotpo tracking enabled in the theme and you enabled the Yotpo integration in the Purple Dot portal, then the Purple Dot SDK will forward order information to Yotpo.

source: 'pixel_v2',
platform: 'shopify',
orderId: <Purple Dot pre-order reference>,
orderNumber: <Purple Dot pre-order reference>,
orderName: <Purple Dot pre-order reference>,
orderAmount: <total pre-order amount>,
orderCurrency: <currency shopper paid in>,

Northbeam

If your store has Northbeam tracking enabled in the theme and you enabled the Northbeam integration in the Purple Dot portal, then the Purple Dot SDK will trigger firePurchaseEvent to send transaction information to Northbeam.

id: <Purple Dot pre-order reference>
totalPrice: <total pre-order amount>,
shippingPrice: <total shipping cost>,
taxPrice: <total tax>,
coupons: <discount code>,
currency: <currency shopper paid in>,
lineItems: [
   {
       productId: <line item product ID>,
       variantId: <line item variant ID>,
       productName: <line item name>,
       variantName: <line item SKU>,
       price: <line item price>,
       quantity: <how many units of this line item>
   }
]

Custom integration

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 4.

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

Server side tracking

Klaviyo

If you have enabled Klaviyo tracking from the Integration settings page in the Merchant Portal, then Purple Dot will send the Placed Pre-Order event to your Klaviyo project.

type: 'event',
attributes: {
  profile: {
    data: {
      type: 'profile',
      attributes: {
        email: <shopper's email address>,
        first_name: <shopper's first name>,
        last_name: <shopper's last name>,
        location: {
          address1: <first line of shipping address>,
          address2: <second line of shipping address>,
          city: <shipping address city>,
          region: <shipping address region>,
          country: <shipping address country>,
          zip: <shipping address zip>,
        },
        phone_number: <shopper's phone number>,
      },
    },
  },
  metric: {
    data: {
      type: 'metric',
      attributes: {
        name: <as configured in the Purple Dot dashboard>,
      },
    },
  },
  properties: {
    OrderId: <Purple Dot pre-order reference>,
    ItemNames: [ProductName],
    Items: [{
      Cancelled: <if this line item is now cancelled>,
      ProductName: <name of the product>,
      ProductID: <external ID of this product>,
      VariantID: <external ID of the specific variant purchased>,
      SKU: <sku code of the specific variant purchased>,
      Quantity: <how many units were purchased>,
      ItemPrice: <unit price>,
      RowTotal: <line item total>,
      ShippingGroupID: <Purple Dot ID of the shipping group for this line item>,
    }],
    ShippingGroups: [{
      ShippingGroupID: <Purple Dot ID of this shipping group>,
      Title: <shipping gropu name>,
      Code: <shipping group code>,
      ItemPrice: <shipping group price>,
      RowTotal: <shipping group total>,
    }],
    Discounts: [{
      Type: <type of discount used>,
      Code: <discount code>,
      Amount: <total amount off>,
    }],
  },
  value: <total pre-order amount>,
  value_currency: <currency shopper paid in>,
  time: <date and time this pre-order was placed>,
  unique_id: <Purple Dot pre-order reference>,
}

Converge Pixel

If you have enabled Converge tracking from the Integration settings page in the Merchant Portal, then Purple Dot will send the following event (with your desired event name) to your converge account:

event_name:
  '<Your custom event>',
distinct_id: [`urn:email:<Shopper's email>`],
gateway: 'Purple Dot',
properties: {
  id: <Purple Dot pre-order reference>,
  total_price: <total pre-order amount>,
  total_tax: <total pre-order tax amount>,
  total_shipping: <total pre-order shipping amount>,
  total_discount: <total pre-order discount amount>,
  currency: <pre-order currency>,
  coupon: <pre-order discount coupon>,
  items: <Array{
    product_id: <line-item product ID>,
    variant_id: <line-item variant ID>,
    name: <line-item product name>,
    variant_name: <line-item variant name>,
    sku: <line-item variant SKU>,
    price: <line-item price>,
    currency: <pre-order currency>,
    quantity: <line-item quantity>,
    discount: <line-item discount amount>,
  }>,
  profile_properties: {
    $email: <Shopper's email>,
    $phone_number: <Shopper's phone number>,
    $city: <Shopper's city>,
    $state: <Shopper's state>,
    $zip_code: <Shopper's zip code>,
    $countryCode: <Shopper's country code>,
    $first_name: <Shopper's first name>,
    $last_name: <Shopper's last name>,
  }
}

Braze

When a shopper places a pre‑order, Purple Dot sends one POST /users/track request that:

1. Upserts marketing consent to the shopper’s profile ( attributes).

2. Logs the pre_order_placed event (events).

3. Emits a purchase row per line‑item (purchases).

---

{
  "attributes": [
    {
      "email": "<shopper_email>",
      "has_email_marketing_consent": <true|false>,
      "has_sms_marketing_consent": <true|false>
    }
  ],
  "events": [
    {
      "email": "<shopper_email>",
      "name": "pre_order_placed",
      "time": "<ISO8601_timestamp>",
      "properties": {
        "order_id": "<pre_order_reference>",
        "source": "Purple Dot",
        "shipping": {
          "address": {
            "first_name": "<first_name>",
            "last_name": "<last_name>",
            "address1": "<address_line_1>",
            "address2": "<address_line_2>",
            "city": "<city>",
            "region": "<state_or_region>",
            "country": "<country_code>",
            "postal_code": "<postal_code>",
            "phone_number": "<phone_number>"
          }
        },
        "total_price":  { 
            amount: <pre-order total price>,
            currency: <price currency> 
        },
        "discounts": <array_of_discount_objects>,
        "items": [{
            product_id: <line-item product ID>,
            product_name: <line-item product name>,
            variant_id: <line-item variant ID>,
            sku: <line-item variant SKU>,
            quantity: <line-item quantity>,
            item_price: <price of single item>,
            row_total: <total price of row>, 
        }]
      }
    }
  ],
  "purchases": [{
    email: "<shopper_email>",
    time: "<ISO8601_timestamp>",
    currency: <pre_order currency>,

    product_id:  <line-item product ID>,
    product_name: <line-item product name>,
    variant_id: <line-item variant ID>,
    sku:<line-item variant SKU>,
    quantity:  <line-item quantity>,
    price: <price of single item>,
  }]
}