← Documentação

Instalar o SDK

Guias passo a passo

Onde colocar o snippet, como medir eventos e trocas de rota e como conferir se funcionou — para cada stack:

• Next.js
• React
• Vue
• Nuxt
• Astro
• WordPress
• Shopify
• Webflow
• Google Tag Manager
• HTML

Todos os guias de integração →

Tag de script (qualquer framework)

<script src="https://cdn.jsdelivr.net/npm/@racoelho/analytics@0.2/dist/index.global.js"></script>
<script>window.analytics = new Analytics.Analytics({ siteKey: 'YOUR_SITE_KEY' })</script>

O SDK tem uns 4KB comprimido (gzip), envia eventos em lote e, por padrão, rastreia pageviews, Web Vitals e erros de JavaScript não tratados. A instância fica em window.analytics para eventos próprios.

npm (qualquer bundler)

Crie uma instância quando o app iniciar no navegador. O construtor já envia a primeira pageview.

npm install @racoelho/analytics

import { Analytics } from '@racoelho/analytics'

export const analytics = new Analytics({ siteKey: 'YOUR_SITE_KEY' })

analytics.track('signup', { plan: 'pro' })

O SDK não acompanha trocas de rota feitas no cliente: num app de página única, chame analytics.pageview() depois de cada navegação. Os guias mostram onde, para cada roteador.

Ingestão pelo servidor

Envie eventos direto do seu backend para o que acontece fora do navegador (compras, cadastros, conversões via API):

await fetch('https://function-bun-production-3339.up.railway.app/v1/i', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${process.env.ANALISA_SECRET}`,
  },
  body: JSON.stringify({
    site_key: 'YOUR_SITE_KEY',
    batch: [{
      event: 'purchase',
      ts: Date.now(),
      session_id: 'sess_abc',
      user_id: 'user_123',
      props: { value: 9900, currency: 'USD', order_id: 'ord_456' },
    }],
  }),
})

O header Authorization: Bearer usa a secret_key do app (rotacione pelo dashboard). Requisições feitas pelo servidor não passam pela checagem de Allowed origins.

Opções de configuração