This article will guide you through how to set up your Triple Whale Pixel for use with a Custom Sales Platform.

Prerequisites

Access to your website’s <head> HTML template
Basic familiarity with JavaScript
Your unique pixel snippet URL: https://app.triplewhale.com/attribution/settings/installation

Step 1: Add the Base Tracking Snippet (Required)

Locate the Pixel Snippet

Navigate to the Headless installation tab on the Attribution → Settings → Installation page and copy the base snippet.

Add to `<head>`

Install the snippet in the <head> of all site pages.

The snippet loads the Triple Pixel javascript asynchronously so it won’t affect your page load speed.

Verify installation:

Open any page with the snippet and open your browser’s console.

Type TriplePixelData and hit Enter. You should see the Pixel data object.

If undefined, ensure:

The script is within the <head> tag.
Any cached HTML is purged.

Step 2: Add a Purchase or Subscription Event (Required)

Add to `<head>` after the base snippet

To attribute a transaction and stitch it into the customer journey, you must trigger at least one of the following events:

purchase
NewSubscription

These events capture the front-end moment of transaction and enable attribution only when paired with a backend order record.

📘
Initial Signups vs. Renewals
If a customer signs up for a subscription during their initial purchase, you must trigger both a purchase event and a NewSubscription event. These represent two distinct actions: the transaction and the subscription creation.
For recurring renewals (rebills), no Pixel events are required. Since these happen without a web session, they should be sent via the Orders API, using the appropriate subscription_id to associate each order with the original subscription.

// Send both events if the subscription is created as part of the purchase flow

TriplePixel('purchase', {
  eventId: '<EVENT_ID>', //Optional
  email: '<USER_EMAIL>',
  phone: '<USER_PHONE>',
  firstName: '<FIRST_NAME>',
  lastName: '<LAST_NAME>',
  orderId: '<ORDER_ID>',
  cotkn: '<CUSTOM_TOKEN>',
  lineItems: ['<PRODUCT_ID1>', '<PRODUCT_ID2>'],
  address: { zip: '12345', city: 'City', countryCode: 'US', provinceCode: 'CA' }
});

TriplePixel('NewSubscription', {
  eventId: 'n65N65', // Optional - should match the eventID used when sending the same event to other platforms to assist in event deduplication
  email: '[email protected]',
  phone: '1234567',
  firstName: 'First',
  lastName: 'Last',
  orderId: 'order_0000',
  subscriptionId: 'sub_0123',
  cotkn: '121212121212', // Additional token/data relevant to your system
  lineItems: ['3333333', '555555'], // The product IDs or SKUs
  address: {
    zip: '67676',
    city: 'Sterling',
    countryCode: 'US',
    provinceCode: 'KS'
  }
});

🚧
Attribution Requires Both Pixel and Order Data
Triggering a purchase or NewSubscription event alone will not initiate attribution. Triple Whale must also receive a matching order record to complete the attribution process:

For Shopify and other native platforms, the order is received automatically via webhook.

For Custom Sales Platforms, you must send the order via the Orders API endpoint.

To maximize attribution accuracy, we recommend sending the Pixel event before the order is submitted via API. While sending the order first still works, it may increase the likelihood of orders that cannot be matched to a Pixel event—resulting in fewer attributed conversions.

Verify installation:

A properly configured event will appear in the Network tab when triggered. If not, check the console for errors or inspect the page source to verify the implementation.
Contact the TW SE team for further support: [email protected]

Step 3: Capture Page Load Events

Add to `<head>` after the base snippet

To automatically record when a visitor views a product page, update the TriplePixelData object with product details and fire a pageLoad event immediately after the base snippet:

<script>
window.TriplePixelData = window.TriplePixelData || {};
window.TriplePixelData.product = {
  id: '<PRODUCT_ID>',         // e.g., '48269676624115'
  name: '<PRODUCT_NAME>',     // e.g., 'Top Knot Messy Bun Ponytail Holder'
  price: '<PRICE>',           // e.g., '42.99'
  variant: '<VARIANT_ID>'     // e.g., '8218652206806'
};
window.TriplePixelData.search = '<SEARCH_TERM>';         // e.g., 'braids'
window.TriplePixelData.collection = '<COLLECTION_ID>';   // e.g., '012345678'

