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 and 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 and Identity Works
• Track API