SDK de Angular

El paquete @tracio/angular envuelve el núcleo @tracio/sdk y expone primitivas idiomáticas de Angular: un proveedor que inserta en la configuración de su aplicación y un servicio basado en signals que puede inyectar en cualquier parte.

Instalación

bash

npm install @tracio/angular @tracio/sdk

@angular/core (17, 18 o 19) es una peer dependency y se espera que ya esté instalada en su app.

Configuración

Inserte provideTracio(config) en su ApplicationConfig.providers.

TypeScript

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

Servicio

Inyecte TracioService para leer el estado de identificación a través de signals de solo lectura:

Miembro	Tipo	Descripción
`visitorId()`	`Signal<string \| null>`	El identificador de visitante estable.
`result()`	`Signal<TracioResult \| null>`	El resultado de identificación completo.
`error()`	`Signal<TracioError \| null>`	El último error, si lo hay.
`isLoading()`	`Signal<boolean>`	Si hay una obtención en curso.
`getVisitorData()`	método	(Re)obtiene los datos del visitante de forma imperativa.

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

Llame a getVisitorData() para diferir o volver a activar la identificación, por ejemplo solo después de que el usuario otorgue su consentimiento.

Ejemplo completo

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

Próximos pasos

Referencia del SDK de JavaScript — la API del núcleo @tracio/sdk sobre la que se construye el servicio
Manejo de errores — códigos de error y estrategias de reintento
Resumen de los SDKs — todos los paquetes de framework de un vistazo

Servicio

Inyecte TracioService para leer el estado de identificación a través de signals de solo lectura:

Miembro

Tipo

Descripción

visitorId()

Signal<string | null>

El identificador de visitante estable.

result()

Signal<TracioResult | null>

El resultado de identificación completo.

error()

Signal<TracioError | null>

El último error, si lo hay.

isLoading()

Signal<boolean>

Si hay una obtención en curso.

getVisitorData()

método

(Re)obtiene los datos del visitante de forma imperativa.

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

Llame a getVisitorData() para diferir o volver a activar la identificación, por ejemplo solo después de que el usuario otorgue su consentimiento.

Ejemplo completo

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