---
title: "Qwik"
description: "Analytics needs eager browser initialization in Qwik, so use a root-level visible task with the document-ready strategy."
documentation: "https://tracwell.app/docs/frameworks/qwik"
markdown: "https://tracwell.app/docs/frameworks/qwik.md"
---

# Qwik

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

## Initialize Tracwell

```ts
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 component or service that owns the successful product outcome. Call `track()` only after that outcome completes.

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

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

See the [custom events guide](https://tracwell.app/docs/events.md) for naming, property limits, and verification.