---
description: "Install the Dalton Pixel to track conversions, purchases, and custom events directly from your website."
---

# 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

::: tip Trying to install on a Shopify store?
Installation instructions can be found on <PreserveCustomerIdLink href="/advanced/shopify-pixel">our Shopify installation guide</PreserveCustomerIdLink>
:::

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

<InjectCustomerId id="xxxxx">

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

</InjectCustomerId>

::: tip 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>
```