Vue

Intelligence dei dispositivi per Vue

Composable di Vue 3 per l'identificazione dei dispositivi. Aggiunga identificazione dei visitatori, bot detection e smart signals alla sua applicazione Vue in pochi minuti.

Inizi Prenoti una demo

Installazione rapida

Aggiunga l'SDK al suo progetto con il gestore di pacchetti che preferisce.

npmnpm install @tracio/vue

yarnyarn add @tracio/vue

pnpmpnpm add @tracio/vue

Utilizzo di base

Diventi operativo con la configurazione minima.

$vue

<script setup>
import { useVisitorId } from '@tracio/vue'
const { data: visitorId } = useVisitorId()
</script>
<template>
  <div>Visitor: {{ visitorId }}</div>
</template>

Pattern avanzati

Pattern pronti per la produzione con gestione degli errori, stati di caricamento e configurazione avanzata.

Composable con watch e monitoraggio reattivo — Clicchi per espandere

<script setup>
import { ref, watch } from 'vue'
import { useTracioResult } from '@tracio/vue'
const { data, isLoading, error, getData } = useTracioResult()
const history = ref([])
watch(data, (result) => {
  if (result?.visitorId) {
    history.value.push({
      id: result.visitorId,
      timestamp: new Date().toISOString(),
    })
  }
})
</script>
<template>
  <div v-if="isLoading">Identifying...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else-if="data">
    <p>Visitor: {{ data.visitorId }}</p>
    <p>Bot: {{ data.bot.detected ? 'detected' : 'clear' }} ({{ data.bot.confidence }}/100)</p>
    <button @click="getData">Re-identify</button>
  </div>
</template>

Opzioni di configurazione

Tutte le opzioni disponibili per inizializzare e configurare l'SDK.

publicKeystringLa sua chiave pubblica dalla dashboard — può essere distribuita nel browser in sicurezza

endpointstringURL endpoint personalizzato per i deployment instradati tramite proxy — un URL esplicito prevale su region

regionstringRegione dati: us o eu

timeoutMsnumberTimeout dell'intera chiamata getResult(), in millisecondi

linkedIdstringIl suo ID account interno per l'utente autenticato, così le visite che condividono un dispositivo possono essere collegate

tagstringEtichetta libera associata alla richiesta di identificazione, es. checkout o login

debugbooleanRegistra il ciclo di vita dello script e l'attività di rete nella console del browser

scriptUrlstringOverride completo dell'URL dello script agent — per self-hosting o Subresource Integrity

Prossimi passi

Approfondisca con il riferimento API completo, la configurazione dei webhook e le guide avanzate.

Documentazione

Riferimento API completo, guide all'integrazione e best practice.

Legga la documentazione

Webhook

Recapito degli eventi in tempo reale, schema del payload e verifica della firma.

Veda i webhook