Installation Guides

Install the Clics tracking script on HTML, Next.js, React, Astro, WordPress, Webflow, and more: under 5 KB, no cookies.

Install the Clics tracker to collect pageviews and custom events. The script is required for all setups. Pick your stack below.

AI crawler tracking

AI crawler analytics uses a separate server-side package and project-scoped crawler token. Follow the AI crawler tracking installation guide for Next.js, TanStack Start, Hono, Express, Cloudflare, and generic Fetch handlers.

Before you start

Create a project in the Clics dashboard
Copy your project ID from Configure → Tracking
Add your production domain in project settings (or enable localhost for development)

Script attributes

Attribute	Required	Description
`data-project-id`	Yes	Your Clics project ID
`data-allow-localhost`	No	Allow tracking on `localhost` and `127.0.0.1`
`src`	Yes	`https://clics.dev/tracker.js`

Next.js

Add the Clics client-side tracker with next/script in your root layout.

import Script from "next/script"

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          strategy="afterInteractive"
          src="https://clics.dev/tracker.js"
          data-project-id="YOUR_PROJECT_ID"
        />
      </body>
    </html>
  )
}

For local development, add data-allow-localhost to the Script component.

React

Add the script to your HTML shell (for example index.html):

<script
  defer
  data-project-id="YOUR_PROJECT_ID"
  src="https://clics.dev/tracker.js"
></script>

For local development, add data-allow-localhost to the script tag.

Astro

Add an inline script in your layout so Astro passes the remote URL through without bundling it:

<script
  is:inline
  defer
  data-project-id="YOUR_PROJECT_ID"
  src="https://clics.dev/tracker.js"
></script>

For local development, add data-allow-localhost.

TanStack Start

Add the tracker in your root route’s shellComponent, after <Scripts />:

import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"

export const Route = createRootRoute({
  // ...
  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
        <script
          defer
          src="https://clics.dev/tracker.js"
          data-project-id="YOUR_PROJECT_ID"
        />
      </body>
    </html>
  )
}

For local development, add data-allow-localhost to the script tag.

HTML (`<head>`)

Add the Clics tracker to your site’s <head> the same way you would add Google Analytics or any other JavaScript:

<script
  defer
  data-project-id="YOUR_PROJECT_ID"
  src="https://clics.dev/tracker.js"
></script>

For local development:

<script
  defer
  data-project-id="YOUR_PROJECT_ID"
  data-allow-localhost
  src="https://clics.dev/tracker.js"
></script>

WordPress

On your WordPress dashboard, go to Appearance → Theme Editor
Open Theme Header (header.php)
Paste the tracker snippet before </head>
Click Update File

<script
  defer
  data-project-id="YOUR_PROJECT_ID"
  src="https://clics.dev/tracker.js"
></script>

Webflow

Open your project and click the Webflow logo → Project Settings
Go to Custom Code
Paste the tracker in Head Code
Save Changes and Publish

<script
  defer
  data-project-id="YOUR_PROJECT_ID"
  src="https://clics.dev/tracker.js"
></script>

Verify installation

After deploying, open your site and check Realtime in the dashboard. You should see your visit within a few seconds.

Install the Clics cookieless tracking script

Installation Guides