Śledzenie odwiedzających stronę na żywo bez subskrypcji

Klient chciał widzieć, kto znajduje się na jego stronie internetowej w czasie rzeczywistym.

Podobał im się widget Tidio, ale nie chcieli płacić za subskrypcję.

Wyzwanie składało się z dwóch części:

  • Strona korzystała z WordPressa na innym hostingu.
  • Nie mogłem dodać Firebase bezpośrednio do konfiguracji WordPressa.

Zbudowałem zewnętrzny tracker przy użyciu Firebase. Oto jak to działa.

Rozwiązanie

Użyłem pojedynczego znacznika <script> w nagłówku WordPressa. Skrypt ten łączy się z niezależnym projektem Firebase.

• Obecność na żywo: Użyłem Firebase Realtime Database wraz z funkcją onDisconnect(). Automatycznie usuwa ona użytkownika z listy „online”, gdy zamknie on kartę lub straci połączenie. • Historia odwiedzających: Użyłem Netlify Function do zapisywania danych w Firestore. Pozwala to na geolokalizację IP po stronie serwera. • Bezpieczeństwo: Użyłem uwierzytelniania anonimowego. Odwiedzający mogą zapisywać dane tylko do własnego węzła sesji. Tylko administrator może odczytać pełną listę.

Podstępne błędy

Budowa tego rozwiązania nie przebiegała gładko. Napotkałem trzy główne przeszkody techniczne.

  1. Pułapka cache'owania Historia pokazywała zero sesji. Okazało się, że skrypt trackera miał politykę cache'owania wynoszącą rok. Odwiedzający utknęli na korzystaniu ze starej wersji skryptu.
  • Rozwiązanie: Ustawiłem pięciominutową politykę cache'owania dla skryptu trackera.
  1. Fałszywy błąd CORS Przeglądarka zgłaszała błąd CORS. Myślałem, że mam problem z białą listą domen. Prosty test curl wykazał, że serwer działa poprawnie. Prawda była inna. Serwer w rzeczywistości ulegał awarii. W Node.js, jeśli używasz kodu statusu 204, nie możesz użyć pustego ciągu znaków jako body. Musisz użyć null. Pusty ciąg znaków powodował awarię, zanim nagłówki CORS mogły zostać wysłane. Przeglądarka nie widziała żadnych nagłówków i zakładała, że to problem z CORS.
  • Rozwiązanie: Zmieniłem body odpowiedzi z '' na null.
  1. Luka w brakujących danych Filtry „Dzisiaj” lub „Ostatnie 7 dni” nie zwracały niczego. Niektórzy użytkownicy mieli lokalizacje oznaczone jako „Unknown”. Działo się tak, ponieważ obliczałem znacznik czasu i lokalizację tylko przy pierwszym ładowaniu strony. Jeśli użytkownik miał starą sesję w przeglądarce, serwer pomijał zdarzenie „start”.
  • Rozwiązanie: Sprawiłem, że obliczenia są idempotentne. Teraz skrypt przelicza te wartości przy każdym zdarzeniu.

Kluczowe wnioski

• Błąd CORS w przeglądarce nie zawsze jest problemem z konfiguracją. Może on maskować awarię serwera. Zawsze sprawdzaj logi serwera. • Test curl POST nie testuje przeglądarki. Przeglądarki najpierw wysyłają żądanie typu OPTIONS (preflight). Aby test był poprawny, musi on uwzględniać to żądanie. • Używaj null dla statusów HTTP oznaczających „brak zawartości”, takich jak 204. Nie używaj pustych ciągów znaków.

Źródło: https://dev.to/androve2k/whos-online-on-the-site-without-tidio-live-presence-and-visitor-history-with-firebase-37il