React (Vite / CRA)

A client-side React app built with Vite or Create React App has one HTML entry file. Put the tag in its <head> and it loads on every route.

Copy your tracking snippet

In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

YOUR_SITE_ID is the numeric ID of your site.

Add the snippet to React (Vite / CRA)

Find the entry file for your tooling:

Vite: index.html in the project root.
Create React App: public/index.html.

Add the tag before </head>:

index.html

<head>
  <meta charset="utf-8" />
  <title>My React App</title>
  <script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
</head>

Placing it before </body> also works, but <head> starts the download sooner. Route changes from React Router and similar libraries are tracked automatically.

Check that it works

Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.

If nothing arrives:

View the page source and search for script.js?siteId= to confirm the tag is present.
In the browser's Network tab, check that script.js returns 200 and that requests go to /api/track.
Turn off ad blockers, or proxy the script through your own domain.
Read script troubleshooting for other causes.

Track custom events

src/components/LearnMoreButton.jsx

export default function LearnMoreButton() {
  const handleClick = () => {
    window.onyx?.event("button_click", { category: "CTA", label: "Learn More" });
  };

  return <button onClick={handleClick}>Learn more</button>;
}

Troubleshooting

Missing pageviews after navigation: rare with React Router. If it happens, call window.onyx.pageview() after each route change, but test the default behavior first.

Next steps

Track custom events such as signups, purchases, and clicks.
Identify users to tie sessions to accounts.
Proxy the script through your own domain to get past ad blockers.
Script attributes let you skip or mask URLs and tag events.