React (Single Page App)

Integration for React apps with react-router or similar routing libraries.

Recommended: npm package

Use our official @savri/tracker package for the best React integration with TypeScript support and React hooks.

View full SDK documentation →

Using @savri/tracker (Recommended)

1. Install the package

npm install @savri/tracker

2. Add the Provider

Wrap your app with SavriProvider:

src/App.tsx

import { SavriProvider } from '@savri/tracker/react'

function App() {
  return (
    <SavriProvider siteId="your-site-id">
      <Router>
        {/* Your app */}
      </Router>
    </SavriProvider>
  )
}

export default App

3. Track events

Use the useTracker hook in any component:

import { useTracker } from '@savri/tracker/react'

function ProductCard({ product }) {
  const { trackEvent } = useTracker()

  const handleAddToCart = () => {
    trackEvent('Add to Cart', {
      productId: product.id,
      price: product.price
    })
  }

  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={handleAddToCart}>
        Add to cart
      </button>
    </div>
  )
}

SPA Navigation

Both the npm package and script automatically handle client-side navigation. They listen to history.pushState and popstate events.

This works automatically with:

  • • React Router (v5 and v6)
  • • Reach Router
  • • TanStack Router
  • • Wouter

Alternative: Script tag

If you prefer not to use npm, you can add the tracking script directly to your HTML.

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My React App</title>

  <!-- Savri tracking -->
  <script defer
    data-site-id="YOUR-SITE-ID"
    data-api="https://savri.io"
    src="https://savri.io/script.js">
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Custom hook for events

Create a hook to track events when using the script tag:

src/hooks/useAnalytics.ts

declare global {
  interface Window {
    va?: (type: string, name: string, props?: object) => void;
  }
}

export function useAnalytics() {
  const trackEvent = (name: string, props?: object) => {
    if (typeof window !== 'undefined' && window.va) {
      window.va('event', name, props);
    }
  };

  return { trackEvent };
}

Need help?

View full SDK documentation →See all integration guides →