Install Muro on React (Vite or CRA)
Add Muro to a Vite or Create React App project. SPA navigation with React Router is tracked automatically.
For React apps built with Vite or Create React App, the install is the same: paste the snippet into index.html. React Router navigations are tracked without any extra setup.
If you're on Next.js, see Install on Next.js instead.
Vite
Open index.html at the root of your project and add the snippet inside <head>:
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Your app</title>
<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Replace YOUR_PROJECT_ID with your project's ID from Settings → Project → Tracking script.
Create React App
Open public/index.html and add the snippet inside <head>:
<!-- public/index.html -->
<head>
<meta charset="utf-8" />
<title>Your app</title>
<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>
</head>Restart npm start to pick up the change.
SPA navigation
Muro tracks every React Router navigation automatically. React Router calls history.pushState under the hood, and Muro listens for it.
You don't need to wire up useEffect against useLocation, call muro.track() yourself, or subscribe to router events.
Verify
- Run
npm run dev(Vite) ornpm start(CRA). - In Muro, set the time range to Live.
- Reload your app in another tab and click around a few routes.
- Each navigation should show up within 30 seconds.
Tracking custom events
In any React component:
function SignUpButton() {
return (
<button onClick={() => window.muro.track('signup', { source: 'hero' })}>
Sign up
</button>
);
}For TypeScript projects, add the window.muro type declaration once in a .d.ts file. See the TypeScript section in Track custom events.