3줄로 연동
어떤 프레임워크에도 바로 적용되는 디바이스 인텔리전스. 몇 분 만에 프로덕션 준비 완료.
index.js
import { Tracio } from '@tracio/sdk'
const tracio = Tracio.init({ publicKey: '5ca175fc...' })
const { visitorId } = await tracio.getResult()프레임워크 선택
React
디바이스 식별을 위한 자체 React 훅
import { useVisitorId } from '@tracio/react'
function App() {
const { data: visitorId } = useVisitorId()
return <div>Visitor: {visitorId}</div>
}Next.js
Next.js를 위한 풀스택 Device Identification 통합 (App Router + Pages Router)
// app/layout.tsx
import { TracioProvider } from '@tracio/react'
export default function Layout({ children }) {
return (
<TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
{children}
</TracioProvider>
)
}Vue
디바이스 식별을 위한 Vue 3 컴포저블
<script setup>
import { useVisitorId } from '@tracio/vue'
const { data: visitorId } = useVisitorId()
</script>
<template>
<div>Visitor: {{ visitorId }}</div>
</template>Angular
디바이스 식별을 위한 Angular 주입형 서비스
import { Component, inject, effect } from '@angular/core'
import { TracioService } from '@tracio/angular'
@Component({ ... })
export class AppComponent {
private tracio = inject(TracioService)
constructor() {
// visitorId() is a signal — read it reactively
effect(() => console.log(this.tracio.visitorId()))
}
}Cloudflare
자체 라우팅을 위한 Cloudflare Workers 기반 프록시 통합
// Cloudflare Worker
export default {
async fetch(request, env) {
const url = new URL(request.url)
if (url.pathname.startsWith('/tracio/')) {
return fetch('https://edge.tracio.ai' + url.pathname)
}
return fetch(request)
}
}AWS CloudFront
CloudFront Lambda@Edge origin-request 함수를 통한 프록시 통합
// Lambda@Edge function
exports.handler = async (event) => {
const request = event.Records[0].cf.request
if (request.uri.startsWith('/tracio/')) {
request.origin = {
custom: {
domainName: 'edge.tracio.ai',
protocol: 'https',
}
}
}
return request
}Google Tag Manager
GTM 맞춤 HTML 태그로 Device Identification 에이전트 로드
<!-- GTM Custom HTML Tag -->
<script>
(function() {
var script = document.createElement('script');
// Public key travels in the s.js query string (?k=...)
script.src = 'https://edge.tracio.ai/s.js?k=your-public-key';
script.onload = function() {
window.Tracio.load()
.then(function(tc) { return tc.get(); })
.then(function(result) {
dataLayer.push({
event: 'tracio_loaded',
visitorId: result.visitorId
});
});
};
document.head.appendChild(script);
})();
</script>Go
Go 표준 라이브러리로 식별 웹훅 수신 및 검증
package main
import (
"fmt"
"io"
"net/http"
)
func main() {
http.HandleFunc("/webhook/tracio", func(w http.ResponseWriter, r *http.Request) {
body, _ := io.ReadAll(r.Body)
// verify r.Header.Get("X-Tracio-Signature") against body, then act
fmt.Println(string(body))
w.WriteHeader(http.StatusOK)
})
http.ListenAndServe(":8080", nil)
}Rust
Axum을 사용한 Rust 고성능 웹훅 검증
use axum::{body::Bytes, http::HeaderMap, routing::post, Router};
async fn webhook(headers: HeaderMap, body: Bytes) -> &'static str {
// verify headers["x-tracio-signature"] against body, then act
println!("{}", String::from_utf8_lossy(&body));
"OK"
}
#[tokio::main]
async fn main() {
let app = Router::new().route("/webhook/tracio", post(webhook));
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
axum::serve(listener, app).await.unwrap();
}Node.js
Node.js와 Express로 식별 웹훅 수신 및 검증
import express from 'express'
const app = express()
// Capture the raw body so the signature can be verified byte-for-byte.
app.use(express.json({ verify: (req, _res, buf) => ((req as any).rawBody = buf) }))
// Identification events are pushed here in real time
app.post('/webhook/tracio', (req, res) => {
const event = req.body
console.log(event.visitorId, event.bot.result)
res.status(200).send('OK')
})
app.listen(3000)