Abonelik Gerektirmeden Canlı Web Sitesi Ziyaretçilerini Takip Edin

Bir müşteri, web sitelerinde o an kimlerin olduğunu gerçek zamanlı olarak görmek istiyordu.

Tidio widget'ını beğendiler ancak bir abonelik ücreti ödemek istemiyorlardı.

Zorluk iki kısımdan oluşuyordu:

  • Site, farklı bir hosting üzerinde WordPress kullanıyordu.
  • Firebase'i doğrudan WordPress kurulumuna ekleyemiyordum.

Firebase kullanarak harici bir takip aracı oluşturdum. İşte çalışma mantığı:

Çözüm

WordPress header kısmında tek bir script etiketi kullandım. Bu script, bağımsız bir Firebase projesine bağlanıyor.

• Canlı Varlık: onDisconnect() fonksiyonu ile Firebase Realtime Database kullandım. Bu, kullanıcı sekmesini kapattığında veya bağlantısı kesildiğinde kullanıcıyı otomatik olarak "çevrimiçi" listesinden çıkarır. • Ziyaretçi Geçmişi: Verileri Firestore'a yazmak için bir Netlify Function kullandım. Bu, sunucu tarafında IP coğrafi konumlandırmasına (geolocation) olanak tanır. • Güvenlik: Anonim kimlik doğrulama (anonymous authentication) kullandım. Ziyaretçiler yalnızca kendi oturum düğümlerine (session node) yazabilirler. Tüm listeyi yalnızca yönetici okuyabilir.

Zorlu Hatalar

Bunu inşa etmek pek de pürüzsüz olmadı. Üç büyük teknik engelle karşılaştım.

  1. Önbellek Tuzağı Geçmişte sıfır oturum görünüyordu. Takip script'inin bir yıllık bir önbellek politikasına sahip olduğunu fark ettim. Ziyaretçiler script'in eski bir sürümünü kullanmaya mahkum kalıyordu.
  • Çözüm: Takip script'i için beş dakikalık bir önbellek politikası belirledim.
  1. Sahte CORS Hatası Tarayıcı bir CORS hatası raporladı. Bir alan adı beyaz liste (whitelist) sorunum olduğunu düşündüm. Basit bir curl testi sunucunun sorunsuz çalıştığını gösterdi. Gerçek ise farklıydı. Sunucu aslında çöküyordu. Node.js'de, eğer 204 durum kodunu kullanıyorsanız, gövde (body) olarak boş bir dize kullanamazsınız. null kullanmalısınız. Boş dize, CORS başlıkları gönderilmeden önce çökmesine neden oluyordu. Tarayıcı hiçbir başlık görmediği için bunun bir CORS problemi olduğunu varsayıyordu.
  • Çözüm: Yanıt gövdesini '' yerine null olarak değiştirdim.
  1. Eksik Veri Boşluğu "Bugün" veya "Son 7 Gün" filtreleri hiçbir sonuç döndürmüyordu. Bazı kullanıcılar "Bilinmeyen" konumlar olarak görünüyordu. Bu durum, zaman damgasını (timestamp) ve konumu yalnızca ilk sayfa yüklemesinde hesaplamamdan kaynaklanıyordu. Eğer bir kullanıcının tarayıcısında eski bir oturum varsa, sunucu "başlangıç" (start) olayını kaçırıyordu.
  • Çözüm: Hesaplamayı idempotent hale getirdim. Artık script bu değerleri her olayda yeniden hesaplıyor.

Önemli Çıkarımlar

• Tarayıcıdaki bir CORS hatası her zaman bir yapılandırma sorunu değildir. Bir sunucu çökmesini gizleyebilir. Her zaman sunucu günlüklerinizi (logs) kontrol edin. • Bir curl POST testi bir tarayıcıyı test etmez. Tarayıcılar önce bir OPTIONS preflight isteği gönderir. Testinizin geçerli olması için bunu içermesi gerekir. • 204 gibi "içerik yok" (no content) HTTP durumları için null kullanın. Boş dizeler kullanmayın.

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