แพ็กเกจ @tracio/angular ห่อหุ้มแกนหลัก @tracio/sdk เอาไว้ และเปิดให้ใช้ primitive ของ Angular ในแบบที่เป็นสำนวนของ Angular เอง ได้แก่ โปรวายเดอร์ที่คุณกระจาย (spread) เข้าไปในค่าคอนฟิกของแอป และเซอร์วิสที่ทำงานบนพื้นฐาน signal ซึ่งคุณ inject ได้ทุกที่
npm install @tracio/angular @tracio/sdk@angular/core (17, 18 หรือ 19) เป็น peer dependency และถือว่าได้ติดตั้งไว้ในแอปของคุณอยู่แล้ว
กระจาย (spread) provideTracio(config) เข้าไปใน ApplicationConfig.providers ของคุณ
// app.config.tsimport { provideTracio } from "@tracio/angular"export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: "5ca175fc…" })],}Inject TracioService เพื่ออ่านสถานะการระบุตัวตนผ่าน signal แบบ readonly:
| Member | Type | Description |
|---|---|---|
visitorId() | Signal<string | null> | ตัวระบุผู้เยี่ยมชมที่คงที่ |
result() | Signal<TracioResult | null> | ผลการระบุตัวตนแบบเต็ม |
error() | Signal<TracioError | null> | ข้อผิดพลาดล่าสุด ถ้ามี |
isLoading() | Signal<boolean> | กำลังมีการดึงข้อมูลอยู่หรือไม่ |
getVisitorData() | method | ดึงข้อมูลผู้เยี่ยมชม (ซ้ำ) แบบ imperative |
// 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 API ที่เซอร์วิสนี้สร้างต่อยอดขึ้นมา