How to track visitors on Next.js.

A component rather than a script tag. Drop it in your root layout once and every route is covered, including client-side navigations that ordinary snippets miss.

What you need

• A React or Next.js application you can deploy.
• A VisitorPing site key, in the form vp_ABC23456 — the prefix vp_ and eight characters. The alphabet leaves out I, O, 0 and 1, so there is nothing to misread when copying it.

Install it

Install the package

Add it with your package manager of choice.

npm install @visitorping/react
# or
pnpm add @visitorping/react

Add it to your root layout

In the App Router, put the component in the head of app/layout.tsx.

import { VisitorPing } from "@visitorping/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <VisitorPing siteKey="vp_ABC23456" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Or anywhere in a plain React app

For Vite, Remix or Create React App there is no document head to target, so render it once near the root of your tree.

import { VisitorPing } from "@visitorping/react";

function App() {
  return (
    <div className="App">
      <VisitorPing siteKey="vp_ABC23456" />
      {/* the rest of your app */}
    </div>
  );
}

Route changes are already handled

A single-page app does not reload the document when someone navigates, so a plain script tag records one page view and then goes quiet for the rest of the session. That is why analytics on React sites so often under-reports.

The component handles client-side navigation itself. You do not need to fire anything on route change, and you should not add a second tracker to compensate.

What you will actually see

Per visit: the city and region the network resolves to, where the visitor came from, the page they landed on, their device and browser, and whether they have been before.

You do not get a name, an email address, or an identity. Nobody can give you that from a page view, whatever the marketing says. Geolocation resolves a network rather than a doorstep, so a visitor on a VPN or a mobile network can appear in the wrong city entirely. Treat location as a hint.

You are collecting visitor data, so say so in your privacy notice and check which consent rules apply where your customers are — a question for your own legal advice, not for a setup guide.

If it is not working

Only the first page of a session is recorded: Something is rendering the raw script tag rather than the component. The component is what follows client-side navigation.
Every visit is counted twice: The component is mounted in two places, or it is mounted alongside a script tag left over from an earlier install.

Find what is costing you search clicks, then watch the fix work.

VisitorPing reads your own Search Console data for the pages losing clicks, then rings your phone the moment someone lands on your website.

Start Free Trial See how it works