React

This guide covers a standard client-side React app (Vite, CRA, etc.). For Next.js, see the Next.js guide.

Install

npm install @logspot/web

Initialize

Call Logspot.init once, as early as possible — in your entry file, before rendering:

// src/main.tsx
import Logspot from '@logspot/web';
import { createRoot } from 'react-dom/client';
import App from './App';

Logspot.init({
  publicKey: 'YOUR_PUBLIC_KEY',
  enableAutoPageviews: true,
});

createRoot(document.getElementById('root')!).render(<App />);

Find your public key in Project settings.

Single-page app routing: enableAutoPageviews tracks history changes automatically. If you use a router that doesn't push to history (rare), call Logspot.pageview() on route change instead.

Track Events

Track from any event handler:

import Logspot from '@logspot/web';

function SubscribeButton() {
  return (
    <button
      onClick={() =>
        Logspot.track({ event: 'UserSubscribed', metadata: { plan: 'pro' } })
      }
    >
      Subscribe
    </button>
  );
}

You can also auto-capture clicks without writing handlers — add the lgspt- class:

<button className="lgspt-sign-up">Sign up</button>
// fires a "Sign Up" event on click

…or enable full autocapture in init with autocapture: true.

Identify Users

Logspot.identify('john@doe.com', { plan: 'pro' });

Call Logspot.reset() on logout to stop linking events to that user.

Consent (Optional)

Logspot.setConsent({ analytics: true });

See How Tracking & Identity Works for the consent model.

Verify It's Working

Start your dev server, interact with the app, and watch events land in the Logspot dashboard within seconds.

Related

• JS SDK reference
• How Tracking & Identity Works
• Track API