Install on Next.js

Add XPmetric to Next.js so every route sends pageviews to your dashboard.

Replace YOUR_SITE_TOKEN with your site token from Settings → Sites → Get Script.

Tracking snippet

<script defer data-site="YOUR_SITE_TOKEN" src="https://xpmetric.com/p.js"></script>

App Router (recommended)

Add to app/layout.tsx using next/script:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://xpmetric.com/p.js"
          data-site="YOUR_SITE_TOKEN"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Replace YOUR_SITE_TOKEN with your token from Settings → Sites → Get Script.

Pages Router

Load the script once in pages/_app.tsx, so it stays mounted across route changes:

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

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://xpmetric.com/p.js"
        data-site="YOUR_SITE_TOKEN"
        strategy="afterInteractive"
      />
    </>
  );
}

Use your site's token in place of YOUR_SITE_TOKEN. Keep an afterInteractive script in _app, rather than _document, so Next.js loads it in the browser after hydration.

Verify

1. Deploy or run locally and visit any page.
2. Open your site dashboard — you should see a pageview in the live feed within ~60 seconds.

Client-side navigation

The script follows Next.js route changes on its own — links, router.push, router.replace and the back/forward buttons each send a pageview when the page actually changes. You do not need to call anything.

• A new pageview needs a new path (or new UTM parameters). Re-rendering the same URL, changing only a hash, or changing only non-UTM query parameters like ?tab=annual does not count.
• Sites that route with a hash (/#/pricing) are tracked as a single page.
• After the first pageview, the referrer is the previous page on your site, the same as a normal page load.
• Sign-in, verification and password-reset routes are never sent.

Troubleshooting

If pageviews never appear, your Content-Security-Policy may block p.js. See CSP troubleshooting.