Cookieless web analytics for React

Why use Noralytic with React

Single-page apps are hard to measure because the page never reloads. Noralytic hooks into the browser history, so React Router navigation is counted without extra code.

You skip analytics libraries and keep your bundle small, because the script lives outside your JavaScript bundle.

• No cookies, no local storage and no stored IP addresses, so analytics alone does not need a consent banner.
• A tracking script under 1 KB that will not slow down your pages.
• Real-time stats, top pages, sources, countries, devices, campaigns and events in one simple dashboard.
• Single-page navigation is tracked automatically, because the script follows the browser history.

What you need

• A free Noralytic account with your website added under its exact domain.
• A React project built with Vite, Create React App or similar, where you can edit index.html.

How to add Noralytic to React

The tracking code is one line. The steps below show where it goes.

<script data-host="https://noralytic.com" src="https://noralytic.com/js/script.js" id="ZwSg9rf6GA" async defer></script>

1. 1
   Open index.html
   In a Vite project it is in the project root, in Create React App it is in public/.
2. 2
   Paste the tracking code
   Add the snippet inside the <head> tag.
3. 3
   Build and deploy
   Deploy your app and check the real-time view while you navigate.

Check that tracking works

1. 1
   Open your website
   Use a private browser window so extensions and your login do not interfere.
2. 2
   Open the Noralytic real-time view
   In your Noralytic dashboard, open your website and go to Realtime.
3. 3
   Look for your visit
   Your page view should appear within a few seconds. Click through a few pages to see each one counted.

Track custom events on React

Call the tracker from any event handler. Use optional chaining so your code does not fail if the script is blocked.

function SignupButton() {
  return <button onClick={() => window.pa?.track({ name: 'signup' })}>Sign up</button>;
}

Events appear in your Events report. A value and a unit are optional, for example pa.track({ name: 'purchase', value: 49.9, unit: 'EUR' }).

Exclude your own visits and bots

To keep your numbers clean, open your website settings in Noralytic and add your own IP address under excluded IP addresses. Make sure bot filtering is enabled so known crawlers are ignored.

Troubleshooting

• Same domain in Noralytic: add the exact domain your app runs on.
• Hash routing: routes after a # are not separate pages. Prefer browser history routing for clean page reports.
• No data after a few minutes? Confirm that the domain in Noralytic matches your website exactly, and that the script appears in the page source.
• Ad blockers: some blockers hide analytics scripts. Test in a private window without extensions.
• Content Security Policy: if you use one, allow noralytic.com as a script and connection source.