Install on React
One component inside your router counts the first render and every route change after it.
Before you paste anything
Every snippet below shows YOUR-SITE-ID
. Replace it with your own site id, which is on the Tracking Code page of the site in your account.
If you do not have an account yet, creating one and adding your domain takes about a minute.
Add the tracker component
- Create src/components/VeritaMetricsTracker.jsx with the code below.
- Render it inside your router, alongside <App />, passing siteId and trackingDomain as props.
- Start the app and load any route.
// src/components/VeritaMetricsTracker.jsx
import React, { useEffect } from 'react';
// useLocation and useRef are no longer needed.
// The new tracker.js handles SPA navigation automatically.
/**
* VeritaMetrics Analytics Tracker for React SPAs.
*
* How to use:
* 1. Add this component to your app, inside your React Router <Router>.
* e.g., <BrowserRouter>
* <App />
* <VeritaMetricsTracker siteId="YOUR-SITE-ID" trackingDomain="www.veritametrics.com" />
* </BrowserRouter>
*/
function VeritaMetricsTracker({ siteId, trackingDomain }) {
useEffect(() => {
if (typeof window === 'undefined' || !siteId || !trackingDomain) return; // Guard against React 18 strict mode double-mount
if (window.verita && window.verita.loaded) {
return;
}
// 1. Initialize the Async Command Queue
window.verita =
window.verita ||
function () {
(window.verita.q = window.verita.q || []).push(arguments);
};
window.verita.l = new Date().getTime();
// 2. Load the enhanced tracker script (if using eventing).
const script = document.createElement('script');
script.src = `https://${trackingDomain}/api/tracker.js?siteId=${siteId}`;
script.async = true;
script.defer = true;
script.dataset.siteId = siteId;
script.dataset.trackingDomain = trackingDomain;
document.head.appendChild(script); // 3. Send the initial pageview using the queue
window.verita('trackPageView');
}); // Runs once on mount (or if props change)
// The new tracker.js handles all subsequent SPA navigations.
// This component does not render anything to the DOM.
return null;
}
export default VeritaMetricsTracker;
/*
A note on <noscript> support:
For a pure Client-Side Rendered (CSR) React app, a <noscript> tag here is ineffective
because if JavaScript is disabled, React itself won't run. The fallback pixel should
be placed in the static public/index.html file of your React project.
<noscript>
<img
src="https://www.veritametrics.com/api/track-pageview?siteId=YOUR-SITE-ID"
referrerPolicy="unsafe-url"
alt=""
width="1"
height="1"
style="display:none"
aria-hidden="true"
/>
</noscript>
*/Check that the data is arriving
- Open your site in a browser and load any page.
- In VeritaMetrics, open the site and click Tracking Code in the sidebar. The status turns active and your visit appears in the recent-pageviews list within a few seconds.
If nothing arrives, open your browser devtools on the Network tab and reload. You should see a request to /api/tracker.js that returns 200, then a request to /api/v1/c when you move or scroll.
A component cannot be a no-JavaScript fallback
In a client-rendered app, a visitor with JavaScript off never runs React, so a <noscript> tag written inside a component never reaches the page. If you want those visits counted, put the pixel in the static public/index.html instead.
Guides for other platforms
The same install, on a different stack.
Explore the documentation
Jump to another guide.