Angular SDK

@tracio/angular 패키지는 코어 @tracio/sdk를 감싸 관용적인 Angular 프리미티브를 제공합니다. 애플리케이션 구성에 펼쳐 넣는 프로바이더와, 어디서든 주입할 수 있는 시그널 기반 서비스입니다.

설치

bash

npm install @tracio/angular @tracio/sdk

@angular/core(17, 18 또는 19)는 peer dependency이며, 앱에 이미 설치되어 있다고 가정합니다.

설정

provideTracio(config)를 ApplicationConfig.providers에 펼쳐 넣으세요.

TypeScript

// app.config.ts
import { 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()`	메서드	방문자 데이터를 명령형으로 (재)조회.

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

getVisitorData()를 호출하여 식별을 미루거나 다시 트리거하세요 — 예를 들어 사용자가 동의한 후에만 실행할 수 있습니다.

전체 예제

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

다음 단계

JavaScript SDK 레퍼런스 — 서비스가 기반으로 삼는 코어 @tracio/sdk API
오류 처리 — 오류 코드 및 재시도 전략
SDK 개요 — 모든 프레임워크 패키지를 한눈에

서비스

TracioService를 주입하여 readonly 시그널을 통해 식별 상태를 읽습니다.

멤버

타입

설명

visitorId()

Signal<string | null>

안정적인 방문자 식별자.

result()

Signal<TracioResult | null>

전체 식별 결과.

error()

Signal<TracioError | null>

마지막 오류(있는 경우).

isLoading()

Signal<boolean>

조회가 진행 중인지 여부.

getVisitorData()

메서드

방문자 데이터를 명령형으로 (재)조회.

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

getVisitorData()를 호출하여 식별을 미루거나 다시 트리거하세요 — 예를 들어 사용자가 동의한 후에만 실행할 수 있습니다.

전체 예제

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