React Router

Add DataSaaS analytics to your React application using React Router. The tracking script works automatically with client-side routing.

Method 1: Root Component

Add the tracking script via useEffect in your root App.jsx:

// App.jsx
import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

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

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

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* ... your routes */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Method 2: HTML File

Add the script directly to public/index.html inside the <head> tag:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>

    <!-- DataSaaS Analytics -->
    <script
      defer
      data-website-id="ds_YOUR_WEBSITE_ID"
      data-domain="yourdomain.com"
      src="https://datasaas.co/js/script.min.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Info

The DataSaaS script automatically detects SPA navigation via the History API. No additional configuration is needed for client-side routing.

Verify

Visit your website, then open the DataSaaS dashboard. You should see your visit appear within a few seconds.

Next.js

Vue.js