Пакет @tracio/angular оборачивает базовый @tracio/sdk и предоставляет идиоматичные примитивы Angular: провайдер, который вы добавляете в конфигурацию приложения, и построенный на сигналах сервис, который можно внедрять где угодно.
npm install @tracio/angular @tracio/sdk@angular/core (17, 18 или 19) является peer-зависимостью и предполагается, что он уже установлен в вашем приложении.
Добавьте provideTracio(config) в ApplicationConfig.providers.
// app.config.tsimport { provideTracio } from "@tracio/angular"export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: "5ca175fc…" })],}Внедрите TracioService, чтобы читать состояние идентификации через readonly-сигналы:
| Член | Тип | Описание |
|---|---|---|
visitorId() | Signal<string | null> | Стабильный идентификатор посетителя. |
result() | Signal<TracioResult | null> | Полный результат идентификации. |
error() | Signal<TracioError | null> | Последняя ошибка, если она есть. |
isLoading() | Signal<boolean> | Выполняется ли сейчас запрос. |
getVisitorData() | метод | (Повторно) запросить данные посетителя. |
// home.component.tsimport { 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)}Вызовите getVisitorData(), чтобы отложить или повторно запустить идентификацию — например, только после того, как пользователь дал согласие.
// app.config.tsimport { provideTracio } from "@tracio/angular"export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: "5ca175fc…" })],}// home.component.tsimport { 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)}@tracio/sdk, на котором построен сервис