React (Single Page App)

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

Steg 1: Lägg till scriptet

Lägg till scriptet i din index.html:

public/index.html

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8" />
  <title>Min React-app</title>

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

SPA Navigation

Vårt script hanterar automatiskt client-side navigation. Det lyssnar på history.pushState och popstate-events.

Detta fungerar automatiskt med:

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

Spåra events

Skapa en hook för att enkelt spåra events i dina komponenter:

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

Använd hooken i dina komponenter:

import { useAnalytics } from './hooks/useAnalytics';

function ProductCard({ product }) {
  const { trackEvent } = useAnalytics();

  const handleAddToCart = () => {
    trackEvent('Add to Cart', {
      productId: product.id,
      price: product.price
    });
    // ... lägg till i kundvagn
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={handleAddToCart}>
        Lägg i kundvagn
      </button>
    </div>
  );
}

Vite

Om du använder Vite, lägg till scriptet i index.html i projektets rot.

Create React App

Lägg till scriptet i public/index.html.

Behöver du hjälp?

Se alla integrationsguider →