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

# Installation Overview

> Add DATALYR tracking to your website in minutes

Install DATALYR on your website to start tracking visitors, conversions, and revenue.

## How Installation Works

DATALYR uses a lightweight JavaScript snippet that you add to your website's `<head>` section. Once installed, it automatically:

* Tracks page views and sessions
* Captures UTM parameters and ad click IDs
* Identifies returning visitors
* Sends events to your dashboard in real time

## Installation Methods

Choose the method that matches your platform:

### No-Code Platforms

<CardGroup cols={2}>
  <Card title="Webflow" icon="w" href="/getting-started/installation/platforms/webflow">
    Add the tracking script to your Project Settings. Takes 2 minutes.
  </Card>

  <Card title="WordPress" icon="wordpress" href="/getting-started/installation/platforms/wordpress">
    Paste the script in your theme's header or use a plugin. Takes 3 minutes.
  </Card>

  <Card title="Shopify (App Store)" icon="shopify" href="/getting-started/installation/platforms/shopify-app-store">
    Install from the Shopify App Store. Easiest method. Takes 5 minutes.
  </Card>

  <Card title="Shopify (Manual)" icon="code" href="/getting-started/installation/platforms/shopify-manual">
    Add manually to your theme. For custom setups.
  </Card>

  <Card title="Framer" icon="figma" href="/getting-started/installation/platforms/framer">
    Add as a custom code component in Site Settings. Takes 2 minutes.
  </Card>
</CardGroup>

### Code-Based Platforms

<CardGroup cols={2}>
  <Card title="Custom HTML" icon="code" href="/getting-started/installation/platforms/html">
    Add the script tag directly to your site's HTML. Works with any static site.
  </Card>

  <Card title="Next.js" icon="react" href="/getting-started/installation/platforms/nextjs">
    Add to your root layout or \_app file. Supports App Router and Pages Router.
  </Card>
</CardGroup>

## What You'll Need

Before installing, make sure you have:

* Your DATALYR workspace ID (found in Settings → Tracking)
* Access to edit your website's code or settings
* About 5 minutes

## The Tracking Script

Your tracking script looks like this:

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

**Important Notes:**

* The `defer` attribute loads the script without blocking your page
* Replace `YOUR_WORKSPACE_ID` with your actual workspace ID from the dashboard
* The script is under 15KB and loads asynchronously

## Installation Steps

1. **Get your tracking code** from Settings → Tracking in your DATALYR dashboard
2. **Choose your platform** from the guides above
3. **Add the script** to your site's `<head>` section
4. **Verify tracking works** by visiting your site and checking for events in your dashboard

## After Installation

Once the script is installed:

**Verify Tracking**
Visit your website and check your DATALYR dashboard. You should see a `page_view` event within seconds.

[Learn how to verify →](/getting-started/installation/verify-tracking)

**Track Custom Events**
Add code to track button clicks, form submissions, purchases, and more.

[Learn about custom events →](/sdks/web/custom-events)

**Connect Integrations**
Link Shopify, Stripe, Meta Ads, Google Ads, or TikTok Ads.

[Browse integrations →](/integrations/overview)

## What Gets Tracked Automatically

Once installed, DATALYR automatically captures:

**Page Views**
Every page visit with URL, title, and referrer.

**Visitor IDs**
Persistent anonymous IDs stored in cookies (survives across sessions).

**Sessions**
30-minute session windows with session IDs.

**Attribution Data**

* UTM parameters (source, medium, campaign, term, content)
* Ad click IDs (fbclid, gclid, ttclid, etc.)
* Referrer information
* Landing pages

**Device Information**

* Browser and OS
* Screen resolution
* Device type (desktop, mobile, tablet)
* Timezone

## Privacy & Compliance

DATALYR respects user privacy:

* No personal data collected by default
* Respects Do Not Track (DNT) browser settings
* Supports opt-out via `__dl_opt_out` cookie
* GDPR and CCPA compliant

## Performance

The DATALYR tracking script is designed for speed:

* **15KB gzipped** - Lightweight and fast
* **Async loading** - Doesn't block page rendering
* **Edge-optimized** - Served from global CDN
* **Smart batching** - Events sent in batches to reduce requests

## Troubleshooting

**Not seeing events?**

1. Check that your workspace ID is correct
2. Make sure the script is in the `<head>` section
3. Disable ad blockers and try again
4. Check browser console for errors

[Full troubleshooting guide →](/troubleshooting/tracking-not-working)

## Need Help?

Can't find your platform? Have questions about installation?

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/introduction/quick-start">
    Complete setup guide
  </Card>

  <Card title="Custom Events" icon="code" href="/sdks/web/custom-events">
    Track specific actions
  </Card>

  <Card title="Verify Tracking" icon="check" href="/getting-started/installation/verify-tracking">
    Confirm it works
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/troubleshooting/tracking-not-working">
    Fix common issues
  </Card>
</CardGroup>
