Adding analytics to a React or Next.js app without cookies

Measuring the audience of a React or Next.js application always holds a nasty surprise for anyone coming from the classic web. You paste the analytics script into the page, everything seems to work, then you notice the dashboard only records a single page view per visit, no matter how much people navigate. The reason lies in the very nature of these applications: they change pages without reloading the document, and the measurement script, designed for full reloads, never sees those transitions. Here we walk through this trap and how to solve it cleanly, with cookieless, banner-free measurement suited to React and Next.js.

Why an SPA escapes classic measurement

A React application, whether served by Vite or by Next.js in client mode, works as a single-page application: the browser loads one HTML document once, then the router intercepts clicks and swaps the page content without ever reloading the document. That is what makes these interfaces smooth and fast. But it is also what fools measurement tools designed for the multi-page era.

A traditional analytics script records a page view when the document loads. On a classic site, each navigation triggers a full reload, and therefore a new page view. In a React application, that reload happens only once, when the visitor first arrives. Every subsequent navigation happens in memory, with no new load event. The result: a visitor can browse ten screens and the tool counts only one. Journeys are invisible, the most-viewed pages are distorted, and conversion funnels are unusable.

The fix is to signal each route change to the measurement script, so it records a page view on every transition, exactly as a reload would on a classic site. But it has to be done in the right place, and without duplicating events.

Cookieless measurement, the right foundation

Before even solving the router question, it is worth choosing a measurement approach that does not rely on cookies. A modern application already loads a lot of JavaScript; adding an advertising-tracking stack and a consent-management library needlessly bloats the bundle and forces a banner that your users have to face on arrival.

Cookieless measurement stores nothing on the visitor’s device and sends no data outside Europe. It records page views, traffic sources, the breakdown by country or device, without ever rebuilding an individual profile. That places it outside the scope requiring a consent banner, and it keeps the page light. At Takt, the script is around 2.5 kilobytes, hosted in Europe, and integrates with React through a dedicated wrapper that handles the router’s subtleties for you. If you are still weighing this approach against Google Analytics, our comparison page details the differences.

Wiring measurement to the router

The principle is always the same: record a page view on arrival, then a new one on every route change. How you do it depends on the router you use.

With Next.js and its App Router, tracking transitions goes through the router’s hooks. You place a client component at the root of the application that watches the current path and fires a page view each time it changes. You have to be careful not to record the first view twice: the initial load and the hook’s first render can overlap if you are not careful. Takt’s React wrapper handles this case for you, exposing a component you mount once that takes care of both the initial view and the following ones.

With React Router in a Vite application, the mechanism is comparable: you listen to the location object provided by the router and emit a page view on each path change. Here too, the React wrapper hooks into that stream and avoids duplicates.

In both cases, the good practice is to initialize measurement once, as high as possible in the component tree, then let the wrapper track transitions. This avoids the classic trap of re-initializing the script on every render, which would multiply events.

The development-environment trap

One last pitfall deserves a mention, because it wastes a lot of time. During development, your application runs locally, and you navigate through it yourself dozens of times a day. If measurement is active in that environment, your production statistics end up polluted by your own test traffic, with figures that make no sense.

The good practice is to disable measurement locally. Takt’s React wrapper offers an option that excludes visits from localhost right away, which saves you from wiring an environment condition yourself. With that guard in place, you can develop without dirtying your real data.

Beyond page views, a wrapper of this kind also lets you record custom events — a signup, an add-to-cart, a form submission — to build goals and conversion funnels. That is what turns simple audience measurement into a genuine tool for understanding journeys, still without cookies or individual identification.

In summary

A React or Next.js application escapes classic measurement because it changes pages without reloading the document: the traditional script counts only one view per visit. The fix is to signal each route change to the script, hooking into Next.js’s hooks or React Router, while avoiding counting the first view twice. By choosing cookieless measurement, hosted in Europe and integrated through a React wrapper that handles these subtleties — including excluding local traffic during development — you get faithful journey tracking, lighter pages, and compliance by default, without ever individually tracking users.