Rastrea visitantes de un sitio web en tiempo real sin suscripciones

Un cliente quería ver quién estaba en su sitio web en tiempo real.

Les gustaba el widget de Tidio, pero no querían pagar una suscripción.

El desafío tenía dos partes:

  • El sitio usaba WordPress en un hosting diferente.
  • No podía añadir Firebase directamente a la configuración de WordPress.

Construí un rastreador externo usando Firebase. Así es como funciona.

La Solución

Utilicé una única etiqueta de script en el header de WordPress. Este script se conecta a un proyecto de Firebase independiente.

• Presencia en vivo: Utilicé Firebase Realtime Database con la función onDisconnect(). Esto elimina automáticamente a un usuario de la lista "online" cuando cierra su pestaña o pierde la conexión. • Historial de visitantes: Utilicé una Netlify Function para escribir datos en Firestore. Esto permite la geolocalización por IP en el lado del servidor. • Seguridad: Utilicé autenticación anónima. Los visitantes solo pueden escribir en su propio nodo de sesión. Solo el administrador puede leer la lista completa.

Los errores complicados

Construir esto no fue sencillo. Me encontré con tres grandes obstáculos técnicos.

  1. La trampa del caché El historial mostraba cero sesiones. Descubrí que el script del rastreador tenía una política de caché de un año. Los visitantes se quedaban atrapados usando una versión antigua del script.
  • Solución: Establecí una política de caché de cinco minutos para el script del rastreador.
  1. El falso error de CORS El navegador reportaba un error de CORS. Pensé que tenía un problema de lista blanca de dominios. Una simple prueba con curl mostró que el servidor funcionaba bien. La verdad era distinta. En realidad, el servidor estaba fallando. En Node.js, si usas un código de estado 204, no puedes usar una cadena vacía como cuerpo. Debes usar null. La cadena vacía causaba un fallo antes de que se pudieran enviar los encabezados CORS. El navegador no vio encabezados y asumió que era un problema de CORS.
  • Solución: Cambié el cuerpo de la respuesta de '' a null.
  1. El vacío de datos Los filtros de "Hoy" o "Últimos 7 días" no devolvían nada. Algunos usuarios mostraban ubicaciones como "Desconocida". Esto sucedía porque solo calculaba la marca de tiempo y la ubicación en la primera carga de la página. Si un usuario tenía una sesión antigua en su navegador, el servidor perdía el evento de "inicio".
  • Solución: Hice que el cálculo fuera idempotente. Ahora el script vuelve a calcular estos valores en cada evento.

Conclusiones clave

• Un error de CORS en el navegador no siempre es un problema de configuración. Puede ocultar un fallo del servidor. Revisa siempre los logs de tu servidor. • Una prueba curl POST no prueba un navegador. Los navegadores envían primero una solicitud de pre-vuelo (preflight) OPTIONS. Tu prueba debe incluir esto para ser válida. • Usa null para estados HTTP de "sin contenido" como el 204. No uses cadenas vacías.

Fuente: https://dev.to/androve2k/whos-online-on-the-site-without-tidio-live-presence-and-visitor-history-with-firebase-37il