Skip to content
Statsy
Sign inStart free trial

Install on Next.js

Add the tag to your root layout with next/script so it loads once for the whole app, App Router or Pages Router.

Next.js has its own script loader. Use it in the root layout so the tag loads once for the whole app rather than once per page.

Where it goes

App Router: app/layout.tsx. Pages Router: pages/_app.tsx. Either way it belongs in the file that wraps every route.

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          defer
          strategy="afterInteractive"
          src="https://statsy.co/js/script.js"
          data-website-id="ws_XXXXXXXX"
          data-domain="yourstartup.com"
        />
      </body>
    </html>
  );
}

strategy="afterInteractive" is the default for next/script and is the right one here: the script is deferred, so it never competes with your first paint. Keep the data-* attributes exactly as the install screen prints them.

Confirm it works

Deploy and open the site. Live shows the visitor within a few seconds. Navigate with a <Link> and the path in Live should follow: client-side navigation goes through history.pushState, which the script tracks automatically.

Preview deployments do not report

Beacons are accepted from your site’s domain and its subdomains only. A Vercel preview URL such as yourapp-git-branch.vercel.app is dropped unless you add that host under Site settings › General › Additional domains. Most teams leave previews out on purpose, so staging clicks never touch production numbers.

Tip. If ad blockers are eating the tag, point the src at a first-party proxy host on your own domain. Nothing else about the snippet changes.

Last updated · Markdown version