Angular SDK

Het pakket @tracio/angular verpakt de kern-@tracio/sdk en biedt idiomatische Angular-primitieven: een provider die je in je applicatieconfiguratie spreidt, en een op signals gebaseerde service die je overal kunt injecteren.

Installatie

bash

npm install @tracio/angular @tracio/sdk

@angular/core (17, 18 of 19) is een peer-dependency en wordt verondersteld al in je app geïnstalleerd te zijn.

Configuratie

Spreid provideTracio(config) in je ApplicationConfig.providers.

TypeScript

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

Service

Injecteer TracioService om de identificatiestatus uit te lezen via readonly signals:

Member	Type	Beschrijving
`visitorId()`	`Signal<string \| null>`	De stabiele bezoekersidentificator.
`result()`	`Signal<TracioResult \| null>`	Het volledige identificatieresultaat.
`error()`	`Signal<TracioError \| null>`	De laatste fout, indien aanwezig.
`isLoading()`	`Signal<boolean>`	Of er een fetch onderweg is.
`getVisitorData()`	methode	Bezoekersgegevens imperatief (opnieuw) ophalen.

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)
}

Roep getVisitorData() aan om de identificatie uit te stellen of opnieuw te activeren — bijvoorbeeld pas nadat de gebruiker toestemming heeft gegeven.

Volledig voorbeeld

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)
}

Volgende stappen

JavaScript SDK-referentie — de kern-@tracio/sdk-API waarop de service voortbouwt
Foutafhandeling — foutcodes en retry-strategieën
SDK's-overzicht — elk framework-pakket in één oogopslag

Service

Injecteer TracioService om de identificatiestatus uit te lezen via readonly signals:

Member

Type

Beschrijving

visitorId()

Signal<string | null>

De stabiele bezoekersidentificator.

result()

Signal<TracioResult | null>

Het volledige identificatieresultaat.

error()

Signal<TracioError | null>

De laatste fout, indien aanwezig.

isLoading()

Signal<boolean>

Of er een fetch onderweg is.

getVisitorData()

methode

Bezoekersgegevens imperatief (opnieuw) ophalen.

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)
}

Roep getVisitorData() aan om de identificatie uit te stellen of opnieuw te activeren — bijvoorbeeld pas nadat de gebruiker toestemming heeft gegeven.

Volledig voorbeeld

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)
}