تخطّي إلى المحتوى

حِزم SDK والمكتبات

مكتبات عملاء رسمية لـ JavaScript ولكل إطار عمل رئيسي للواجهة الأمامية. ثبّت وهيّئ وابدأ في تعريف الزوار خلال دقائق.

جميع حِزم SDK منشورة على npm (v0.1.3). ثبّتها اليوم — اطّلع على حِزم @tracio على npm.

دعم أطر العمل

دعم SDK رسمي لـ JavaScript ولأطر العمل الرئيسية للواجهة الأمامية.

اللغةالحزمةأمر التثبيتالحالةالوثائق
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 -->

هل أنت مستعد للبدء؟

جرّب Tracio مجانًا مع 2,500 استدعاء لـ API شهريًا. لا حاجة إلى بطاقة ائتمان.