React

npm install @dwellcount/react

import { DwellcountProvider } from '@dwellcount/react';

function App() {
  return (
    <DwellcountProvider
      config={{
        siteId: 'YOUR_SITE_ID',
        version: '1.0.0',        // Frontend version
        commit: 'abc123',        // Git commit (optional)
        // endpoint: 'https://your-server.com/api/ingest' // Self-hosted
      }}
    >
      <YourApp />
    </DwellcountProvider>
  );
}

import { useTracker } from '@dwellcount/react';

function CheckoutButton() {
  const { track, identify, setBackendVersion } = useTracker();

  const handleCheckout = async () => {
    // Track custom event
    track('checkout_started', {
      cartTotal: 99.99,
      itemCount: 3,
    });

    // Make API call
    const response = await fetch('/api/checkout');

    // Capture backend version from headers
    const backendVersion = response.headers.get('X-App-Version');
    const backendCommit = response.headers.get('X-App-Commit');

    if (backendVersion) {
      setBackendVersion({
        version: backendVersion,
        commit: backendCommit || undefined,
      });
    }
  };

  return <button onClick={handleCheckout}>Checkout</button>;
}

import { usePageView } from '@dwellcount/react';

function ProductPage({ productId }) {
  // Automatically tracks page view when component mounts
  // Re-tracks when productId changes
  usePageView({
    properties: { productId },
  });

  return <div>Product {productId}</div>;
}

import { useBackendVersion } from '@dwellcount/react';

function MyComponent() {
  // Pass the Response object from any fetch call
  const captureVersion = useBackendVersion();

  const fetchData = async () => {
    const response = await fetch('/api/data');
    captureVersion(response); // Extracts X-App-Version header
    return response.json();
  };

  // ...
}