Installation guides

Install on React (Vite)

In a Vite app, the tracker belongs in index.html, not inside a component.

Copy your snippet
In MetricRaven, open your site's Settings → Install card and copy the script tag. It already contains your site ID.
Paste it into index.html before </head>
Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.
index.html
1
2
3
4
5
```
<script
  defer
  src="https://metricraven.com/js/script.js"
  data-site-id="YOUR_SITE_ID"
></script>
```
index.html sits in your project root. Vite copies the tag into the production build unchanged.
Build, deploy and open your app
The Vite dev server runs on localhost, which is not tracked by default; check the deployed app.

Verify it works

Open your live website in a normal browser window (not an automated or embedded one). In the browser's Network panel, look for script.js and then a request to /api/v1/collect whose response contains ok: true. Open your site's Traffic tab and choose Refresh; the selected dates must include your visit.

Nothing showing? See Troubleshooting.

Notes

React Router and similar routers change pages with the history API. The tracker records those navigations automatically.
Avoid adding the script from a useEffect or component: a single tag in index.html loads it exactly once.
Using a hash router (/#/pricing)? Add data-track-hash="true". See SPA & virtual pages.
Track events from components with window.analytics.track(); see Goals & funnels.

Optional script attributes are listed in Install & verify. To exclude your own visits, see Exclude your visits.