# React Router
## Add Humblytics Analytics to a React Router Site
### 1 · Sign up (or log in)
Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.
### 2 · Add your website in Humblytics
In the sidebar, click **Add Website**.
* **Domain** – enter `your-domain.com` (omit `https://` and `www`)
* **Site Name** – internal label (e.g. `Marketing-React`)
Copy the snippet from **Install Tracking Code**:
html
```html
```
Keep this tab open—we'll return and click **Verify Website** once the tag is live.
### 3 · Add the script to your React Router app
⚠️ **Important for SPAs**: React Router doesn't reload the page on navigation, so you need to manually track route changes (see Option B).
#### Option A: Simple setup (tracks initial page load only)
**Best for:** Quick setup, or if you'll handle route tracking separately
**For Create React App:**
1. Open `public/index.html`
2. Add your Humblytics script just before ``:
html
```html
React App
```
**For Vite:**
1. Open `index.html` (in root directory, not `/public`)
2. Add the same script before ``
**Limitation**: This only tracks the initial page load. Route changes won't be tracked automatically.
#### Option B: Full SPA tracking (recommended)
**Best for:** Tracking all route changes in your React Router app
**React Router v6 setup:**
Create a tracking component that listens to route changes:
jsx
```jsx
// src/components/Analytics.jsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export function Analytics() {
const location = useLocation();
useEffect(() => {
// Load Humblytics script on mount
const script = document.createElement('script');
script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE';
script.async = true;
document.head.appendChild(script);
return () => {
// Cleanup on unmount
document.head.removeChild(script);
};
}, []); // Empty array = run once on mount
useEffect(() => {
// Track route changes
if (window.hmbl) {
window.hmbl.trackPageview();
}
}, [location.pathname]); // Run on every route change
return null; // This component doesn't render anything
}
```
Then add it to your app root:
jsx
```jsx
// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Analytics } from './components/Analytics';
function App() {
return (
} />
} />
{/* your other routes */}
);
}
export default App;
```
#### Option C: Production-only tracking
**Best for:** Disabling analytics in development
jsx
```jsx
// src/components/Analytics.jsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export function Analytics() {
const location = useLocation();
useEffect(() => {
// Only load in production
if (process.env.NODE_ENV !== 'production') return;
const script = document.createElement('script');
script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE';
script.async = true;
document.head.appendChild(script);
return () => {
if (document.head.contains(script)) {
document.head.removeChild(script);
}
};
}, []);
useEffect(() => {
if (process.env.NODE_ENV !== 'production') return;
if (window.hmbl) {
window.hmbl.trackPageview();
}
}, [location.pathname]);
return null;
}
```
**Note**: Replace `YOUR_ID_HERE` with your actual project ID from Humblytics.
### 4 · Verify installation
1. **Build and deploy** your app to production
2. Return to Humblytics and click **Verify Website**
3. Open your live site in a private/incognito window
4. Navigate between routes to test route change tracking
5. Within \~30 seconds you should see a green **Verified** badge and live visitor count
**If verification fails, check:**
**React Router-specific issues:**
* You deployed to production (not testing on localhost)
* If using Option B, verify `Analytics` component is mounted in your app
* Check browser console for errors (F12 → Console)
* Route changes should trigger `hmbl.trackPageview()` (check Network tab in DevTools)
* Script loads before route changes happen (use Option B for best results)
**General issues:**
* Script ID matches your project in Humblytics
* Open Developer Tools (F12) → **Network** tab, refresh page, and search for `hmbl.min.js`
* View page source (right-click → View Page Source) and search for "humblytics"
* No ad-blockers or browser extensions are blocking the script
**Debug route tracking:** Add console logs to verify tracking:
jsx
```jsx
useEffect(() => {
console.log('Route changed:', location.pathname);
if (window.hmbl) {
console.log('Tracking pageview');
window.hmbl.trackPageview();
} else {
console.log('Humblytics not loaded yet');
}
}, [location.pathname]);
```
### 5 · Explore & optimize
* **Dashboard** – track traffic, top pages, and referrers (including all route changes)
* **Heatmaps** – auto-generated scroll and click tracking across all routes
* **Experiments** – run A/B tests powered directly by Humblytics