React

Mount one client-only component near the root. The module-level client prevents React Strict Mode from initializing Tracwell twice in development.

Initialize Tracwell

components/tracwell-analytics.tsx

import { useEffect } from "react";
import { createTracwell, type TracwellClient } from "tracwell";

let analytics: TracwellClient | undefined;

export function TracwellAnalytics() {
  useEffect(() => {
    analytics ??= createTracwell({
      collectionMode: "product",
      projectKey: "tw_live_...",
    });
  }, []);

  return null;
}

Render <TracwellAnalytics /> once inside your root App component. React Router navigation uses the History API and is tracked automatically.

Track an event

Keep the initialized client available to the components or services that own successful product outcomes, then call track() after the outcome completes.

TypeScript

const eventId = analytics.track("signup_completed", {
  plan: "starter",
  source: "pricing",
});

if (!eventId) {
  // Collection is blocked or the event did not pass validation.
}

Continue with the custom events guide for naming, property limits, and verification.