Integrate in 3 Lines
Drop-in device intelligence for any framework. Production-ready in minutes.
import Tracio from '@tracio/client'
const tc = await Tracio.load({ apiKey: 'your-key' })
const { visitorId } = await tc.get()Choose Your Framework
React
First-party React hook for device identification
import { useTraceId } from '@tracio/client/react'
function App() {
const { visitorId, confidence } = useTraceId()
return <div>Visitor: {visitorId}</div>
}Next.js
Full-stack Device Identification integration for Next.js (App Router + Pages Router)
// app/layout.tsx
import { TracioProvider } from '@tracio/client/react'
export default function Layout({ children }) {
return (
<TracioProvider apiKey="your-key">
{children}
</TracioProvider>
)
}Vue
Vue 3 composable for device identification
<script setup>
import { useTraceId } from '@tracio/client/vue'
const { visitorId, confidence } = useTraceId()
</script>
<template>
<div>Visitor: {{ visitorId }}</div>
</template>Angular
Angular injectable service for device identification
import { TracioService } from '@tracio/client/angular'
@Component({ ... })
export class AppComponent {
constructor(private tracio: TracioService) {
tracio.getVisitorId().then(result => {
console.log(result.visitorId)
})
}
}Cloudflare
Proxy integration via Cloudflare Workers for first-party routing
// Cloudflare Worker
export default {
async fetch(request, env) {
const url = new URL(request.url)
if (url.pathname.startsWith('/fp/')) {
return fetch('https://your-fp-server.com' + url.pathname)
}
return fetch(request)
}
}AWS CloudFront
Proxy integration via CloudFront Lambda@Edge origin-request function
// Lambda@Edge function
exports.handler = async (event) => {
const request = event.Records[0].cf.request
if (request.uri.startsWith('/fp/')) {
request.origin = {
custom: {
domainName: 'your-fp-server.com',
protocol: 'https',
}
}
}
return request
}Google Tag Manager
Load the Device Identification agent via a GTM Custom HTML tag
<!-- GTM Custom HTML Tag -->
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://your-domain.com/tracio-agent.js';
script.onload = function() {
Tracio.load({ apiKey: 'your-key' })
.then(tc => tc.get())
.then(result => {
dataLayer.push({
event: 'tracio_loaded',
visitorId: result.visitorId
});
});
};
document.head.appendChild(script);
})();
</script>Go
Server-side event verification with the official Go SDK
package main
import (
"fmt"
tracio "github.com/tracio-ai/tracio-go"
)
func main() {
client := tracio.NewClient("your-secret-key")
event, _ := client.GetEvent(requestID)
fmt.Println(event.VisitorID)
}Rust
High-performance server-side verification with the Rust SDK
use tracio::Client;
#[tokio::main]
async fn main() {
let client = Client::new("your-secret-key");
let event = client.get_event(request_id).await.unwrap();
println!("Visitor: {}", event.visitor_id);
}Node.js
Server-side event verification for Node.js and Express
import { TracioServer } from '@tracio/client/node'
const tracio = new TracioServer({
apiKey: process.env.TRACIO_SECRET,
})
const event = await tracio.getEvent(requestId)
console.log(event.products.identification.data.visitorId)Ready to integrate?
Start with our Quick Start guide and add device intelligence to your application in under 5 minutes.