Install on Next.js | OpenWebTrack Docs

One tag, works on both routers. Route changes are tracked automatically.

For the App Router, add the tracker to app/layout.tsx. You can use next/script or a plain tag. Next merges heads automatically.

app/layout.tsx

import Script from "next/script";

export default function RootLayout(props) {
  return (
    <html lang="en">
      <body>
        {props.children}
        <Script
          src="https://cloud.openwebtrack.one/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-domain="yourdomain.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

For cookieless use script.cookieless.js. For self-hosted replace cloud.openwebtrack.one with your ORIGIN.

Pages Router alternative: add the same tag to pages/_document.tsx inside <Head>. In both routers, Next.js navigation is tracked automatically as pageviews - the tracker watches history so no extra code is needed.

pages/_document.tsx

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          defer
          src="https://cloud.openwebtrack.one/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-domain="yourdomain.com"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Deploy and open the site at the address you gave the dashboard. The realtime view shows the visit within seconds; if nothing appears, check that data-domain matches and redeploy after changing YOUR_WEBSITE_ID since it is baked at build time.