Appearance

Dalton Pixel Installation Guide ​

Installing the Dalton Pixel allows you to track conversions, purchases, and custom events directly from your website. This guide explains how to install and use the Dalton Pixel across your site or specific pages.

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 your Dalton dashboard under
Settings → Installation → Dalton Pixel.

2. Add to Your Website ​

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

html
<!-- 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>

Share with Developer

If you don’t manage the site code directly, click "Share with Developer" in your Dalton dashboard.
This generates a shareable link containing your customer ID and ready-to-install script.

3. Verify Installation ​

After adding the snippet, go back to your Dalton dashboard and click "Verify Installation" to confirm that the pixel is working.

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 ​

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

converted ​

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

custom ​

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

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

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

html
<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>