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

# Install the tracking snippet

> Add the DevTune tracking snippet to your site for a first-party record of AI referral page views, and proxy it through your own domain if needed.

The snippet is a first-party record of AI referral page views. It does not see crawlers that skip JavaScript, so it is an addition to a crawler sensor rather than a substitute for one.

For bot traffic, edge middleware or the Vercel drain takes precedence over the tracking snippet on a host.

## Before you start

* A paid plan that includes AI Traffic, and project management permission. See [Set up AI Traffic](https://docs.devtune.ai/ai-traffic/setup.md#before-you-start).
* Access to edit your site's pages or template.

## Generate the snippet

1. Open your project
2. Open **Settings › Integrations**
3. Select **Set up** beside **Tracking snippet** under **Website analytics**
4. Select **Generate tracking snippet**

DevTune generates a unique snippet key for your project. The snippet code appears on the settings page, ready to copy.

## Install the snippet

Copy the snippet and add it to your website's layout or template file so it loads on every page. The snippet should be placed before the closing `</body>` tag.

The copied snippet is a complete `<script>` element: it starts with `<script>` and ends with `</script>`. Paste it as copied wherever a page accepts HTML. Don't wrap it in another `<script>` tag, or the browser reports a syntax error and the snippet never runs.

### GitBook

If your documentation is hosted on **GitBook**, you can use the official DevTune integration instead of manually installing the snippet:

1. Go to your GitBook space settings
2. Navigate to **Integrations**
3. Find and install the **DevTune** integration from the marketplace
4. Enter your project snippet key when prompted

The integration will automatically add the tracking snippet to all your GitBook pages. Before enabling it, make sure your consent flow and any region-aware handling are configured so tracking only starts after the required opt-in. [View the integration on GitBook](https://www.gitbook.com/integrations/devtune).

### Next.js

Add the snippet to your root layout, `app/layout.tsx`. The `Script` component writes its own `<script>` tag, so paste only the code between the snippet's `<script>` and `</script>` tags, not the tags themselves:

```jsx theme={null}
// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          id="devtune-tracking"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `PASTE_THE_CODE_BETWEEN_THE_SCRIPT_TAGS`,
          }}
        />
      </body>
    </html>
  );
}
```

With the Pages Router, add the same `Script` element to `pages/_app.tsx`.

### WordPress

Add the snippet to your theme's `footer.php` file, or use a plugin such as "Insert Headers and Footers" to add it to the footer section.

### Webflow / Squarespace

Go to **Site Settings**, then **Custom Code**, and paste the snippet in the **Footer** section.

### Plain HTML

Paste the snippet as copied, tags included, just before the closing `</body>` tag in your HTML template:

```html theme={null}
<body>
  <!-- your page content -->
  PASTE_YOUR_SNIPPET_HERE
</body>
```

## Check the snippet is working

1. Open a page on your site in a browser with ad blockers turned off.
2. In **Settings › Integrations**, reload the page. Until DevTune accepts the first page view, the **Tracking snippet** row reads **Configured**. Within a few minutes it reads **Active**, with **Last ingest** and a time, and lists the page's hostname.

A visit you open directly isn't an AI referral, so it confirms the snippet without adding to your AI referral figures.

## If something goes wrong

If the row stays **Configured**, check:

* The snippet is present in your page source
* The snippet key matches the one shown in **Settings › Integrations**
* Ad blockers are not blocking the request. If they are, [proxy the snippet through your domain](#proxy-setup).
* **Snippet and middleware collection** is switched on in **Settings › Integrations**

## Enable or disable tracking

In **Settings › Integrations**, use the **Snippet and middleware collection** switch to enable or disable tracking at any time. The switch controls both the snippet and edge middleware; to stop only one, remove it from your site. When disabled, incoming events are rejected and no new data is recorded.

## Rate limits

Each tracking snippet accepts up to **10,000 requests per minute**. This is enough for most sites. If your site exceeds this limit, excess requests are silently dropped.

## Multi-site tracking

You can use the same tracking snippet across multiple websites or subdomains. Every site reports into the same project, and **Insights › AI Traffic** shows the total. To read one site on its own, pass its host in the `domain` query parameter of the AI Traffic API — for example `/api/v2/projects/{projectId}/traffic/summary?domain=docs.example.com`. To read one path and its descendants, also pass `pathPrefix` — for example `domain=example.com&pathPrefix=/blog`.

## Proxy setup

You can proxy the tracking endpoint through your own domain when you need first-party routing for your deployment setup, or when ad blockers drop the third-party beacon. This applies to the snippet only — the crawler sensors do not use it. Teams should still honor consent requirements and local privacy rules before collecting traffic data.

Instead of the snippet sending data to `https://devtune.ai/api/v1/llm-traffic/collect`, you configure a reverse proxy, so requests go to a path on your own domain.

1. Add a reverse proxy from `/dt/` on your domain to `https://devtune.ai/api/v1/llm-traffic/`. Examples for common hosts follow.

2. Change the beacon URL in your snippet to your proxy path. Find it in the `navigator.sendBeacon` call:

   ```diff theme={null}
   - navigator.sendBeacon('https://devtune.ai/api/v1/llm-traffic/collect', ...)
   + navigator.sendBeacon('https://www.example.com/dt/collect', ...)
   ```

3. [Check the snippet is working](#check-the-snippet-is-working).

### Vercel / Next.js

Add a rewrite to `next.config.ts`:

```javascript theme={null}
async rewrites() {
  return [
    {
      source: '/dt/:path*',
      destination:
        'https://devtune.ai/api/v1/llm-traffic/:path*',
    },
  ];
}
```

### Netlify

Add to `netlify.toml`:

```toml theme={null}
[[redirects]]
  from = "/dt/*"
  to = "https://devtune.ai/api/v1/llm-traffic/:splat"
  status = 200
  force = true
```

### Cloudflare

Create a Worker route on `/dt/*` that forwards each request to the same path under `https://devtune.ai/api/v1/llm-traffic/`.

### nginx

```nginx theme={null}
location /dt/ {
  proxy_pass https://devtune.ai/api/v1/llm-traffic/;
  proxy_set_header Host devtune.ai;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-Host $host;
}
```

## Next steps

* **[Set up AI Traffic](https://docs.devtune.ai/ai-traffic/setup.md)** - connect a crawler sensor, website analytics and Search Console
* **[Reading AI Traffic](https://docs.devtune.ai/ai-traffic/dashboard.md)** - what each view counts


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.