attribu.tech

React / React Router

Add attribu.tech to your React or React Router project.

Method 1: Add to index.html (recommended)

The simplest approach. Add the script tag to the <head> of your public/index.html:

<!-- public/index.html -->
<head>
  <!-- ... other tags ... -->
  <script
    defer
    data-website-id="YOUR_SITE_ID"
    data-domain="yourdomain.com"
    src="https://attribu.tech/js/script.js"
  ></script>
</head>
Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

Method 2: Dynamic script injection

If you don't have access to index.html (e.g. with Vite or a custom setup), inject the script dynamically in your root component:

// App.tsx
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.defer = true;
    script.dataset.websiteId = "YOUR_SITE_ID";
    script.dataset.domain = "yourdomain.com";
    script.src = "https://attribu.tech/js/script.js";
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    // your app JSX
  );
}

SPA route changes

The tracking script automatically detects client-side navigations via the History API. Route changes in React Router (v5 and v6), TanStack Router, and other client-side routers are tracked without any extra configuration.

Verify installation

  1. Start your React app locally or deploy it.
  2. Open your browser's Developer Tools and check the Network tab for a request to /js/script.js and a POST to /api/events.
  3. Check your attribu.tech dashboard for incoming pageviews.

What's next

PreviousNext.jsNextVue.js
Copied