Install the tracker

The Satsu tracker is a single <script> tag — under 3 KB, no SDK, no build step. Add it once and pageviews, referrers, devices and countries start flowing in seconds.

html

<script defer src="https://track.satsu.pro/tracker.js" data-site="YOUR_ID"></script>

Replace YOUR_ID with your site's ID (find it in the dashboard under Sites → your site → install). That's the entire integration — everything below is just where to put it in your framework.

Attributes

Attribute	Required	What it does
`data-site`	Yes	Your site ID. Without it the tracker does nothing.
`data-api`	No	Override the ingest endpoint. Defaults to the script's own origin + `/e`, so you normally never set this.
`data-track-paths`	No	Comma-separated path prefixes to limit tracking to (e.g. `/,/docs,/blog`). Only paths at or under one of them are tracked; everything else is ignored, even across client-side navigation. Omit to track every path. See Single-page apps.

By framework

Plain HTML

Put it in the <head> of your page:

html

<!doctype html>
<html>
  <head>
    <script defer src="https://track.satsu.pro/tracker.js" data-site="YOUR_ID"></script>
  </head>
  <body>...</body>
</html>

Next.js (App Router)

Add it to app/layout.tsx with next/script:

tsx

import Script from "next/script";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          defer
          src="https://track.satsu.pro/tracker.js"
          data-site="YOUR_ID"
        />
      </body>
    </html>
  );
}

React (Vite / CRA)

Add the tag to index.html:

html

<head>
  <script defer src="https://track.satsu.pro/tracker.js" data-site="YOUR_ID"></script>
</head>

Vue / Nuxt

In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: "https://track.satsu.pro/tracker.js", defer: true, "data-site": "YOUR_ID" },
      ],
    },
  },
});

Astro

In your base layout's <head>:

astro

---
// src/layouts/Base.astro
---
<head>
  <script defer src="https://track.satsu.pro/tracker.js" data-site="YOUR_ID"></script>
</head>

Single-page apps

The tracker handles client-side routing automatically. It hooks pushState, replaceState and popstate, so every route change is counted as a pageview — no router integration or manual calls needed. Repeated navigations to the same path are de-duplicated.

Tracking only some paths

Because the tracker follows client-side navigation, a script that loads on one page stays active as the user moves through your app. If your marketing site and your signed-in app live on the same domain — say / and /pricing are public but /app and /dashboard are behind a login — you usually don't want to count the logged-in pages.

Use data-track-paths to scope tracking to a list of path prefixes:

html

<script defer src="https://track.satsu.pro/tracker.js"
  data-site="YOUR_ID"
  data-track-paths="/,/pricing,/docs,/blog"></script>

Now only /, /pricing, /docs, /blog and anything beneath them (like /docs/install) are tracked. A visit to /dashboard — or any route not in the list — is ignored, and the tracker stays silent there even after the visitor navigated in from a tracked page. Matching is on a path boundary, so /docs covers /docs and /docs/install but not /docs-archive; list / on its own to match the home page exactly, not the whole site.

Omit the attribute entirely to track every path (the default).

Building with an AI assistant?

Paste the script tag into your layout's <head> — that's the whole thing. No package to install, no config, no client library.

What's tracked automatically

Once installed, with no extra code, Satsu records pageviews, SPA route changes, outbound link clicks, file downloads and scroll depth. See What we track for the full list, or Custom events to track your own.

Next: Verify it works →