SDKとライブラリ
JavaScriptと主要なフロントエンドフレームワーク向けの公式クライアントライブラリ。インストールして設定し、数分で訪問者の識別を開始できます。
すべてのSDKはnpm(v0.1.3)に公開されています。今すぐインストールしましょう — npmで@tracioパッケージを見る。
フレームワークのサポート
JavaScriptと主要なフロントエンドフレームワーク向けの公式SDKサポート。
| 言語 | パッケージ | インストールコマンド | ステータス | ドキュメント |
|---|---|---|---|---|
| JavaScript | @tracio/sdk | npm install @tracio/sdk | 利用可能 | ドキュメント |
| React | @tracio/react | npm install @tracio/react @tracio/sdk | 利用可能 | ドキュメント |
| Vue | @tracio/vue | npm install @tracio/vue @tracio/sdk | 利用可能 | ドキュメント |
| Angular | @tracio/angular | npm install @tracio/angular @tracio/sdk | 利用可能 | ドキュメント |
| Svelte | @tracio/svelte | npm install @tracio/svelte @tracio/sdk | 利用可能 | ドキュメント |
クイックスタート
コピー&ペーストですぐに使えるサンプル。
JavaScript
利用可能npm install @tracio/sdkimport { Tracio } from '@tracio/sdk'const tracio = Tracio.init({ publicKey: '5ca175fc...' })const result = await tracio.getResult()console.log(result.visitorId)if (result.bot.detected) { console.warn('bot, confidence:', result.bot.confidence)}React
利用可能npm install @tracio/react @tracio/sdkimport { TracioProvider, useVisitorId } from '@tracio/react'function App() { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> <Page /> </TracioProvider> )}function Page() { const { data: visitorId, isLoading, error } = useVisitorId() return <p>Visitor: {visitorId}</p>}Vue
利用可能npm install @tracio/vue @tracio/sdkimport { createApp } from 'vue'import { TracioPlugin } from '@tracio/vue'import App from './App.vue'createApp(App) .use(TracioPlugin, { publicKey: import.meta.env.VITE_TRACIO_KEY }) .mount('#app')// in a component:// const { data: visitorId, isLoading, error } = useVisitorId()Angular
利用可能npm install @tracio/angular @tracio/sdkimport { provideTracio } from '@tracio/angular'export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: '5ca175fc...' })],}// in a component:// readonly tracio = inject(TracioService)// tracio.visitorId() // signalSvelte
利用可能npm install @tracio/svelte @tracio/sdk<script> import { Tracio } from '@tracio/svelte' import { browser } from '$app/environment' if (browser) Tracio.init({ publicKey: import.meta.env.VITE_TRACIO_KEY })</script><!-- in a component: --><!-- const visitor = useVisitorId() --><!-- $visitor.data / $visitor.isLoading -->