TriplePixel('pageLoad', {
  product: window.TriplePixelData.product,
  search: window.TriplePixelData.search,
  collection: window.TriplePixelData.collection
});
</script>

Step 4: Capture Visitor Contact Info

Add to `<head>` after the base snippet

To tie visitor actions to real leads, fire a Contact event whenever you collect an email or phone number.

<script>
(function TP() {
  const email = "<DYNAMIC_EMAIL>";  // Insert dynamic customer email
  if (!email || !window.TriplePixel) {
    setTimeout(TP, 400);
    return;
  }
  TriplePixel('Contact', { email: email });
})();
</script>

Optional Variations:

TriplePixel('Contact', { email: '[email protected]' });
TriplePixel('Contact', { phone: '123-456-7891' });
TriplePixel('Contact', { email: '[email protected]', phone: '123-456-7891' });

Best Practice: Place this snippet anywhere customer contact info is submitted (e.g., signup forms, newsletter pop‑ups).

Step 5: Track Additional Standard Events

Add to `<head>` after the base snippet

Add to Cart

TriplePixel('AddToCart', {
  item: '<PRODUCT_ID>',      // e.g., '4428522618989'
  q: <QUANTITY>,             // e.g., 1
  v: '<VARIANT_ID>',         // e.g., '9898162258244'
  // Optional: cart token
  token: '<CART_TOKEN>'
});

Page Views

Automatic: Tracked on snippet load.
Single Page Manual: Call TriplePixel('pageLoad') or include context (see SPA section).

Checkout Funnel (Recommended)

checkoutStarted
contactSubmitted
addressSubmitted
shippingSubmitted
paymentSubmitted

TriplePixel('checkoutStarted', {
  eventId: '<EVENT_ID>', //Optional
  email: '<USER_EMAIL>',
  phone: '<USER_PHONE>',
  firstName: '<FIRST_NAME>',
  lastName: '<LAST_NAME>',
  orderId: '<ORDER_ID>',
  cotkn: '<CUSTOM_TOKEN>',
  lineItems: ['<PRODUCT_ID1>', '<PRODUCT_ID2>'],
  address: { zip: '12345', city: 'City', countryCode: 'US', provinceCode: 'CA' }
});

TriplePixel('contactSubmitted', {
  eventId: 'n65N65', // Optional - should match the eventID used when sending the same event to other platforms to assist in event deduplication
  email: '[email protected]',
  phone: '1234567',
  firstName: 'First',
  lastName: 'Name',
  order_id: 'order_0000',
  cotkn: '121212121212', // Additional token/data relevant to your system
  lineItems: ['3333333', '555555'], // The product IDs or SKUs
  address: {
    zip: '67676',
    city: 'Sterling',
    countryCode: 'US',
    provinceCode: 'KS'
  }
});

TriplePixel('addressSubmitted', {
  eventId: 'n65N65', // Optional - should match the eventID used when sending the same event to other platforms to assist in event deduplication
  email: '[email protected]',
  phone: '1234567',
  firstName: 'First',
  lastName: 'Name',
  order_id: 'order_0000',
  cotkn: '121212121212', // Additional token/data relevant to your system
  lineItems: ['3333333', '555555'], // The product IDs or SKUs
  address: {
    zip: '67676',
    city: 'Sterling',
    countryCode: 'US',
    provinceCode: 'KS'
  }
});

TriplePixel('shippingSubmitted', {
 eventId: 'n65N65', // Optional - should match the eventID used when sending the same event to other platforms to assist in event deduplication
 email: '[email protected]',
 phone: '1234567',
 firstName: 'First',
 lastName: 'Name',
 order_id: 'order_0000',
 cotkn: '121212121212', // Additional token/data relevant to your system
 lineItems: ['3333333', '555555'], // The product IDs or SKUs
 address: {
   zip: '67676',
   city: 'Sterling',
   countryCode: 'US',
   provinceCode: 'KS'
 }
});

