Пакет @tracio/angular обгортає базовий @tracio/sdk і надає ідіоматичні примітиви Angular: провайдер, який ви додаєте до конфігурації застосунку, і signal-орієнтований сервіс, який ви впроваджуєте будь-де.
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, на якому побудований сервіс