React (Single Page App)

Integration för React-appar med react-router eller liknande routing-bibliotek.

Rekommenderat: npm-paket

Använd vårt officiella @savri/tracker-paket för bästa React-integration med TypeScript-stöd och React hooks.

Använda @savri/tracker (Rekommenderat)

1. Installera paketet

npm install @savri/tracker

2. Lägg till Providern

Wrappa din app med SavriProvider:

src/App.tsx

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

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

export default App

3. Spåra events

Använd useTracker-hooken i vilken komponent som helst:

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

Både npm-paketet och scriptet hanterar automatiskt client-side navigation. De lyssnar på history.pushState och popstate-events.

Detta fungerar automatiskt med:

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

Alternativ: Script-tagg

Om du hellre inte vill använda npm kan du lägga till tracking-scriptet direkt i din HTML.

public/index.html

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

  <!-- Besökskollen tracking -->
  <script defer
    data-site-id="YOUR-SITE-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Custom hook för events

Skapa en hook för att spåra events när du använder script-taggen:

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 };
}

Behöver du hjälp?

Se fullständig SDK-dokumentation →Se alla integrationsguider →