Skip to content
PricingDocs

Integrate in 3 Lines

Drop-in device intelligence for any framework. Production-ready in minutes.

index.js
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

@tracio/client
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)

@tracio/client
// 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

@tracio/client
<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

@tracio/client
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

wrangler
// 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

aws-cdk
// 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-template
<!-- 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

github.com/tracio-ai/tracio-go
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

tracio
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

@tracio/client
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.