Rastreie Visitantes do Site em Tempo Real Sem Assinaturas
Um cliente queria ver quem estava em seu site em tempo real.
Eles gostaram do widget do Tidio, mas não queriam pagar uma assinatura.
O desafio tinha duas partes:
- O site usava WordPress em uma hospedagem diferente.
- Eu não conseguia adicionar o Firebase diretamente à configuração do WordPress.
Eu construí um rastreador externo usando Firebase. Veja como funciona.
A Solução
Usei uma única tag de script no cabeçalho do WordPress. Este script se conecta a um projeto Firebase independente.
• Presença ao Vivo: Usei o Firebase Realtime Database com a função onDisconnect(). Isso remove automaticamente um usuário da lista "online" quando ele fecha a aba ou perde a conexão. • Histórico de Visitantes: Usei uma Netlify Function para gravar dados no Firestore. Isso permite a geolocalização de IP no lado do servidor. • Segurança: Usei autenticação anônima. Os visitantes só podem gravar em seu próprio nó de sessão. Apenas o administrador pode ler a lista completa.
Os Bugs Complicados
Construir isso não foi tranquilo. Enfrentei três grandes obstáculos técnicos.
- A Armadilha do Cache O histórico mostrava zero sessões. Descobri que o script do rastreador tinha uma política de cache de um ano. Os visitantes ficavam presos usando uma versão antiga do script.
- Correção: Defini uma política de cache de cinco minutos para o script do rastreador.
- O Erro de CORS Falso O navegador relatou um erro de CORS. Achei que fosse um problema de whitelist de domínio. Um teste simples de curl mostrou que o servidor estava funcionando normalmente. A verdade era diferente. O servidor estava, na verdade, travando. No Node.js, se você usar um código de status 204, não pode usar uma string vazia como corpo. Você deve usar null. A string vazia causava um crash antes que os cabeçalhos CORS pudessem ser enviados. O navegador não via cabeçalhos e assumia que era um problema de CORS.
- Correção: Alterei o corpo da resposta de '' para null.
- A Lacuna de Dados Ausentes Filtros para "Hoje" ou "Últimos 7 Dias" não retornavam nada. Alguns usuários mostravam localizações como "Desconhecido". Isso acontecia porque eu só calculava o timestamp e a localização no primeiríssimo carregamento da página. Se um usuário tivesse uma sessão antiga no navegador, o servidor perdia o evento de "início".
- Correção: Tornei o cálculo idempotente. Agora o script recomputa esses valores em cada evento.
Principais Aprendizados
• Um erro de CORS no navegador nem sempre é um problema de configuração. Ele pode esconder um crash do servidor. Sempre verifique os logs do seu servidor. • Um teste curl POST não testa um navegador. Os navegadores enviam primeiro uma requisição preflight OPTIONS. Seu teste deve incluir isso para ser válido. • Use null para status HTTP de "sem conteúdo", como o 204. Não use strings vazias.