Angular

Use a root-provided service and guard initialization with isPlatformBrowser when the application uses server rendering.

Initialize Tracwell

src/app/analytics.service.ts

import { isPlatformBrowser } from "@angular/common";
import { inject, Injectable, PLATFORM_ID } from "@angular/core";
import { createTracwell } from "tracwell";

@Injectable({ providedIn: "root" })
export class AnalyticsService {
  private readonly platformId = inject(PLATFORM_ID);

  readonly client = isPlatformBrowser(this.platformId)
    ? createTracwell({
        collectionMode: "product",
        projectKey: "tw_live_...",
      })
    : null;
}

// Inject AnalyticsService once in the root App component.

Angular Router navigation is tracked automatically when it updates browser history. Use client?.track() for custom events.

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.