Linking Your Website

With your dashboard deployed, the next step is connecting it to the site you want to measure. This comes down to three steps: register a project, copy its tracking snippet, and add that snippet to your site.

Step 1: Register Your Site in the Dashboard

Tell your diy-analytics instance which website it should measure.

Log into your dashboard using your deployment URL (or http://localhost:3000 if running locally).
Create a new Project for your site and enter its name and URL.
Open the project and navigate to Settings → Tracking Snippet.

Your website is now registered, and a dedicated dashboard is ready for it.

Step 2: Copy Your Unique Tracking Snippet

On your project's Tracking settings page, you'll find your unique snippet. It points at your deployment's tracker endpoint and identifies your project via a site-id query parameter:

html

<script async defer src="https://your-instance.example.com/api/tracker.js?site-id=YOUR_SITE_ID"></script>

your-instance.example.com is your NEXT_PUBLIC_SITE_URL, and YOUR_SITE_ID is generated per project. Always copy the exact snippet from Settings rather than typing it out by hand.

Tracking snippet in Settings → Tracking

Step 3: Place the Snippet on Your Website

For the tracker to work, it needs to be present on every page you want tracked. Add it once to your global header or root layout template — the snippet always goes in the <head> of your site.

A) WordPress

No coding required — use a plugin to insert the snippet for you:

Go to Plugins > Add New and search for "Insert Headers and Footers".
Install and activate the plugin.
Go to Settings > Insert Headers and Footers and paste the snippet into the "Scripts in Header" box. Save your changes.

B) Plain HTML

html

<head>
  <meta charset="UTF-8">
  <title>My Awesome Project</title>
  <link rel="stylesheet" href="style.css">

  <script async defer src="https://your-instance.example.com/api/tracker.js?site-id=YOUR_SITE_ID"></script>
</head>

C) Next.js (App Router)

Add it to the root layout with next/script so it's present on every route:

tsx

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://your-instance.example.com/api/tracker.js?site-id=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

D) React (Vite / Create React App)

There's no npm package to install — add the tag to index.html:

html

<!-- index.html -->
<head>
  <script async defer src="https://your-instance.example.com/api/tracker.js?site-id=YOUR_SITE_ID"></script>
</head>

E) Vue, Svelte, Webflow, and everything else

Add the <script> tag anywhere it renders once per page load — your framework's document head, custom-code block, or theme header injection point. There is no framework-specific SDK to install; the tracker is a single vanilla-JS file under 2 KB.

Building a single-page app (one where clicking links doesn't reload the whole page, like most React/Vue apps)? You don't need to do anything extra — the tracker automatically detects when the visible page changes and records it as a new pageview.

Step 4: Domain Authorization

The tracker only records data if the page's hostname matches the project's configured URL (or its subdomains). If you see Domain not authorized for tracking in the browser console, update the project's URL in Settings so it matches your domain (including staging subdomains).

Step 5: Verify the Connection

After adding the code and redeploying your site, visit a few pages to generate traffic, then check your dashboard. It can take a minute for data to reflect.

If nothing appears, check the checklist in Troubleshooting.

What's Next

Custom Events & Web Vitals

Track button clicks, signups, or purchases beyond automatic pageviews.

Dashboard Features

Share a public, no-login dashboard and explore every panel in the UI.

Troubleshooting

Nothing showing up? Work through the setup checklist.