Lacak Pengunjung Situs Web Secara Langsung Tanpa Berlangganan

Seorang klien ingin melihat siapa saja yang sedang berada di situs web mereka secara real-time.

Mereka menyukai widget Tidio tetapi tidak ingin membayar biaya berlangganan.

Tantangannya terdiri dari dua bagian:

  • Situs tersebut menggunakan WordPress pada hosting yang berbeda.
  • Saya tidak bisa menambahkan Firebase secara langsung ke pengaturan WordPress tersebut.

Saya membangun pelacak eksternal menggunakan Firebase. Berikut cara kerjanya.

Solusinya

Saya menggunakan satu tag script di header WordPress. Script ini terhubung ke proyek Firebase yang independen.

• Kehadiran Langsung (Live Presence): Saya menggunakan Firebase Realtime Database dengan fungsi onDisconnect(). Ini secara otomatis menghapus pengguna dari daftar "online" saat mereka menutup tab atau kehilangan koneksi. • Riwayat Pengunjung: Saya menggunakan Netlify Function untuk menulis data ke Firestore. Ini memungkinkan geolokasi IP di sisi server. • Keamanan: Saya menggunakan autentikasi anonim. Pengunjung hanya dapat menulis ke node sesi mereka sendiri. Hanya admin yang dapat membaca daftar lengkapnya.

Bug yang Menjebak

Membangun ini tidaklah mulus. Saya menghadapi tiga kendala teknis utama.

  1. Jebakan Caching Riwayat menunjukkan nol sesi. Saya menemukan bahwa script pelacak memiliki kebijakan cache satu tahun. Pengunjung terjebak menggunakan versi script yang lama.
  • Perbaikan: Saya mengatur kebijakan cache lima menit untuk script pelacak.
  1. Error CORS Palsu Browser melaporkan error CORS. Saya mengira ada masalah pada whitelist domain. Tes curl sederhana menunjukkan server berjalan dengan baik. Kenyataannya berbeda. Server tersebut sebenarnya sedang crash. Di Node.js, jika Anda menggunakan kode status 204, Anda tidak dapat menggunakan string kosong sebagai body. Anda harus menggunakan null. String kosong tersebut menyebabkan crash sebelum header CORS dapat dikirim. Browser tidak melihat adanya header dan menganggapnya sebagai masalah CORS.
  • Perbaikan: Mengubah response body dari '' menjadi null.
  1. Celah Data yang Hilang Filter untuk "Hari Ini" atau "7 Hari Terakhir" tidak mengembalikan apa pun. Beberapa pengguna menunjukkan lokasi "Unknown". Ini terjadi karena saya hanya menghitung timestamp dan lokasi pada saat pemuatan halaman pertama kali. Jika pengguna memiliki sesi lama di browser mereka, server melewatkan event "start".
  • Perbaikan: Saya membuat kalkulasinya menjadi idempotent. Sekarang script menghitung ulang nilai-nilai ini pada setiap event.

Poin Penting

• Error CORS di browser tidak selalu merupakan masalah konfigurasi. Hal itu bisa menyembunyikan crash pada server. Selalu periksa log server Anda. • Tes curl POST tidak menguji browser. Browser mengirimkan permintaan preflight OPTIONS terlebih dahulu. Tes Anda harus menyertakan ini agar valid. • Gunakan null untuk status HTTP "no content" seperti 204. Jangan gunakan string kosong.

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