Remix

Initialize from app/root.tsx. The effect is skipped during server rendering and stays mounted across nested routes.

Initialize Tracwell

app/root.tsx

import { useEffect } from "react";
import { Outlet } from "@remix-run/react";
import { createTracwell, type TracwellClient } from "tracwell";

let analytics: TracwellClient | undefined;

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

  return <Outlet />;
}

Remix client transitions use React Router and browser history, so the SDK records route changes 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.