Angular SDK

O pacote @tracio/angular encapsula o núcleo @tracio/sdk e expõe primitivas idiomáticas do Angular: um provider que você espalha na configuração da sua aplicação e um serviço baseado em signals que você injeta em qualquer lugar.

Instalação

bash

npm install @tracio/angular @tracio/sdk

@angular/core (17, 18 ou 19) é uma peer dependency e espera-se que já esteja instalado no seu app.

Configuração

Espalhe provideTracio(config) no providers do seu ApplicationConfig.

TypeScript

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

Serviço

Injete o TracioService para ler o estado de identificação através de signals somente leitura:

Membro	Tipo	Descrição
`visitorId()`	`Signal<string \| null>`	O identificador estável de visitante.
`result()`	`Signal<TracioResult \| null>`	O resultado completo de identificação.
`error()`	`Signal<TracioError \| null>`	O último erro, se houver.
`isLoading()`	`Signal<boolean>`	Se uma busca está em andamento.
`getVisitorData()`	método	(Re)busca os dados do 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)
}

Chame getVisitorData() para adiar ou reacionar a identificação — por exemplo, apenas depois que o usuário conceder o consentimento.

Exemplo 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 passos

JavaScript SDK Reference — a API central @tracio/sdk sobre a qual o serviço é construído
Error Handling — códigos de erro e estratégias de retry
SDKs overview — cada pacote de framework em um relance

Serviço

Injete o TracioService para ler o estado de identificação através de signals somente leitura:

Membro

Tipo

Descrição

visitorId()

Signal<string | null>

O identificador estável de visitante.

result()

Signal<TracioResult | null>

O resultado completo de identificação.

error()

Signal<TracioError | null>

O último erro, se houver.

isLoading()

Signal<boolean>

Se uma busca está em andamento.

getVisitorData()

método

(Re)busca os dados do 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)
}

Chame getVisitorData() para adiar ou reacionar a identificação — por exemplo, apenas depois que o usuário conceder o consentimento.

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