Installation Guides
React Router Installation
Install Jetrack in React Router applications
Jetrack automatically tracks route changes in React Router applications. Choose the installation method based on your setup.
Vite + React Router
For modern React applications using Vite and React Router, add the script to your index.html.
Installation Steps
Edit your index.html in the project root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your App</title>
<!-- Jetrack -->
<script
async
defer
data-website-id="your-unique-id"
src="https://analytics.brandjet.ai/script.js">
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Automatic Route Tracking
BrandJet automatically detects route changes in React Router. No additional code needed!
// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
)
}
export default AppEvery route navigation will be automatically tracked as a new page view.
Remix (React Router SSR)
For Remix applications, add the script to your root component.
Installation Steps
Edit app/root.tsx:
import type { LinksFunction } from "@remix-run/node";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
{/* Jetrack */}
<script
async
defer
data-website-id="your-unique-id"
src="https://analytics.brandjet.ai/script.js"
/>
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}Create React App (CRA)
For Create React App projects, add the script to public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App</title>
<!-- Jetrack -->
<script
async
defer
data-website-id="your-unique-id"
src="https://analytics.brandjet.ai/script.js">
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>Using Environment Variables
For better configuration management across environments:
Vite
Create .env.local:
VITE_BRANDJET_WEBSITE_ID=your-unique-idUpdate index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Your App</title>
<script type="module">
const script = document.createElement('script');
script.async = true;
script.defer = true;
script.src = 'https://analytics.brandjet.ai/script.js';
script.setAttribute('data-website-id', import.meta.env.VITE_BRANDJET_WEBSITE_ID);
document.head.appendChild(script);
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Remix
Create .env:
PUBLIC_BRANDJET_WEBSITE_ID=your-unique-idUpdate app/root.tsx:
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
<script
async
defer
data-website-id={process.env.PUBLIC_BRANDJET_WEBSITE_ID}
src="https://analytics.brandjet.ai/script.js"
/>
</head>
<body>
<Outlet />
<Scripts />
</body>
</html>
);
}React Router v6 Features
BrandJet seamlessly tracks all React Router v6 navigation methods:
<Link to="/path">- Standard navigation<NavLink to="/path">- Active navigation linksuseNavigate()hook - Programmatic navigation- Browser back/forward buttons
- Hash-based routing
Testing Your Installation
- Start your development server
- Vite:
npm run dev - Remix:
npm run dev - CRA:
npm start
- Vite:
- Open your app in a browser
- Navigate between routes
- Check your BrandJet dashboard
- Verify that route changes are tracked as separate page views
Troubleshooting
Script Not Loading
- Check the browser console for errors
- Verify the script URL is correct:
https://analytics.brandjet.ai/script.js - Ensure your website ID matches the one in your dashboard
Route Changes Not Tracked
- BrandJet uses the History API to detect route changes
- This works automatically with React Router's
BrowserRouter - If using
HashRouter, hash changes are also tracked
Duplicate Page Views
- Make sure you only add the script once (in index.html, not in components)
- Don't add the script in multiple layout components
CORS Errors
- Always load the script from
https://analytics.brandjet.ai/script.js - Don't try to download and self-host the script
Advanced: Manual Page View Tracking
If you need to manually track specific events:
// Track a custom page view
if (window.brandjet) {
window.brandjet.trackPageview({
url: '/custom-path',
title: 'Custom Page Title'
});
}This is optional - automatic tracking handles most use cases.