Documentation

Add analytics to Next.js

next/script with afterInteractive keeps it off the critical path.

Use next/script with strategy="afterInteractive" in the root layout. That keeps the tracker off the critical path: the page becomes interactive first, and the script loads once hydration is out of the way.

Put it in the root layout rather than a page, so it mounts once for the whole app. The tracker handles client-side route changes itself, so there is nothing to call on navigation.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://collect.inqetra.com/inqetra.js"
          data-site="9f1c4b2e-7a30-4d51-b8c6-2e5a0d7f3c11"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Worth knowing

9f1c4b2e-7a30-4d51-b8c6-2e5a0d7f3c11 is a placeholder. Yours is issued when you add a domain and is shown in the dashboard next to the snippet.

After it is in

Load a page and check the realtime view: it counts the last five minutes, so your own visit should appear within seconds. Then custom events covers naming the things that matter to you.