Angular SDK

@tracio/angularパッケージはコアの@tracio/sdkをラップし、Angularらしいプリミティブを提供します。アプリケーション設定にスプレッドするproviderと、どこにでもインジェクトできるsignalベースのserviceです。

インストール

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をインジェクトして、読み取り専用のsignalを通じて識別状態を読み取ります:

メンバー	型	説明
`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 Reference — serviceが構築される基盤となるコアの@tracio/sdk API
Error Handling — エラーコードと再試行戦略
SDKs overview — すべてのフレームワークパッケージを一覧で

サービス

TracioServiceをインジェクトして、読み取り専用のsignalを通じて識別状態を読み取ります:

メンバー

型

説明

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