React Analytics Integration

To add tinyanalytics to a React app built with Vite or Create React App, put the tracking snippet in your index.html. Because it’s a single-page app, one tag in the HTML shell covers every route — client-side navigation is tracked automatically.

Before you start

A tinyanalytics site. If you don’t have one yet, follow the Quickstart.
Your site’s numeric site ID, from Settings → Tracking in your dashboard.

Add the snippet to index.html

Open the index.html at the root of your project (Vite) or in public/ (Create React App), and add the snippet inside <head>:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <script defer src="https://dash.tinyanalytics.io/script.js"
      data-site-id="YOUR_SITE_ID"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Replace YOUR_SITE_ID with your real site ID, and copy the full snippet from Settings → Tracking if you’ve toggled any options.

That’s it — the script loads once for the whole app and needs no changes as your app grows.

Client-side routing is tracked automatically

React apps change routes on the client (with React Router or similar), and tinyanalytics records each route change as a new pageview by default (data-track-spa). You don’t need to hook into your router. See Track single-page apps to change this behavior.

Verify

Run your app, open it in a browser, then check Realtime in your dashboard for your visit. See Verify your setup for the full check.

Your install is working when your own visit appears in Realtime in your dashboard.

Install on Next.js

A Next.js app instead.

Track custom events

Send events from your components.

Configure the tracking script

Every data-* option you can set.

Verify your setup

Confirm tracking works.

Choose an install method

Frameworks

Other platforms

React Analytics Integration

Before you start

Add the snippet to index.html

Client-side routing is tracked automatically

Verify

Install on Next.js

Track custom events

Configure the tracking script

Verify your setup

​Before you start

​Add the snippet to index.html

​Client-side routing is tracked automatically

​Verify

​Related

Install on Next.js

Track custom events

Configure the tracking script

Verify your setup

Before you start

Add the snippet to index.html

Client-side routing is tracked automatically

Verify

Related