Telemetria Nativa: Substituindo GTM por Vercel Analytics e Speed Insights
Construir a interface perfeita não importa se o usuário fechar a aba porque ela demorou para carregar devido a 40 scripts de rastreamento. No mundo do SaaS de elite, cada milissegundo vale dinheiro.
Nesta arquitetura, tratamos scripts de rastreamento pesados de terceiros, como o Google Tag Manager (GTM) ou Hotjar, como cidadãos de segunda classe na página inicial.
A nossa estratégia principal baseia-se na Telemetria Nativa Edge.
1. O Custo Oculto do Google Analytics / GTM
Quando você injeta um GTM no <head> do seu Next.js, você está:
- Realizando DNS lookups para os servidores da Google.
- Baixando dezenas de kilobytes de JavaScript não otimizado para o seu escopo.
- Disputando a Thread principal (Main Thread) do navegador, atrasando a interatividade do React (Time to Interactive).
- Sofrendo bloqueio cego (Adblockers e Brave Browser bloqueiam o GA por padrão, distorcendo radicalmente as suas métricas de visitas).
2. O Padrão: Vercel Analytics & Speed Insights
Como a nossa malha de entrega é a Vercel, a coleta de dados de acesso e performance deve ser executada pelas ferramentas nativas dela, que já rodam no mesmo CDN que serve o site, minimizando round-trips de rede.
Vercel Web Analytics (@vercel/analytics)
- O que faz: Monitora pageviews, origens de tráfego, dispositivos e sessões únicas de forma anônima (Privacy-First).
- Vantagem: Injetado diretamente como componente React na raiz (
app/layout.tsx). Como o script vem do próprio domínio que serve o app, ele raramente é interceptado por adblockers (First-Party tracking).
Vercel Speed Insights (@vercel/speed-insights)
- O que faz: Coleta métricas reais do usuário (Real User Metrics - RUM) baseadas nos Core Web Vitals (LCP, FID, CLS, INP).
- Vantagem: Enquanto testes de Lighthouse medem performance no vácuo de um laboratório (conexão simulada rápida do Google), o Speed Insights mostra como a página realmente está carregando naquele celular 3G fraco do cliente lá no interior, permitindo rastrear regressões de performance tela por tela.
3. "Mas o Marketing insiste no GTM!"
Se a equipe de Growth ou Marketing exigir Pixel do Facebook, Google Ads ou GTM, você deve utilizar o pacote estrito @next/third-parties.
Você só irá carregá-los de forma diferida (Deferred/Lazy) após a hidratação total do React, ou de preferência disparados em webworkers auxiliares (usando estratégias de Partytown) para não poluir o carregamento crítico do aplicativo.
[!TIP] A telemetria não pode destruir a performance que ela está tentando medir. Priorize pacotes nativos da Vercel. Centralize painéis de devops e tráfego na mesma plataforma para evitar silos de informação.