Next.js

Add the Script component to app/layout.tsx, with your own site id from the dashboard. It loads once and counts every page.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://emberbee.app/script.js" data-site="st_xxxxxxxxxxxxxxxx" />
      </body>
    </html>
  );
}

Add it to the root layout only. Pages and nested layouts don't need their own copy.

Navigations through Link and router.push are counted on their own, as are the back and forward buttons. You don't need a route-change listener.

The script adds window.emberbee. Declare it once so TypeScript knows about it:

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

export {};

Then call it from any client component:

"use client";

export function UpgradeButton() {
  return <button onClick={() => window.emberbee?.("upgrade", { plan: "pro" })}>Upgrade</button>;
}

The ?. skips the call if the script hasn't loaded or a blocker stopped it, so your button always works.

next dev runs on localhost, where the script sends nothing. Your development traffic stays out of your stats without any extra setup.