Jejak Pelawat Laman Web Secara Langsung Tanpa Langganan

Seorang klien ingin melihat siapa yang berada di laman web mereka dalam masa nyata.

Mereka menyukai widget Tidio tetapi tidak mahu membayar untuk langganan.

Cabaran ini mempunyai dua bahagian:

  • Laman web tersebut menggunakan WordPress pada hos yang berbeza.
  • Saya tidak dapat menambah Firebase secara terus ke dalam tetapan WordPress.

Saya membina penjejak luaran menggunakan Firebase. Berikut adalah cara ia berfungsi.

Penyelesaian

Saya menggunakan satu tag skrip dalam pengepala (header) WordPress. Skrip ini menyambung ke projek Firebase yang bebas.

• Kehadiran Langsung: Saya menggunakan Firebase Realtime Database dengan fungsi onDisconnect(). Ini secara automatik mengeluarkan pengguna daripada senarai "dalam talian" apabila mereka menutup tab atau kehilangan sambungan. • Sejarah Pelawat: Saya menggunakan Netlify Function untuk menulis data ke Firestore. Ini membolehkan geolokasi IP di bahagian pelayan (server-side). • Keselamatan: Saya menggunakan pengesahan tanpa nama (anonymous authentication). Pelawat hanya boleh menulis ke nod sesi mereka sendiri. Hanya admin sahaja yang boleh membaca senarai penuh.

Pepijat yang Mengelirukan

Membina ini tidak berjalan lancar. Saya menghadapi tiga halangan teknikal yang besar.

  1. Perangkap Cache Sejarah menunjukkan sifar sesi. Saya mendapati skrip penjejak mempunyai polisi cache selama satu tahun. Pelawat terperangkap menggunakan versi skrip yang lama.
  • Penyelesaian: Saya menetapkan polisi cache selama lima minit untuk skrip penjejak.
  1. Ralat CORS Palsu Pelayar melaporkan ralat CORS. Saya menyangka saya mempunyai isu senarai putih (whitelist) domain. Ujian curl yang mudah menunjukkan pelayan berfungsi dengan baik. Hakikatnya berbeza. Pelayan sebenarnya sedang mengalami kegagalan (crashing). Dalam Node.js, jika anda menggunakan kod status 204, anda tidak boleh menggunakan rentetan kosong (empty string) sebagai kandungan (body). Anda mesti menggunakan null. Rentetan kosong tersebut menyebabkan kegagalan sebelum pengepala (headers) CORS dapat dihantar. Pelayar tidak melihat sebarang pengepala dan menganggapnya sebagai masalah CORS.
  • Penyelesaian: Menukar kandungan respons daripada '' kepada null.
  1. Jurang Data yang Hilang Penapis untuk "Hari Ini" atau "7 Hari Terakhir" tidak memulangkan apa-apa. Sesetengah pengguna menunjukkan lokasi "Tidak Diketahui". Ini berlaku kerana saya hanya mengira cap masa (timestamp) dan lokasi pada muatan halaman (page load) yang pertama. Jika pengguna mempunyai sesi lama dalam pelayar mereka, pelayan terlepas acara "mula" (start event).
  • Penyelesaian: Saya menjadikan pengiraan tersebut bersifat idempotent. Kini skrip mengira semula nilai-nilai ini pada setiap acara.

Pengajaran Utama

• Ralat CORS dalam pelayar tidak selalunya merupakan isu konfigurasi. Ia boleh menyembunyikan kegagalan pelayan. Sentiasa semak log pelayan anda. • Ujian curl POST tidak menguji pelayar. Pelayar menghantar permintaan preflight OPTIONS terlebih dahulu. Ujian anda mesti menyertakan ini untuk menjadi sah. • Gunakan null untuk status HTTP "tiada kandungan" seperti 204. Jangan gunakan rentetan kosong.

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