Monitorare i visitatori del sito web in tempo reale senza abbonamenti

Un cliente voleva vedere chi fosse sul suo sito web in tempo reale.

Gli piaceva il widget di Tidio, ma non voleva pagare un abbonamento.

La sfida si divideva in due parti:

  • Il sito utilizzava WordPress su un hosting diverso.
  • Non potevo aggiungere Firebase direttamente alla configurazione di WordPress.

Ho costruito un tracker esterno utilizzando Firebase. Ecco come funziona.

The Solution

Ho utilizzato un singolo tag script nell'header di WordPress. Questo script si connette a un progetto Firebase indipendente.

• Presenza in tempo reale: Ho utilizzato Firebase Realtime Database con la funzione onDisconnect(). Questa rimuove automaticamente l'utente dalla lista "online" quando chiude la scheda o perde la connessione. • Cronologia visitatori: Ho utilizzato una Netlify Function per scrivere i dati su Firestore. Ciò consente la geolocalizzazione IP lato server. • Sicurezza: Ho utilizzato l'autenticazione anonima. I visitatori possono scrivere solo nel proprio nodo di sessione. Solo l'amministratore può leggere l'elenco completo.

The Tricky Bugs

Costruire tutto questo non è stato semplice. Mi sono imbattuto in tre grandi ostacoli tecnici.

  1. La trappola della cache La cronologia mostrava zero sessioni. Ho scoperto che lo script del tracker aveva una policy di cache di un anno. I visitatori rimanevano bloccati con una vecchia versione dello script.
  • Soluzione: Ho impostato una policy di cache di cinque minuti per lo script del tracker.
  1. Il falso errore CORS Il browser segnalava un errore CORS. Pensavo fosse un problema di whitelist del dominio. Un semplice test con curl ha mostrato che il server funzionava correttamente. La verità era diversa. Il server in realtà andava in crash. In Node.js, se utilizzi un codice di stato 204, non puoi usare una stringa vuota come corpo della risposta. Devi usare null. La stringa vuota causava un crash prima che gli header CORS potessero essere inviati. Il browser non vedeva alcun header e assumeva che si trattasse di un problema CORS.
  • Soluzione: Ho cambiato il corpo della risposta da '' a null.
  1. Il problema dei dati mancanti I filtri per "Oggi" o "Ultimi 7 giorni" non restituivano nulla. Alcuni utenti mostravano posizioni "Sconosciute". Questo accadeva perché calcolavo il timestamp e la posizione solo al primissimo caricamento della pagina. Se un utente aveva una vecchia sessione nel browser, il server perdeva l'evento "start".
  • Soluzione: Ho reso il calcolo idempotente. Ora lo script ricalcola questi valori ad ogni evento.

Key Takeaways

• Un errore CORS nel browser non è sempre un problema di configurazione. Può nascondere un crash del server. Controlla sempre i log del server. • Un test curl POST non testa un browser. I browser inviano prima una richiesta preflight OPTIONS. Il tuo test deve includere questa richiesta per essere valido. • Usa null per gli stati HTTP "no content" come il 204. Non usare stringhe vuote.

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