Track purchases: other sites

The Dalton Script runs your tests. The Dalton Pixel reports purchases, conversions and custom events where the script can't see them, such as your order confirmation page.

---

Installation Overview

Dalton Pixel works on any platform (React, Shopify, Webflow, Framer, WordPress, etc.).
Installation involves adding a JavaScript snippet to your pages.

You can install it:

• Sitewide – Measure all visitor activity across your entire website
• Per Page – Track events only on specific landing or checkout pages

---

Installation Instructions

Trying to install on a Shopify store?

Installation instructions can be found on our Shopify installation guide

1. Get Your Pixel Snippet

Locate your unique Pixel snippet in Dalton under
Connectors → Tracking → Dalton Pixel → Other stores.

---

2. Add to Your Website

Paste the following snippet right before the closing </body> tag on each page where you want tracking active.

<!-- DALTON PIXEL -->
<script>
const customerId = {{customerId}} // Replace with your Customer id
let script = document.createElement('script')
script.setAttribute('src', `https://cdn.getdalton.com/pixel/${customerId}.min.js?customer_id=${customerId}`)
document.body.appendChild(script)
</script>

---

3. Verify Installation

After adding the snippet, go back to Connectors and confirm the Dalton Pixel row shows as Installed, with purchases counted over the last 7 days.

---

Event Tracking Examples

Once the pixel is installed, you can start tracking conversions, purchases, and other key events using Dalton’s JavaScript API. Currently, there are 2 built-in events, but you can always send custom events.

purchased

dalton?.fn && dalton.fn.purchased({value: 1, currency: 'eur'})

converted

dalton?.fn && dalton.fn.converted({value: 1, currency: 'eur'})
// or
dalton?.fn && dalton.fn.converted()

custom

dalton?.fn && dalton.fn.event('my-custom-event', {your: 'event data', here: 1234 })

1. Simple Conversion

Use this for basic actions like newsletter signups or button clicks.

<script>
document.querySelector('#newsletter-signup').addEventListener('submit', () => {
    dalton?.fn && dalton.fn.converted()
})
</script>

---

2. Form Submission with Data

Pass transaction values or metadata directly into Dalton for precise tracking.

<script>
document.querySelector('#checkout-form').addEventListener('submit', (e) => {
    const formData = new FormData(e.target)
    dalton?.fn && dalton.fn.purchased({
        value: parseFloat(formData.get('total')),
        currency: formData.get('currency')
    })
})
</script>

---

3. Async Event with API Response

Track events after confirming a successful API response.

<script>
document.querySelector('#payment-form').addEventListener('submit', async (e) => {
    e.preventDefault()
    const formData = new FormData(e.target)
    
    const response = await fetch('/api/process-payment', { method: 'POST', body: formData })
    const data = await response.json()
    
    if (data.success) {
        dalton?.fn && dalton.fn.purchased({
            value: data.amount,
            currency: data.currency
        })
    }
    else {
        dalton?.fn && dalton.fn.event('customevent', { customer_property: 'abc' })
    }
})
</script>