コンテンツへスキップ
料金
ログイン無料トライアルを開始デモを予約

SDKとライブラリ

JavaScriptと主要なフロントエンドフレームワーク向けの公式クライアントライブラリ。インストールして設定し、数分で訪問者の識別を開始できます。

すべてのSDKはnpm(v0.1.3)に公開されています。今すぐインストールしましょう — npmで@tracioパッケージを見る

フレームワークのサポート

JavaScriptと主要なフロントエンドフレームワーク向けの公式SDKサポート。

言語パッケージインストールコマンドステータスドキュメント
JavaScript@tracio/sdknpm install @tracio/sdk利用可能ドキュメント
React@tracio/reactnpm install @tracio/react @tracio/sdk利用可能ドキュメント
Vue@tracio/vuenpm install @tracio/vue @tracio/sdk利用可能ドキュメント
Angular@tracio/angularnpm install @tracio/angular @tracio/sdk利用可能ドキュメント
Svelte@tracio/sveltenpm install @tracio/svelte @tracio/sdk利用可能ドキュメント

クイックスタート

コピー&ペーストですぐに使えるサンプル。

JavaScript
利用可能
npm install @tracio/sdk
import { 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/sdk
import { 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/sdk
import { 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/sdk
import { provideTracio } from '@tracio/angular'
export const appConfig: ApplicationConfig = {
providers: [provideTracio({ publicKey: '5ca175fc...' })],
}
// in a component:
// readonly tracio = inject(TracioService)
// tracio.visitorId() // signal
Svelte
利用可能
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 -->

始める準備はできましたか?

月間2,500回のAPIコールでTracioを無料でお試しいただけます。クレジットカードは不要です。