React Router

Initialize from the root route or application shell. Effects run only in the browser, including framework-mode applications that render on the server.

Initialize Tracwell

app/root.tsx

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

let analytics: TracwellClient | undefined;

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

  return <Outlet />;
}

For library mode, put the same effect in the component that renders BrowserRouter. Client-side route changes are tracked through browser history.

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.