diy-analytics

Connecting Your Website

Connect a site to diy-analytics with a single <script> tag. The client tracker is under 2 KB, loads asynchronously (async defer), runs without cookies, and has zero third-party dependencies.

Supported Frameworks & Platforms

Next.js

App & Pages Router

React / Vite

Vite, CRA & SPA

Astro

Static & SSR islands

Nuxt / Vue

Vue 3 & Nuxt apps

SvelteKit

Svelte & SvelteKit

WordPress

WPCode & functions.php

Shopify

Liquid theme templates

Framer & Webflow

Custom head code

Setup

1. Register your site

  1. Open your diy-analytics dashboard.
  2. Click + New Site in the workspace navigation.
  3. Enter a Project Name and your primary Website URL (e.g. https://mywebsite.com).

Registering a new website project

2. Copy the tracking tag

In your project dashboard, go to Settings → Tracking Snippet (or copy it from the welcome screen):

html
<script async defer src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID"></script>

Tracking snippet in Settings → Tracking

3. Add it to your <head>

Paste the <script> tag inside your site's <head> so it loads on every page.

Framework Integration Guides

1. Next.js (App Router)

Add the tracking script to your root layout (app/layout.tsx) using Next.js's <Script /> component with strategy="afterInteractive":

tsx
1// app/layout.tsx 2import Script from 'next/script'; 3 4export default function RootLayout({ children }: { children: React.ReactNode }) { 5 return ( 6 <html lang="en"> 7 <head> 8 <Script 9 src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID" 10 strategy="afterInteractive" 11 /> 12 </head> 13 <body>{children}</body> 14 </html> 15 ); 16}

2. Next.js (Pages Router)

Place the script in pages/_document.tsx:

tsx
1// pages/_document.tsx 2import { Html, Head, Main, NextScript } from 'next/document'; 3 4export default function Document() { 5 return ( 6 <Html lang="en"> 7 <Head> 8 <script 9 async 10 defer 11 src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID" 12 /> 13 </Head> 14 <body> 15 <Main /> 16 <NextScript /> 17 </body> 18 </Html> 19 ); 20}

3. React (Vite / Create React App)

Insert the tag directly into index.html, inside <head>:

html
1<!-- index.html --> 2<!DOCTYPE html> 3<html lang="en"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>My Application</title> 8 9 <!-- diy-analytics --> 10 <script async defer src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID"></script> 11 </head> 12 <body> 13 <div id="root"></div> 14 <script type="module" src="/src/main.tsx"></script> 15 </body> 16</html>

4. Astro

Add the script to your base layout (e.g. src/layouts/Layout.astro):

astro
1--- 2// src/layouts/Layout.astro 3interface Props { 4 title: string; 5} 6const { title } = Astro.props; 7--- 8<!doctype html> 9<html lang="en"> 10 <head> 11 <meta charset="UTF-8" /> 12 <title>{title}</title> 13 <script is:inline async defer src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID"></script> 14 </head> 15 <body> 16 <slot /> 17 </body> 18</html>

5. Nuxt / Vue 3

Add the script inside nuxt.config.ts or app.vue:

typescript
1// nuxt.config.ts 2export default defineNuxtConfig({ 3 app: { 4 head: { 5 script: [ 6 { 7 src: 'https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID', 8 async: true, 9 defer: true 10 } 11 ] 12 } 13 } 14});

6. SvelteKit

Add the script to src/app.html, inside <head>:

html
1<!-- src/app.html --> 2<!DOCTYPE html> 3<html lang="en"> 4 <head> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width" /> 7 %sveltekit.head% 8 <script async defer src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID"></script> 9 </head> 10 <body data-sveltekit-preload-data="hover"> 11 <div style="display: contents">%sveltekit.body%</div> 12 </body> 13</html>

7. WordPress

Option A (recommended): Install WPCode or Insert Headers and Footers, then paste the <script> snippet into the Header section.

Option B (theme functions.php):

php
1add_action('wp_head', function() { 2 echo '<script async defer src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID"></script>'; 3});

8. Shopify, Webflow, Framer, Ghost

  • Shopify: Online Store → Themes → Edit Code → theme.liquid, before </head>.
  • Webflow: Project Settings → Custom Code → Head Code.
  • Framer: Site Settings → General → Custom Code → Head Start.
  • Ghost: Settings → Code Injection → Site Header.

Single-page applications

Client-side routers (React Router, Next.js, Vue Router, SvelteKit) don't need a routing plugin or manual pageview calls. The tracker listens directly to:

  • History API calls — history.pushState and history.replaceState
  • Browser navigation — window.addEventListener('popstate', ...)
  • Hash changes — window.addEventListener('hashchange', ...)

Every navigation dispatches a new pageview beacon, without a full page reload.

Domain authorization

The tracker checks that the request origin matches your project's configured domain, so unauthorized domains can't send beacons into your database.

  • Exact matching: if your project URL is https://example.com, both example.com and www.example.com are authorized automatically.
  • Staging environments: for subdomains like staging.example.com, create a dedicated staging project or update the domain under Project Settings → General.

Verifying installation

  1. Open your live site in Chrome or Firefox.
  2. Open Developer Tools (F12) and switch to the Network tab.
  3. Filter by tracker.js — it should return 200 OK.
  4. Navigate between pages. You'll see POST beacons dispatched to /api/track.
  5. Open your diy-analytics dashboard — visits appear immediately under Live Visitors and the Traffic Insights chart.

Next steps

Custom Events & Vitals

Track custom user actions, measure Core Web Vitals, and configure privacy opt-out.

Error & Crash Monitoring

Inspect uncaught exceptions, stack traces, breadcrumbs, and source maps.

Dashboard & Core Metrics

Filter by UTM tags, geographic location, and device.