@tracio/angular पैकेज कोर @tracio/sdk को रैप करता है और idiomatic Angular प्रिमिटिव्स एक्सपोज़ करता है: एक प्रोवाइडर जिसे आप अपने एप्लिकेशन कॉन्फ़िग में स्प्रेड करते हैं, और एक signal-आधारित सर्विस जिसे आप कहीं भी inject कर सकते हैं।
npm install @tracio/angular @tracio/sdk@angular/core (17, 18, या 19) एक peer dependency है और यह अपेक्षित है कि यह आपके ऐप में पहले से इंस्टॉल हो।
provideTracio(config) को अपने ApplicationConfig.providers में स्प्रेड करें।
// app.config.tsimport { provideTracio } from "@tracio/angular"export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: "5ca175fc…" })],}पहचान (identification) स्थिति को readonly signals के माध्यम से पढ़ने के लिए TracioService को inject करें:
| Member | Type | Description |
|---|---|---|
visitorId() | Signal<string | null> | स्थिर विज़िटर आइडेंटिफ़ायर। |
result() | Signal<TracioResult | null> | पूर्ण पहचान परिणाम। |
error() | Signal<TracioError | null> | अंतिम त्रुटि, यदि कोई हो। |
isLoading() | Signal<boolean> | क्या कोई fetch चल रहा है। |
getVisitorData() | method | विज़िटर डेटा को imperatively (पुनः) fetch करें। |
// 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() को कॉल करें — उदाहरण के लिए केवल तभी जब उपयोगकर्ता सहमति (consent) दे दे।
// 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 जिस पर यह सर्विस आधारित है