TriplePixel('paymentSubmitted', {
eventId: 'n65N65', // Optional - should match the eventID used when sending the same event to other platforms to assist in event deduplication
  email: '[email protected]',
  phone: '1234567',
  firstName: 'First',
  lastName: 'Name',
  order_id: 'order_0000',
  cotkn: '121212121212', // Additional token/data relevant to your system
  lineItems: ['3333333', '555555'], // The product IDs or SKUs
  address: {
    zip: '67676',
    city: 'Sterling',
    countryCode: 'US',
    provinceCode: 'KS'
  }
});

These lifecycle events help capture the complete checkout journey and power accurate attribution.

You can customize the parameters passed based on your data requirements, though the fields above are commonly used. Key fields include the eventId (for cross-platform event referencing) and contact details (email or phone) to enable Triple Whale to attribute future actions to the specific subscriber.

Step 6: Track Custom Events

Add to `<head>` after the base snippet

With custom events, you can track any type of event that is relevant for your business. Custom events can have whatever name you choose, and support passing any custom property that is relevant for that event.

TriplePixel('custom', 'scheduleDemo', {
  'action': 'booked_demo',
  'version': '1.0',
  'shop': 'example-shop.myshopify.com',
  'email': '[email protected]',
  'firstName': 'John',
  'lastName': 'Doe',
  'phone': '+1-555-123-4567'
});

Only the event name (scheduleDemo in the example) is required. All parameters/fields are optional and can be whatever you'd like to track with the event.

Custom Events can also be marked as ‘conversion events’ in your settings to enable attribution for these events.

For more information on setting up and tracking custom events, see the Tracking Custom Events knowledge base article.

Step 7: Add Page Context

Enhance tagging by including product or search context in the TriplePixelData object. Only one product and one search value per page.

Product Pages (Recommended)

window.TriplePixelData.product = {
  id: '<PRODUCT_ID>',
  name: '<PRODUCT_NAME>',
  price: '<PRICE>',
  variant: '<VARIANT_ID>'
};

Search Results

window.TriplePixelData.search = '<SEARCH_TERM>';

Single Page Application (SPA) Support

Option A: Context with Manual Page Loads

TriplePixel('pageLoad', {
  product: { id: '123', name: 'Item', price: '9.99', variant: '456' },
  search: 'query',
  collection: '789'
});

Option B: Update Data Object

window.TriplePixelData.product = { /* ... */ };
TriplePixel('pageLoad');
// Then reset TriplePixelData to avoid stale context

Step 8: Tracking Consent

TriplePixel('trackingConsent', false); // Disable
TriplePixel('trackingConsent', true);  // Enable

Step 9: Advanced Install Methods

Tag Managers: Pixel works with most tag management solutions. Refer to your tag manager’s docs and verify via console.
Mobile Websites: If separate from desktop, install on both to capture mobile traffic.

Testing & Troubleshooting

Verify TriplePixelData in console.
Check network requests for TriplePixel calls.
Purge any caches or CDN layers if events are missing.

Prerequisites

Step 1: Add the Base Tracking Snippet (Required)

Locate the Pixel Snippet

Add to <head>

Verify installation:

Step 2: Add a Purchase or Subscription Event (Required)

Add to <head> after the base snippet

Initial Signups vs. Renewals

Attribution Requires Both Pixel and Order Data

Verify installation:

Step 3: Capture Page Load Events

Add to <head> after the base snippet

Step 4: Capture Visitor Contact Info

Add to <head> after the base snippet

Optional Variations:

Step 5: Track Additional Standard Events

Add to <head> after the base snippet

Add to Cart

Page Views

Checkout Funnel (Recommended)

Step 6: Track Custom Events

Add to <head> after the base snippet

Step 7: Add Page Context

Product Pages (Recommended)

Search Results

Single Page Application (SPA) Support

Option A: Context with Manual Page Loads

Option B: Update Data Object

Step 8: Tracking Consent

Step 9: Advanced Install Methods

Testing & Troubleshooting

Add to `<head>`

Add to `<head>` after the base snippet

Add to `<head>` after the base snippet

Add to `<head>` after the base snippet

Add to `<head>` after the base snippet

Add to `<head>` after the base snippet