Como adicionar analytics com foco em privacidade a um app Next.js
Um guia passo a passo para integrar o Monoid ao Next.js sem cookies, banners de consentimento ou dores de cabeça com conformidade.
Aplicações Next.js têm algumas abordagens comuns para analytics, e a maioria envolve um banner de cookies ou um script pesado de terceiros que prejudica os Core Web Vitals. Veja como adicionar analytics em tempo real com foco em privacidade sem nenhum deles.
O que você vai obter
- Rastreamento de pageview em cada mudança de rota, incluindo navegação client-side
- Contagens de visitantes, referências, países, famílias de navegador e tipos de dispositivo
- Sem cookies, sem fingerprinting, sem necessidade de consentimento LGPD
- Uma única tag de script async — nenhum pacote npm para manter
Passo 1: Crie uma conta no Monoid
Cadastre-se em monoid.website e crie um novo site. Você receberá um site_id — um identificador alfanumérico curto para sua propriedade.
Passo 2: Adicione o tracker ao seu layout
No Next.js 13+ com o App Router, adicione o script do tracker ao seu layout.tsx raiz:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="pt-BR">
<body>
{children}
<Script
src="https://api.monoid.website/tracker.min.js"
data-site-id="SEU_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}
Usar strategy="afterInteractive" carrega o script depois que a página se torna interativa, sem afetar seu Largest Contentful Paint.
Passo 3: Lidar com navegação client-side
O hook nativo de history.pushState do tracker é disparado automaticamente em cada evento de navegação, tanto no Pages Router quanto no App Router. Você não precisa adicionar nada extra.
Se quiser enviar eventos personalizados — por exemplo, quando um usuário finaliza um checkout ou clica em um botão específico — chame o helper global diretamente:
window.monoid('event', 'checkout_completo')
Passo 4: Verifique no dashboard
Abra seu dashboard do Monoid e navegue para uma página do seu site. Você deve ver um visitante ao vivo aparecer no feed de tempo real em alguns segundos. Se tiver um ambiente de staging, certifique-se de que ele use um site_id separado para que o tráfego de desenvolvimento não contamine suas métricas de produção.
O que não é necessário
Você não precisa instalar um gerenciador de consentimento de cookies. Não precisa atualizar sua política de privacidade para mencionar cookies de analytics (porque não há nenhum). E não precisa de um pacote npm — o tracker é um arquivo JavaScript vanilla servido a partir de uma rede global de edge.
Família de navegador e tipo de dispositivo são derivados no servidor a partir do User-Agent comum da requisição para relatórios agregados. User-Agent completos, versões de navegador, cookies, identificadores persistentes e fingerprints de dispositivo nunca são armazenados.
Para a maioria dos projetos Next.js, isso leva menos de dois minutos do cadastro até os dados ao vivo.