SDK Angular

Le paquet @tracio/angular encapsule le cœur @tracio/sdk et expose des primitives idiomatiques d'Angular : un provider que vous insérez dans la configuration de votre application, et un service basé sur les signals que vous injectez n'importe où.

Installation

bash

npm install @tracio/angular @tracio/sdk

@angular/core (17, 18 ou 19) est une peer dependency et doit déjà être installé dans votre application.

Configuration

Insérez provideTracio(config) dans votre ApplicationConfig.providers.

TypeScript

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

Service

Injectez TracioService pour lire l'état d'identification à travers des signals en lecture seule :

Membre	Type	Description
`visitorId()`	`Signal<string \| null>`	L'identifiant visiteur stable.
`result()`	`Signal<TracioResult \| null>`	Le résultat d'identification complet.
`error()`	`Signal<TracioError \| null>`	La dernière erreur, le cas échéant.
`isLoading()`	`Signal<boolean>`	Indique si une récupération est en cours.
`getVisitorData()`	méthode	(Re)récupère les données du visiteur de manière impérative.

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

Appelez getVisitorData() pour différer ou relancer l'identification — par exemple uniquement après que l'utilisateur a donné son consentement.

Exemple complet

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

Étapes suivantes

Référence du SDK JavaScript — l'API du cœur @tracio/sdk sur laquelle repose le service
Gestion des erreurs — codes d'erreur et stratégies de nouvelle tentative
Aperçu des SDK — tous les paquets par framework en un coup d'œil

Service

Injectez TracioService pour lire l'état d'identification à travers des signals en lecture seule :

Membre

Type

Description

visitorId()

Signal<string | null>

L'identifiant visiteur stable.

result()

Signal<TracioResult | null>

Le résultat d'identification complet.

error()

Signal<TracioError | null>

La dernière erreur, le cas échéant.

isLoading()

Signal<boolean>

Indique si une récupération est en cours.

getVisitorData()

méthode

(Re)récupère les données du visiteur de manière impérative.

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

Appelez getVisitorData() pour différer ou relancer l'identification — par exemple uniquement après que l'utilisateur a donné son consentement.

Exemple complet

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