Install on Next.js

Add Carthagos Analytics to a Next.js site: where the snippet goes and how to verify it.

The short way

From your project folder, let the CLI detect Next.js and place the snippet itself:

terminal

npx getopen init

It asks for your tracking key (dashboard, your site, Settings, Installation), writes the tag, and prints which file it changed. Prefer to do it by hand? The steps below are what it does.

Manual steps

1. App Router: add the script tag inside the <head> element of your root layout. If the layout has no <head> yet, add one; Next.js merges it with its own.

app/layout.tsx

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          async
          src="https://c.analytics.carthagos.com/oa.js"
          data-key="YOUR_TRACKING_KEY"
          data-collector="https://c.analytics.carthagos.com"
        ></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

2. Pages Router: put the same tag inside <Head> in your custom document instead.

3. Client-side navigation is tracked automatically: the script patches the history API, so route changes count as pageviews with no extra code.

4. Deploy and open the site at the address you gave the dashboard. The realtime view shows the visit within seconds; historical charts fill moments later. Loading it on your dev server first still tells you something: the dashboard's waiting screen names the host it saw the tag load on, and the tracker writes one line in the browser console when that host is not one the site counts. Visits themselves are only counted from the site's own domain, because localhost cannot be listed: deploy to see data, or empty the allowed domains list in Settings while you install.

Route changes in a single-page app are tracked automatically, and the snippet never needs editing for updates. From here: custom events for the actions you care about, or script options for test mode and the privacy attributes.