Add Datasense to Next.js

The way to load a script on every page of a Next.js App Router app is the root layout.

1. Open your root layout, usually app/layout.tsx.
2. Import Script from next/script.
3. Add the Datasense script to the <head> with strategy="afterInteractive":

import Script from "next/script"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-website-id="YOUR_SITE_ID"
          src="https://usedatasense.com/js/script.cookies.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Replace YOUR_SITE_ID with your site ID from the dashboard.

Verify installation

After you deploy:

• Visit your live website.
• Open the Realtime page of your Datasense dashboard. Your visit shows up within a second, and the setup page says "Receiving events".

Datasense ignores localhost so you don't count your own development traffic. Add data-allow-localhost="true" to the tag to test locally. More options are in the script configuration reference.