Next.js install

Next.js ships a <Script> component built to load external scripts without slowing the page down. That's the method we recommend.

#App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="snorklee"
          src="https://snorklee.com/w.js"
          data-site="yoursite.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

#Pages Router (Next 12 and earlier)

In pages/_document.tsx or pages/_app.tsx:

import Script from 'next/script';

// inside the root component, after other scripts
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="yoursite.com"
  strategy="afterInteractive"
/>;

#Notes

• afterInteractive strategy: the code loads once the page is interactive, without blocking the first paint.
• Next.js asks for the id attribute so the code isn't added twice.
• For dynamic routes, you add the code just once (in the layout). Client-side page changes (<Link>, router.push, the back button — anything that goes through the browser's History API) are counted automatically, with nothing to configure: on each path change, the page being left is sent with its duration and scroll depth, then a new pageview begins.
• Only the path of the address is sent: never the parameters after ?, never the fragment after #. A change that touches only those therefore doesn't count as a new page.
• The referring site only applies to the landing page, just as with a classic navigation.
• The same goes for other single-page sites (Nuxt, React Router, SvelteKit…): one install, and every path change is counted.