Cookieless web analytics for Next.js

Why use Noralytic with Next.js

Next.js apps care about performance and SEO. Noralytic is under 1 KB, loads after the page is interactive and does not require a consent management tool for analytics.

Because the script follows the browser history, navigation with the Next.js router is counted as page views without extra code.

• No cookies, no local storage and no stored IP addresses, so analytics alone does not need a consent banner.
• A tracking script under 1 KB that will not slow down your pages.
• Real-time stats, top pages, sources, countries, devices, campaigns and events in one simple dashboard.
• Single-page navigation is tracked automatically, because the script follows the browser history.

What you need

• A free Noralytic account with your website added under its exact domain.
• A Next.js project (App Router or pages router).

How to add Noralytic to Next.js

Use the Script component from next/script and set the same attributes as in the plain tracking code.

<script data-host="https://noralytic.com" src="https://noralytic.com/js/script.js" id="ZwSg9rf6GA" async defer></script>

1. 1
   Open your root layout
   For the App Router, open app/layout.tsx. For the pages router, use pages/_app.tsx.
2. 2
   Add the Script component
   Import Script from next/script and add it with the attributes shown below.
3. 3
   Deploy and test
   Open your site and check the real-time view in Noralytic.

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://noralytic.com/js/script.js"
          data-host="https://noralytic.com"
          id="ZwSg9rf6GA"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Check that tracking works

1. 1
   Open your website
   Use a private browser window so extensions and your login do not interfere.
2. 2
   Open the Noralytic real-time view
   In your Noralytic dashboard, open your website and go to Realtime.
3. 3
   Look for your visit
   Your page view should appear within a few seconds. Click through a few pages to see each one counted.

Track custom events on Next.js

Call <code>window.pa.track</code> from any client component. Declare the type once for TypeScript.

declare global {
  interface Window {
    pa?: { track: (event?: { name: string; value?: number; unit?: string }) => void };
  }
}

export function SignupButton() {
  return <button onClick={() => window.pa?.track({ name: 'signup' })}>Sign up</button>;
}

Events appear in your Events report. A value and a unit are optional, for example pa.track({ name: 'purchase', value: 49.9, unit: 'EUR' }).

Exclude your own visits and bots

To keep your numbers clean, open your website settings in Noralytic and add your own IP address under excluded IP addresses. Make sure bot filtering is enabled so known crawlers are ignored.

Troubleshooting

• Keep the id: the script looks up its own element by id, so keep id="ZwSg9rf6GA" on the Script component.
• Development mode: the domain must match. Add localhost in Noralytic only if you want to test locally.
• No data after a few minutes? Confirm that the domain in Noralytic matches your website exactly, and that the script appears in the page source.
• Ad blockers: some blockers hide analytics scripts. Test in a private window without extensions.
• Content Security Policy: if you use one, allow noralytic.com as a script and connection source.