Next.js

Add DataSaaS tracking to your Next.js application. Works with both the App Router and Pages Router.

App Router (Next.js 13+)

Add the tracking script to your root layout:

tsx

// app/layout.tsx
import Script from 'next/script'

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

Pages Router

Add the script to your _app.tsx or _document.tsx:

tsx

// pages/_app.tsx
import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        defer
        data-website-id="mrf_abc123def456"
        data-domain="yourdomain.com"
        src="https://yourdomain.com/js/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

Info

The DataSaaS script automatically detects SPA navigation via the History API. No additional configuration is needed for client-side routing.

HTML / Script Tag

Overview