Install on Next.js
Add Open Analytics to a Next.js site: where the snippet goes and how to verify it.
The short way
From your project folder, let the CLI detect Next.js and place the snippet itself:
npx getopen initIt asks for your tracking key, writes the tag, and prints which file it changed. It is idempotent, so running it on a project that already has the snippet leaves it alone. Prefer to do it by hand? The steps below are exactly what it does.
Add it to Next.js
App Router: add the tracker to your root layout. Two ways, same result. Put a plain script tag in the layout's <head> (Next.js merges it with its own), or use the next/script component, which is the idiomatic Next way and belongs in the body with the afterInteractive strategy. Either loads the same file and reads the same attributes.
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://c.getopen.so/oa.js"
data-key="YOUR_TRACKING_KEY"
data-collector="https://c.getopen.so"
strategy="afterInteractive"
/>
</body>
</html>
);
}Pages Router: add the tag to a custom document instead, inside <Head>.
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head>
<script
async
src="https://c.getopen.so/oa.js"
data-key="YOUR_TRACKING_KEY"
data-collector="https://c.getopen.so"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}That is the only change. The tracker finds itself by its data-key whether Next injects it (next/script) or renders it inline, and it patches the history API, so every client-side route change counts as a pageview with no per-route code. If the key comes from an environment variable, it is baked in at build time: set the variable, then deploy again.
Deploy and open the site at the address you gave the dashboard. The realtime view shows the visit within seconds; historical charts fill moments later. Loading it on your dev server first still tells you something: the dashboard's waiting screen names the host it saw the tag load on, and the tracker writes one line in the browser console when that host is not one the site counts. Visits themselves are only counted from the site's own domain, because localhost cannot be listed: deploy to see data, or empty the allowed domains list in Settings while you install. Nothing arriving? The troubleshooting page walks through the usual reasons.
Where to next
Track custom events
Count the clicks, signups and checkouts that matter, by attribute, a no-code rule, or the JavaScript API.
Script options
Test mode, debug logging, strict storage and the privacy attributes the snippet accepts.