Install on Next.js

Copy the website token from Seean → Settings → Installation. Use the example for your project’s router. Install once in the shared application layout; a separate snippet on every route is unnecessary.

App Router

In app/layout.tsx (or src/app/layout.tsx), import Script from next/script. Add the component to your existing layout:

import Script from "next/script";

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="seean-tracker"
          src="https://app.seean.io/k.js"
          data-site="YOUR_SITE_TOKEN"
          data-api="https://app.seean.io"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace YOUR_SITE_TOKEN. Preserve your existing providers, styles and metadata when adding the import and Script; the example is not a replacement for your whole layout. afterInteractive loads after hydration has started. Next.js App Router scripts.

Pages Router

Use the same Script component in pages/_app.tsx (or src/pages/_app.tsx) beside your page component:

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        id="seean-tracker"
        src="https://app.seean.io/k.js"
        data-site="YOUR_SITE_TOKEN"
        data-api="https://app.seean.io"
        strategy="afterInteractive"
      />
    </>
  );
}

Choose the example for your router; do not install both for the same document. Next.js Pages Router scripts.

Navigation and consent

After the script loads, Seean observes supported history changes to pathnames. Do not add another pageview call in a usePathname effect or reload the script on navigation. Query and hash changes alone are not separate pages. If your site requires analytics consent before loading scripts, gate this component through your existing consent flow.

Publish and verify

Run your normal production build and deploy. On the published URL, follow installation verification. Check a direct load, a Next.js link to another pathname, Back and Forward in Events. Check that only one Seean script is installed, including any tag-manager setup.

Add data-local to Script for localhost testing with a separate test token. If a Content Security Policy blocks the script or POST request, follow the CSP checks. Loading after hydration means events triggered before the script is ready are not queued by Seean.

If next.config sets route-specific headers, allow the script in both script-src and script-src-elem when that directive exists, and the collector in connect-src. Apply this to every matching policy, including an editor or app route override; adding Script alone does not change CSP. See the allowed origins. The installation banner closes as soon as the installation check finds the tag and token on the published page and the policy allows Seean; a policy that still blocks the script keeps it open. lazyOnload also waits for page loading and idle time, so use the documented afterInteractive strategy for initial measurement.

Remove or update

Remove the Script component and unused import, then redeploy. When rotating a token, replace data-site in this component and publish the new value. See script options and custom events.

Something unclear? Contact support.