Add DataEasy to Next.js

Use next/script in your root layout so the tracker loads once for the whole app. Client-side navigations are detected automatically.

App Router

app/layout.tsx

import Script from "next/script";

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

Pages Router

pages/_app.tsx

import Script from "next/script";
import type { AppProps } from "next/app";

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

Track goals from components

declare global {
  interface Window {
    dataeasy?: (goal: string, props?: Record<string, string | number | boolean>) => void;
  }
}

export function trackGoal(goal: string, props?: Record<string, string | number | boolean>) {
  window.dataeasy?.(goal, props);
}

Want the script and events to go through your own domain (fewer ad-blocker misses)? See Proxy with Next.js rewrites.

✍️ Something missing? Tell us.

🧭 New to DataEasy? Start with the introduction