Install on Next.js

Load the tracker once from your root layout with next/script. It follows client-side navigation on its own.

App Router

1. Add the script to app/layout.tsx

   Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.

   app/layout.tsx

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   17

   // 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://metricraven.com/js/script.js"
             data-site-id="YOUR_SITE_ID"
             strategy="afterInteractive"
           />
         </body>
       </html>
     );
   }

2. Deploy and open your site

   Local development is not tracked by default, so check the deployed site.

Pages Router

1. Add the script to pages/_app.tsx

   Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.

   pages/_app.tsx

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   // pages/_app.tsx
   import type { AppProps } from "next/app";
   import Script from "next/script";
   
   export default function App({ Component, pageProps }: AppProps) {
     return (
       <>
         <Component {...pageProps} />
         <Script
           src="https://metricraven.com/js/script.js"
           data-site-id="YOUR_SITE_ID"
           strategy="afterInteractive"
         />
       </>
     );
   }

2. Deploy and open your site

   Navigate between a couple of pages to confirm each route is recorded.

Notes

• Route changes through the Next.js router use the browser history API, which the tracker records automatically. You don't need a route-change listener.
• Put the script in the root layout or _app only, not in individual pages, so it loads once.
• next/script passes data-* attributes to the script element. Add optional attributes such as data-strip-query="true" the same way.
• To track next dev on localhost, add data-allow-localhost and the local hostname to your site's allowed domains.
• To serve the script and events from your own domain, see Use your own domain; it includes an App Router route handler.

Optional script attributes are listed in Install & verify. To exclude your own visits, see Exclude your visits.