Installation Guides
React / Create React App
Install Jetrack in standard React applications
For React applications created with Create React App or similar tools, installation is straightforward.
Installation
Add the tracking script to your public/index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>That's it! The script will load on all pages of your React application.
Single Page Application Support
BrandJet automatically tracks navigation in single-page applications. No additional configuration needed for:
- Client-side route changes
- Browser history navigation
- Programmatic navigation
Using React Helmet
If you prefer managing head tags from React components, you can use React Helmet:
npm install react-helmetThen create an Analytics component:
// src/components/Analytics.tsx
import { Helmet } from 'react-helmet';
export default function Analytics() {
return (
<Helmet>
<script
async
defer
data-website-id="your-unique-id"
src="https://analytics.brandjet.ai/script.js"
/>
</Helmet>
);
}Use it in your App component:
// src/App.tsx
import Analytics from './components/Analytics';
function App() {
return (
<>
<Analytics />
<div className="App">
{/* Your app content */}
</div>
</>
);
}
export default App;Testing
- Start your development server:
npm start - Open
http://localhost:3000in your browser - Check your BrandJet dashboard
- You should see visitor data appear within 30 seconds