Panduan ini memandu Anda mengintegrasikan TRACIO ke dalam aplikasi Anda. Anda akan memasang client SDK, menginisialisasinya dengan public key Anda, dan membaca hasil identifikasi pengunjung pertama Anda.
Pasang TRACIO SDK menggunakan package manager pilihan Anda:
npm install @tracio/sdkAtau dengan pnpm:
pnpm add @tracio/sdkAtau dengan yarn:
yarn add @tracio/sdkJika Anda tidak menggunakan bundler, sisipkan tag edge script ke dalam halaman Anda. Tag ini melakukan inisialisasi otomatis dengan public key pada parameter query k:
<script src="https://edge.tracio.ai/s.js?k=PUBLIC_KEY" async></script>Impor Tracio dan panggil Tracio.init() dengan public key Anda. Pemanggilan ini langsung mengembalikan TracioInstance — agent yang mendasarinya dimuat di latar belakang.
import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc...",})Public key Anda aman untuk disertakan dalam kode sisi klien. Anda dapat menemukannya di dashboard Anda pada bagian API Keys.
Tracio.init() menerima objek TracioConfig:
| Opsi | Tipe | Default | Deskripsi |
|---|---|---|---|
publicKey | string | wajib | Public key Anda. Salin dari dashboard Anda. |
region | "us" | "eu" | tidak ada | Region data opsional. Bila tidak diset, SDK menggunakan endpoint generik https://edge.tracio.ai (tanpa implikasi residensi data US). Set secara eksplisit untuk mengunci us atau eu. |
endpoint | string | otomatis | Endpoint API kustom (untuk endpoint yang diproksikan first-party). |
scriptUrl | string | otomatis | URL kustom untuk agent script (untuk endpoint yang diproksikan first-party). |
linkedId | string | tidak ada | Identifier yang menautkan pengunjung ini ke suatu entitas dalam sistem Anda. |
tag | string | tidak ada | Label bebas yang dilampirkan ke request untuk pemfilteran di kemudian hari. |
debug | boolean | false | Mencatat diagnostik terperinci ke console. |
timeoutMs | number | 15000 | Berapa lama menunggu hasil sebelum terjadi timeout. |
Panggil tracio.getVisitorId() untuk menerima identifier pengunjung yang stabil. Ini adalah operasi asinkron.
const visitorId = await tracio.getVisitorId()
console.log(visitorId) // "X7fh2Hg9LkMn3pQr"Panggil tracio.getResult() untuk menerima hasil identifikasi lengkap, termasuk deteksi bot.
const result = await tracio.getResult()
console.log(result.visitorId) // "X7fh2Hg9LkMn3pQr"
if (result.bot.detected) { console.warn("bot, confidence:", result.bot.confidence)}Hasilnya memiliki bentuk:
{ visitorId: "X7fh2Hg9LkMn3pQr", bot: { detected: false, confidence: 2, // 0-100 reasons: [], },}Gunakan callback lifecycle untuk bereaksi saat agent siap atau saat terjadi kegagalan, dan destroy() untuk membongkar instance:
const tracio = Tracio.init({ publicKey: "5ca175fc..." })
tracio.onReady((result) => { console.log("ready:", result.visitorId)})
tracio.onError((error) => { console.error("tracio error:", error.code, error.message)})
// later, when you no longer need ittracio.destroy()Lihat Penanganan Error untuk daftar lengkap kode error dan helper retry.
import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc..." })
async function handleLogin(email: string, password: string) { const visitorId = await tracio.getVisitorId()
const response = await fetch("/api/login", { method: "POST", body: JSON.stringify({ email, password, visitorId }), })
return response.json()}import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc...", tag: "payment",})
async function processPayment(paymentData: PaymentData) { const result = await tracio.getResult()
if (result.bot.detected) { throw new Error("Automated client detected") }
const response = await fetch("/api/payment", { method: "POST", body: JSON.stringify({ ...paymentData, visitorId: result.visitorId }), })
return response.json()}