Next.js

Snow works with both the App Router and Pages Router. Pick the tab that matches your setup.

App Router

Add the snippet to your root layout at app/layout.tsx using Next.js’s built-in <Script> component:


import Script from "next/script";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          src="https://api.snowanalytics.app/sa.js"
          data-site="YOUR_SITE_ID"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Using next/script ensures the script loads correctly alongside Next.js’s rendering.

SPA route tracking

You do not need to add any router event hooks. Snow hooks the browser History API automatically, so client-side navigations are tracked just like full page loads. See Single-page apps for details.

First-party proxy (optional)

Next.js makes it easy to proxy sa.js through your own domain with a one-line rewrite in next.config.js. This lets Snow reach visitors whose ad-blockers would otherwise block the request from the Snow collector domain. See Next.js proxy for the exact config.

Verify

Open your site in a browser, then check the Live view in the Snow dashboard. You should see yourself appear within a few seconds. If nothing shows up, view your page source and confirm the snippet is present, then see Troubleshooting.