Qwik

Analytics needs eager browser initialization in Qwik, so use a root-level visible task with the document-ready strategy.

Initialize Tracwell

src/components/tracwell-analytics.tsx

import { component$, useVisibleTask$ } from "@builder.io/qwik";
import { createTracwell } from "tracwell";

export const TracwellAnalytics = component$(() => {
  useVisibleTask$(() => {
    createTracwell({
      collectionMode: "product",
      projectKey: "tw_live_...",
    });
  }, { strategy: "document-ready" });

  return null;
});

Render this component once in the root layout. The eager task is intentional because analytics must start without waiting for user interaction.

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.