React

Add the tracker to a React single-page app.

Last updated June 3, 2026

Add Grometrics to a React app by loading the web package once and tracking route changes when the URL changes without a reload.

Prerequisites

A Grometrics site ID from Settings > Tracking
Access to the site, theme, or app code
A way to publish the change

Steps

Install the package

Use the package when you need explicit route, event, or revenue calls.

terminal

1npm install @grometrics/web

Initialize the tracker

Call init once when the app boots.

Replace YOUR_SITE_ID with your site ID from Settings > Tracking.

src/main.tsx

1import { initGrometrics } from '@grometrics/web'23initGrometrics({ siteId: 'YOUR_SITE_ID' })45createRoot(document.getElementById('root')!).render(<App />)

Track navigation

After router navigation, send a pageview if your router does not reload the page.

Options / Configuration

Option	Type	Required	Description
siteId	string	✓	Your Grometrics site ID
trackHistory	boolean	no	Tracks pushState route changes

npm

1npm install @grometrics/web

What happens next

Navigate between two routes and confirm both pageviews in Realtime.

Verify your setup

Install the trackerPublish the changeOpen the site in a new tabConfirm a pageview in Realtime

Troubleshooting

No event appears

Confirm the site ID matches Settings > Tracking and that the latest published code is running.

Was this page helpful?