> ## Documentation Index
> Fetch the complete documentation index at: https://docs.datalyr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

> Add DATALYR tracking to your Webflow site in 2 minutes

Add DATALYR to your Webflow site to track visitors, conversions, and revenue from ads.

## Use Cases

**E-commerce Stores**
Track product views, cart additions, and purchases. See which Meta or Google ads drive sales.

**Lead Generation**
Capture form submissions and attribute leads back to campaigns. Track demo requests and newsletter signups.

**Portfolios & Agency Sites**
Track visitor behavior, traffic sources, and contact form conversions.

## Before You Start

* [ ] You have a DATALYR account
* [ ] You've created a workspace
* [ ] You have Editor access to your Webflow project

## Step 1: Get Your Tracking Code

1. Log in to your DATALYR dashboard
2. Go to **Settings → Tracking**
3. Copy your tracking script:

```html theme={null}
<script
  defer
  src="https://track.datalyr.com/dl.js"
  data-workspace-id="YOUR_WORKSPACE_ID">
</script>
```

## Step 2: Add to Webflow

1. Open your Webflow project
2. Click the **Settings** icon (gear) in the left sidebar
3. Go to the **Custom Code** tab
4. Scroll to **Head Code** section
5. Paste your DATALYR tracking script
6. Click **Save Changes**

## Step 3: Publish Your Site

Your tracking script is only added to the **published** site, not the Designer preview.

1. Click **Publish** in the top right
2. Select your domain
3. Click **Publish to selected domains**

## Step 4: Verify Tracking Works

1. Visit your published Webflow site in a new browser tab
2. Go back to your DATALYR dashboard
3. Click **Events** in the sidebar
4. You should see a `page_view` event within 10 seconds

If you see events, you're done! DATALYR is tracking.

## What Gets Tracked Automatically

Once installed, DATALYR automatically captures:

* Page views on every page
* Visitor IDs (persistent across sessions)
* UTM parameters from ad campaigns
* Ad click IDs (fbclid, gclid, ttclid)
* Referrer and traffic source
* Device and browser information

## Track Webflow Form Submissions

To track form submissions as conversion events, add this code to your form's success state:

1. Select your form in the Webflow Designer
2. Go to **Form Settings**
3. Add this to **Success Message** (use an Embed element):

```html theme={null}
<script>
  if (window.datalyr) {
    datalyr.track('form_submission', {
      form_name: 'Contact Form',
      page: window.location.pathname
    });
  }
</script>
```

Replace `'Contact Form'` with your actual form name.

## Track E-commerce Events (Webflow Ecommerce)

If you're using Webflow Ecommerce, track purchases:

1. Go to your **Order Confirmation** page
2. Add an **Embed** element
3. Paste this code:

```html theme={null}
<script>
  if (window.datalyr && window.Webflow && window.Webflow.commerce) {
    const order = window.Webflow.commerce.order;
    if (order) {
      datalyr.track('purchase', {
        order_id: order.orderId,
        revenue: order.total,
        currency: order.currency,
        items: order.purchasedItems.map(item => ({
          id: item.sku,
          name: item.name,
          price: item.price,
          quantity: item.count
        }))
      });
    }
  }
</script>
```

This sends purchase events to DATALYR with order details.

## Troubleshooting

**Not seeing events?**

Check that:

* Your tracking script is in the **Head Code** section (not Footer Code)
* You've **published** your site (tracking doesn't work in Designer preview)
* Your workspace ID is correct
* Ad blockers are disabled

**Events showing in test mode?**

Webflow staging sites work fine. Just make sure you published after adding the code.

**Form tracking not working?**

Make sure the script is in the form's **success state**, not the form itself. It only fires when the form is successfully submitted.

## Next Steps

<CardGroup cols={2}>
  <Card title="Verify Tracking" icon="check" href="/getting-started/installation/verify-tracking">
    Confirm events are coming through
  </Card>

  <Card title="Track Custom Events" icon="code" href="/sdks/web/custom-events">
    Track button clicks and interactions
  </Card>

  <Card title="Connect Integrations" icon="plug" href="/integrations/overview">
    Link Stripe, Meta Ads, Google Ads
  </Card>

  <Card title="View Your Dashboard" icon="chart-line" href="/features/dashboard">
    See your tracking data
  </Card>
</CardGroup>

## Need Help?

Can't get tracking working on Webflow? Check our [troubleshooting guide](/troubleshooting/tracking-not-working) or contact support.