Skip to main content

Web Setup (React + Vite)

Install​

pnpm add @drakkar.software/sunglasses-core @drakkar.software/sunglasses-react @drakkar.software/sunglasses-storage-localstorage

Add @drakkar.software/sunglasses-storage-http if you push events to a server.

Initialize the client​

// main.tsx
import { SunglassesCore } from '@drakkar.software/sunglasses-core';
import { SunglassesProvider } from '@drakkar.software/sunglasses-react';
import { LocalStorageAdapter } from '@drakkar.software/sunglasses-storage-localstorage';
import { HttpStorageAdapter } from '@drakkar.software/sunglasses-storage-http';

const client = await SunglassesCore.create({
  storage: new LocalStorageAdapter(),
  adapters: [
    new HttpStorageAdapter({ endpoint: 'https://ingest.example.com/batch' }),
  ],
  defaultOptIn: false, // Privacy-first: user must call optIn() first
  platform: 'web',
  debug: process.env.NODE_ENV === 'development',
});

root.render(
  <SunglassesProvider client={client} screenTracking={{ useHistoryApi: true }}>
    <App />
  </SunglassesProvider>
);

Capture events​

// Anywhere in your app
import { useSunglasses } from '@drakkar.software/sunglasses-react';

function BuyButton() {
  const client = useSunglasses();

  return (
    <button onClick={() => client.capture('purchase_clicked', { item: 'pro_plan' })}>
      Upgrade
    </button>
  );
}

Before any events are collected, prompt the user and call client.optIn(). See Consent and Consent UI patterns.

Screen tracking​

SunglassesProvider accepts screenTracking={{ useHistoryApi: true }} to auto-track SPA route changes via the History API. See Screen tracking.

Next steps​