Angular-SDK

Das Paket @tracio/angular umhüllt das Kern-@tracio/sdk und stellt idiomatische Angular-Primitive bereit: einen Provider, den Sie in Ihre Anwendungskonfiguration einspreizen, und einen signal-basierten Service, den Sie überall injizieren.

Installation

bash

npm install @tracio/angular @tracio/sdk

@angular/core (17, 18 oder 19) ist eine Peer-Dependency und wird als bereits in Ihrer App installiert vorausgesetzt.

Einrichtung

Spreizen Sie provideTracio(config) in Ihre ApplicationConfig.providers ein.

TypeScript

// app.config.ts
import { provideTracio } from "@tracio/angular"
export const appConfig: ApplicationConfig = {
  providers: [provideTracio({ publicKey: "5ca175fc…" })],
}

Service

Injizieren Sie TracioService, um den Identifizierungsstatus über readonly Signals auszulesen:

Member	Typ	Beschreibung
`visitorId()`	`Signal<string \| null>`	Der stabile Besucher-Identifikator.
`result()`	`Signal<TracioResult \| null>`	Das vollständige Identifizierungsergebnis.
`error()`	`Signal<TracioError \| null>`	Der letzte Fehler, falls vorhanden.
`isLoading()`	`Signal<boolean>`	Ob gerade ein Abruf läuft.
`getVisitorData()`	Methode	Besucherdaten imperativ (erneut) abrufen.

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}

Rufen Sie getVisitorData() auf, um die Identifizierung aufzuschieben oder erneut auszulösen — zum Beispiel erst, nachdem der Nutzer seine Einwilligung erteilt hat.

Vollständiges Beispiel

TypeScript

// app.config.ts
import { provideTracio } from "@tracio/angular"
export const appConfig: ApplicationConfig = {
  providers: [provideTracio({ publicKey: "5ca175fc…" })],
}

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}

Nächste Schritte

JavaScript-SDK-Referenz — die Kern-@tracio/sdk-API, auf der der Service aufbaut
Fehlerbehandlung — Fehlercodes und Retry-Strategien
SDKs-Überblick — jedes Framework-Paket auf einen Blick

Service

Injizieren Sie TracioService, um den Identifizierungsstatus über readonly Signals auszulesen:

Member

Typ

Beschreibung

visitorId()

Signal<string | null>

Der stabile Besucher-Identifikator.

result()

Signal<TracioResult | null>

Das vollständige Identifizierungsergebnis.

error()

Signal<TracioError | null>

Der letzte Fehler, falls vorhanden.

isLoading()

Signal<boolean>

Ob gerade ein Abruf läuft.

getVisitorData()

Methode

Besucherdaten imperativ (erneut) abrufen.

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}

Rufen Sie getVisitorData() auf, um die Identifizierung aufzuschieben oder erneut auszulösen — zum Beispiel erst, nachdem der Nutzer seine Einwilligung erteilt hat.

Vollständiges Beispiel

TypeScript

// app.config.ts
import { provideTracio } from "@tracio/angular"
export const appConfig: ApplicationConfig = {
  providers: [provideTracio({ publicKey: "5ca175fc…" })],
}

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}