← All guides
N2 min

Install on Next.js

Add tracking to a Next.js (App Router) application with next/script, without blocking page rendering.

  1. Find your site ID

    From the dashboard, go to Settings and copy your site ID (SITE_ID). Every site in your account has a unique ID, used to keep data separated between projects.

  2. Import next/script in your root layout

    Use the Script component from next/script, not a raw <script> tag — Next.js optimizes it and avoids hydration mismatches. Add it to src/app/layout.tsx, inside <body>, once, at the root layout level, so it loads on every page.

    app/layout.tsx
    import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ro">
      <body>
        {children}
        <Script
          defer
          data-site="SITE_ID"
          src="https://visitrack.app/tracker.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

  3. Choose the right loading strategy

    strategy="afterInteractive" is recommended: the script loads right after the page becomes interactive, the same way the native tag's defer attribute behaves. Avoid beforeInteractive for tracking — it's reserved for critical scripts that need to run before any other code.

  4. Check the dashboard

    Open your site in production (or run npm run build && npm start locally), browse a few pages, then check the Live tab in the dashboard — you should show up as an active visitor within a few seconds.

Don't have a site ID yet? You'll get one right after you create an account and add your site from Settings.

Other platforms

ShopifyWebflowWordPress