SDK

React

TrackerProvider, useTracker, TrackEvent, and testing patterns.

AI brief: TrackerProvider calls tracker.init sync on first render (StrictMode-safe). useTracker() returns track, identify, setConsent, getEventId, reset. TrackEvent on mount or click. disabled prop for Storybook.

The React layer is a thin wrapper over the core singleton. TrackerProvider must wrap any component that calls useTracker() or renders TrackEvent.

App.tsx

'use client';
import { TrackerProvider, useTracker, TrackEvent } from '@trackrift/sdk/react';

export function App({ children }: { children: React.ReactNode }) {
  return (
    <TrackerProvider endpoint="https://api.trackrift.com" publicId="YOUR_PUBLIC_ID">
      {children}
    </TrackerProvider>
  );
}

function BuyButton() {
  const { track, getEventId } = useTracker();
  return (
    <button
      onClick={() => {
        const id = track('add_to_cart', { value: 49, currency: 'EUR' });
        console.log('event_id for pixel:', id);
      }}
    >
      Add to cart
    </button>
  );
}

<TrackEvent name="view_content" payload={{ content_ids: ['hero'] }} />

TrackerProvider props

Prop	Required	Notes
endpoint	yes	Collector base URL
publicId	yes	Workspace public id from dashboard
consentMode	no	internal (default) or required for CMP
defaultConsent	no	Initial deny flags when required mode
disabled	no	Skip init — Storybook / tests
debug	no	Console logging

useTracker() return value

Property	Type	Description
track	(name, payload?) => string	Returns event_id
identify	(IdentityPayload) => void	Identify user
setConsent	(ConsentState) => void	Update consent + flush queue
getEventId	(name) => string \| undefined	Last id for event name
reset	() => void	Logout / clear session
link	(url) => string	Cross-domain URL helper

TrackEvent-click.tsx

<TrackEvent
  name="cta_click"
  trigger="click"
  payload={{ properties: { cta: 'start_trial' } }}
>
  <button>Start trial</button>
</TrackEvent>

StrictMode

TrackerProvider initializes synchronously on first render and dedupes duplicate page_view within 1500ms when React StrictMode double-mounts in development.

Testing

Pass disabled={true} to TrackerProvider in Jest/RTL tests, or mock @trackrift/sdk before imports. Avoid asserting on network — spy on tracker.track instead.