Integrasi dalam 3 Baris

import { useVisitorId } from '@tracio/react'

function App() {
  const { data: visitorId } = useVisitorId()
  return <div>Visitor: {visitorId}</div>
}

// app/layout.tsx
import { TracioProvider } from '@tracio/react'

export default function Layout({ children }) {
  return (
    <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
      {children}
    </TracioProvider>
  )
}

<script setup>
import { useVisitorId } from '@tracio/vue'

const { data: visitorId } = useVisitorId()
</script>

<template>
  <div>Visitor: {{ visitorId }}</div>
</template>

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 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)
  }
}

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

<!-- 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>

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)
}

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();
}

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)