@tracetail/angular

Angular service for TraceTail browser fingerprinting, with 99.6% accuracy: a stable visitor ID for every browser, without cookies or storage. It supports Angular 17 to 22.

Install

npm install @tracetail/angular

Configure

In a standalone app:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideTraceTail } from '@tracetail/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideTraceTail({ apiKey: 'YOUR_API_KEY', endpoint: 'https://tracetail.io/api' })],
};

In an NgModule app:

import { TraceTailModule } from '@tracetail/angular';

@NgModule({
  imports: [TraceTailModule.forRoot({ apiKey: 'YOUR_API_KEY', endpoint: 'https://tracetail.io/api' })],
})
export class AppModule {}

Create a free API key at tracetail.io/auth. The options are those of @tracetail/js: apiKey, endpoint, timeout and debug. Without an API key the service runs keyless: the visitor ID is computed in the browser and nothing is sent anywhere.

Identify a visitor

import { Component, OnInit, inject } from '@angular/core';
import { TraceTailService } from '@tracetail/angular';

@Component({
  selector: 'app-checkout',
  standalone: true,
  template: `<input type="hidden" name="visitorId" [value]="visitorId" />`,
})
export class CheckoutComponent implements OnInit {
  private readonly tracetail = inject(TraceTailService);
  visitorId = '';

  async ngOnInit() {
    const { visitorId } = await this.tracetail.generateFingerprint();
    this.visitorId = visitorId;
  }
}

TraceTailService offers:

| Member | Description | | --- | --- | | generateFingerprint(options?) | Identifies the browser. Options: verbose, detailed (needs an API key) and refresh (skip the cache). Results are cached for the page. If the API call failed, the result still has visitorId, and error holds { status, code, message }. | | fingerprint$ | The latest result, or null before the first identification. | | loading$ | true while identifying. | | error$ | Set when identification itself failed, for example when called without a DOM. | | getComplianceContext() | Browser hints (Global Privacy Control, Do Not Track and the inferred region) for deciding whether to ask for consent first. You are responsible for any consent your visitors' jurisdiction requires. | | client | The underlying TraceTail client from @tracetail/js. |

With Angular SSR, call generateFingerprint() only in the browser (for example inside afterNextRender), because it needs the DOM.

Verify on your server

The visitor ID comes from the browser, so your backend can't tell a real one from one a script made up. Before you trust it for a sign-up, login or payment, send the requestId that generateFingerprint() returns along and look it up with the Server API and a secret server key (tts_…, created in Settings → API keys and kept on your server):

curl https://tracetail.io/api/v1/identifications/$REQUEST_ID \
  -H "Authorization: Bearer $TRACETAIL_SERVER_KEY"

Check that the returned visitorId is the one your page sent. The docs have the full response and Node.js and Python examples.

AI coding agents

Claude Code, Codex, Cursor and other agents can add TraceTail on their own. Connect the MCP server at https://tracetail.io/mcp (no account or key needed; in Claude Code, claude mcp add --transport http tracetail https://tracetail.io/mcp), install the skill with npx skills add https://tracetail.io, or point the agent at llms.txt. An agent gets the API keys through a setup link: it hands you one link, where you sign in with an emailed code and add a card or continue free, and receives a key for each site.

Pricing

Every account includes 1,000 identification requests a month, with no card required. Beyond that it costs $0.10 per 1,000 requests. See pricing.

License

MIT