Guia de integração

Analytics no Vue

Para apps Vue 3 de página única. Uma instância do SDK num módulo e um gancho no Vue Router para contar cada rota. Usa Nuxt? Veja o guia do Nuxt.

Antes de começar

Vue 3 com Vite e Vue Router 4.
A site_key e o domínio em Allowed origins.

Instalação

1Instale o SDK
Variáveis do Vite expostas ao navegador começam com VITE_.
```
npm install @racoelho/analytics
```
.env
```
VITE_ANALISA_SITE_KEY=YOUR_SITE_KEY
```

2Crie a instância

Num módulo próprio, para importar de qualquer componente.

src/analytics.ts

import { Analytics } from '@racoelho/analytics'

// uma instância para o app; o construtor já envia a primeira pageview
export const analytics = new Analytics({
  siteKey: import.meta.env.VITE_ANALISA_SITE_KEY,
})

3Conte as trocas de rota no `main.ts`

O afterEach roda depois que a navegação termina e a URL já mudou.

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { analytics } from './analytics'

router.afterEach((to, from) => {
  // só quando o caminho muda (a query sozinha não é página nova)
  if (to.path !== from.path) analytics.pageview()
})

createApp(App).use(router).mount('#app')

Eventos e metas

Importe analytics e chame track(nome, propriedades) — ou os atalhos signup, formSubmit, purchase etc.

src/components/PlanButton.vue

<script setup lang="ts">
import { analytics } from '@/analytics'

function choosePlan(plan: string) {
  analytics.track('plan_selected', { plan })
}
</script>

<template>
  <button @click="choosePlan('pro')">Assinar o Pro</button>
</template>

Crie no painel uma meta do tipo evento com o nome plan_selected para ver quais origens levam à escolha do plano.

Navegação entre páginas

O SDK conta a primeira carga sozinho, mas não detecta a navegação do Vue Router — o afterEach acima resolve. Rotas no modo hash (createWebHashHistory) não são diferenciadas, porque o SDK registra o caminho sem o #; use createWebHistory.

Confira se está funcionando

Abra o site publicado numa janela comum, sem bloqueador de anúncios.
Nas ferramentas do navegador, aba Network, filtre por v1/i: deve aparecer um POST com status 200 em até 3 segundos (ou quando você sai da página).
No painel, os eventos aparecem em cerca de 30 segundos.
Navegue por um <RouterLink>: cada troca de caminho gera um novo page_view.

Problemas comuns

Todas as páginas aparecem como /: O router está em modo hash. O SDK registra location.pathname, que não muda com #/rota. Troque para createWebHistory() (o servidor precisa devolver o index.html para qualquer caminho).
A requisição volta 403 (origin_not_allowed): O domínio não está em Allowed origins nas configurações do site. Cadastre a origem exata — com https://, com e sem www, e endereços de teste como http://localhost:3000 se quiser medir em desenvolvimento.
Nenhuma requisição aparece na aba Network: O SDK respeita o Do Not Track por padrão: se o seu navegador envia DNT, nada é enviado. Teste em outro navegador ou perfil. Bloqueadores de anúncio também podem barrar o script.
As pageviews aparecem em dobro: O SDK foi inicializado duas vezes (por exemplo, o script colado no tema e também por um plugin). Mantenha uma única instância por página.

Crie sua conta e pegue a site_key

Grátis até 10 mil eventos por mês, sem cartão.

Criar conta grátis