Install Muro on React

Add the Muro script to a React app built with Vite or Create React App. React Router navigation is tracked automatically.

For a React app built with Vite or Create React App, the Muro script goes in your index.html. React Router navigations are tracked without any extra code. On Next.js, use the Next.js guide instead.

Steps

Copy your snippet

In Muro, go to Settings → Project → Tracking script and click Copy script:

<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>

Paste it into index.html

Open index.html in the root of your project and paste 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>

Open public/index.html and paste 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.

Don't add the script from a React component or a useEffect. Keeping it in index.html loads it once, as early as possible.

Build and deploy

Build and deploy as usual (npm run build, then your host's deploy step).

Verify it works

Open your deployed app.
Open DevTools, go to the Network tab, filter by collect and reload. You should see a POST to cdn.muroanalytics.com/collect with status 202.
Navigate to another route. A new collect request appears.
Or, in Muro, set the time picker to Live. Your visit appears within about 30 seconds.

Good to know

No router code needed. React Router uses history.pushState, which Muro listens to. Don't also call window.muro.track on location changes, or every page is counted twice.
Hash routing isn't tracked. With HashRouter (URLs like /#/settings), every route counts as the same page. Use BrowserRouter or createBrowserRouter. See Single-page apps.
Calling window.muro from components. Use window.muro?.track(...) in event handlers, never during render. See Track custom events.
Keep localhost out. Muro counts npm run dev visits too. See Keep staging and localhost out of your data.

Install Muro on React

Steps

Copy your snippet

Paste it into index.html

Build and deploy

Verify it works

Good to know

Next steps

Track custom events

Set up goals

Understand insights

On this page