Live websitebezoekers volgen zonder abonnementen

Een klant wilde in realtime zien wie er op hun website aanwezig was.

Ze vonden de Tidio-widget leuk, maar wilden niet betalen voor een abonnement.

De uitdaging bestond uit twee delen:

  • De site gebruikte WordPress op verschillende hosting-omgevingen.
  • Ik kon Firebase niet rechtstreeks aan de WordPress-setup toevoegen.

Ik heb een externe tracker gebouwd met behulp van Firebase. Hier is hoe het werkt.

De oplossing

Ik gebruikte een enkele scripttag in de WordPress-header. Dit script maakt verbinding met een onafhankelijk Firebase-project.

• Live aanwezigheid: Ik gebruikte Firebase Realtime Database met de onDisconnect()-functie. Hiermee wordt een gebruiker automatisch uit de "online"-lijst verwijderd wanneer ze hun tabblad sluiten of de verbinding verliezen. • Bezoekersgeschiedenis: Ik gebruikte een Netlify Function om gegevens naar Firestore te schrijven. Dit maakt IP-geolocatie aan de serverzijde mogelijk. • Beveiliging: Ik gebruikte anonieme authenticatie. Bezoekers kunnen alleen naar hun eigen sessienode schrijven. Alleen de admin kan de volledige lijst lezen.

De lastige bugs

Het bouwen hiervan verliep niet zonder problemen. Ik liep tegen drie grote technische hindernissen aan.

  1. De cache-val De geschiedenis toonde nul sessies. Ik kwam erachter dat het tracker-script een cache-beleid van één jaar had. Bezoekers bleven vastzitten aan een oude versie van het script.
  • Oplossing: Ik heb een cache-beleid van vijf minuten ingesteld voor het tracker-script.
  1. De valse CORS-fout De browser gaf een CORS-fout aan. Ik dacht dat ik een probleem had met de domain whitelist. Een eenvoudige curl-test liet zien dat de server prima werkte. De waarheid was anders. De server crashte eigenlijk. In Node.js kun je, wanneer je een 204-statuscode gebruikt, geen lege string als body gebruiken. Je moet null gebruiken. De lege string veroorzaakte een crash voordat de CORS-headers verzonden konden worden. De browser zag geen headers en ging ervan uit dat het een CORS-probleem was.
  • Oplossing: De response body gewijzigd van '' naar null.
  1. Het gat in de gegevens Filters voor "Vandaag" of "Laatste 7 dagen" gaven niets terug. Sommige gebruikers toonden "Onbekende" locaties. Dit gebeurde omdat ik de tijdstempel en locatie alleen berekende bij de allereerste paginalading. Als een gebruiker een oude sessie in de browser had, miste de server het "start"-event.
  • Oplossing: Ik heb de berekening idempotent gemaakt. Nu berekent het script deze waarden opnieuw bij elk event.

Belangrijkste lessen

• Een CORS-fout in de browser is niet altijd een configuratieprobleem. Het kan een servercrash verbergen. Controleer altijd je serverlogs. • Een curl POST-test test geen browser. Browsers sturen eerst een OPTIONS preflight-verzoek. Je test moet dit bevatten om geldig te zijn. • Gebruik null voor HTTP-statussen zonder inhoud, zoals 204. Gebruik geen lege strings.

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