Next.js

Add attribu.tech to your Next.js App Router project.

App Router (recommended)

Use the Script component from next/script in your root layout. This loads the tracking script once across all pages.

// app/layout.tsx
import Script from "next/script";

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

Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

Pages Router

If you use the Pages Router, add the script in pages/_app.tsx:

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        defer
        data-website-id="YOUR_SITE_ID"
        data-domain="yourdomain.com"
        src="https://attribu.tech/js/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

SPA route changes

The tracking script automatically detects client-side navigations in Next.js. No extra configuration is needed for App Router or Pages Router.

Proxy setup

To avoid ad blockers, you can proxy the tracking script and event endpoint through your own Next.js app. See the proxy guide for setup instructions.

Verify installation

Run your Next.js app locally or deploy it.
Open your browser's Developer Tools and check the Network tab for a request to /js/script.js and a POST to /api/events.
Check your attribu.tech dashboard for incoming pageviews.

What's next

Custom events - Track signups, button clicks, and other actions.
Stripe integration - Attribute revenue to traffic sources.
Script options - Configure advanced tracking behavior.