Next.js

Next.js takes one snippet, loaded with the built-in next/script component in your root layout. It tracks page navigations automatically in both the App Router and the Pages Router — no extra wiring.

1. Get your snippet

Each site has its own snippet with a unique script URL. Copy the exact one from your dashboard’s Install step — it carries your site’s ID in place of wa-XXXXXXXX.

2. Add it with next/script

In the App Router, add two <Script> tags to your root layout — one loads the tracker, the other starts it:

// 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://wazlytics.com/js/wa-XXXXXXXX.js" strategy="afterInteractive" />
        <Script id="wazlytics" strategy="afterInteractive">
          {`window.wazlytics = window.wazlytics || function(){(wazlytics.q = wazlytics.q || []).push(arguments)};
            wazlytics.init = wazlytics.init || function(o){ wazlytics.o = o || {} };
            wazlytics.init()`}
        </Script>
      </body>
    </html>
  )
}

Using the Pages Router? Put those same two <Script> tags inside the fragment returned by pages/_app.tsx.

Route changes

Next.js navigates through the browser’s History API, and Wazlytics watches for those changes — so every client-side route change records a pageview on its own. Because the first pageview waits until the page is actually visible, prefetched <Link> destinations aren’t counted until someone really opens them. See Single-page apps for the details.

Note

Because navigations are already tracked automatically, don’t also fire a pageview from a usePathname / useEffect hook — you’d count every navigation twice.

Tip

Keep local development out of your stats by rendering the scripts only in production:

{process.env.NODE_ENV === 'production' && (
  <>
    {/* the two <Script> tags */}
  </>
)}

Track custom events

From any client component, call wazlytics() to record signups, form submissions, and other actions:

wazlytics('Signup', { props: { plan: 'pro' } })

You can also tag an element with data-waz-event instead of writing JavaScript. The tracking script reference covers the full event API, manual tagging, and 404 tracking.

Verify

Build and run your app (or deploy a preview), open Realtime in Wazlytics, and load a page — your visit should appear within a few seconds. If nothing shows up, the troubleshooting guide covers the usual causes.