सबस्क्रिप्शनशिवाय लाइव्ह वेबसाइट व्हिजिटर्स ट्रॅक करा
एका क्लायंटला त्यांच्या वेबसाइटवर रिअल टाइममध्ये कोण आहे हे पाहायचे होते.
त्यांना Tidio विजेट आवडले होते, पण त्यांना सबस्क्रिप्शनसाठी पैसे द्यायचे नव्हते.
या आव्हानाचे दोन भाग होते:
- साइट वेगवेगळ्या होस्टिंगवर WordPress वापरत होती.
- मी WordPress सेटअपमध्ये थेट Firebase जोडू शकलो नाही.
मी Firebase वापरून एक एक्सटर्नल ट्रॅकर तयार केला. तो कसा काम करतो ते खाली दिले आहे.
उपाय
मी WordPress हेडरमध्ये एक सिंगल स्क्रिप्ट टॅग वापरला. ही स्क्रिप्ट एका स्वतंत्र Firebase प्रोजेक्टला कनेक्ट करते.
• लाइव्ह प्रेझन्स (Live Presence): मी onDisconnect() फंक्शनसह Firebase Realtime Database वापरले. जेव्हा वापरकर्ता त्यांचे टॅब बंद करतो किंवा कनेक्शन तुटते, तेव्हा हे आपोआप वापरकर्त्याला "online" यादीतून काढून टाकते.
• व्हिजिटर हिस्ट्री (Visitor History): मी Firestore मध्ये डेटा लिहिण्यासाठी Netlify Function वापरले. यामुळे सर्व्हर-साइड IP जिओलोकेशन (geolocation) शक्य होते.
• सुरक्षा (Security): मी anonymous authentication वापरले. व्हिजिटर्स फक्त त्यांच्या स्वतःच्या सेशन नोडमध्ये (session node) डेटा लिहू शकतात. फक्त ॲडमिन पूर्ण यादी वाचू शकतो.
तांत्रिक अडचणी
हे तयार करणे सोपे नव्हते. मला तीन मोठ्या तांत्रिक अडचणींचा सामना करावा लागला.
- कॅशिंगचा सापळा (The Caching Trap) हिस्ट्रीमध्ये शून्य सेशन्स दिसत होते. मला समजले की ट्रॅकर स्क्रिप्टमध्ये एक वर्षाचे कॅशे पॉलिसी (cache policy) होते. व्हिजिटर्स स्क्रिप्टच्या जुन्या व्हर्जनचा वापर करत होते.
- उपाय: मी ट्रॅकर स्क्रिप्टसाठी पाच मिनिटांचे कॅशे पॉलिसी सेट केले.
- CORS एररचा आभास (The Fake CORS Error)
ब्राउझरमध्ये CORS एरर येत होता. मला वाटले की डोमेन व्हाईटलिस्टमध्ये काहीतरी समस्या आहे. एका साध्या curl टेस्टने दाखवले की सर्व्हर व्यवस्थित काम करत होता.
सत्य काही वेगळेच होते. सर्व्हर प्रत्यक्षात क्रॅश होत होता.
Node.js मध्ये, जर तुम्ही 204 स्टेटस कोड वापरत असाल, तर तुम्ही बॉडी म्हणून रिकामी स्ट्रिंग (empty string) वापरू शकत नाही. तुम्हाला
nullवापरावे लागेल. CORS हेडर्स पाठवण्यापूर्वीच रिकामी स्ट्रिंगमुळे क्रॅश होत होता. ब्राउझरला कोणतेही हेडर्स दिसले नाहीत आणि त्याला वाटले की ही CORS ची समस्या आहे.
- उपाय: रिस्पॉन्स बॉडी '' वरून
nullमध्ये बदलली.
- डेटा गॅप (The Missing Data Gap) "Today" किंवा "Last 7 Days" साठीचे फिल्टर्स काहीही रिझल्ट देत नव्हते. काही वापरकर्त्यांचे लोकेशन "Unknown" दिसत होते. असे घडले कारण मी फक्त पहिल्या पेज लोडवरच टाइमस्टॅम्प आणि लोकेशनची गणना केली होती. जर वापरकर्त्याच्या ब्राउझरमध्ये जुने सेशन असेल, तर सर्व्हर "start" इव्हेंट मिस करत होता.
- उपाय: मी ही गणना idempotent केली. आता स्क्रिप्ट प्रत्येक इव्हेंटवर या व्हॅल्यूज पुन्हा मोजते.
महत्त्वाचे मुद्दे (Key Takeaways)
• ब्राउझरमधील CORS एरर नेहमी कॉन्फिगरेशनची समस्या नसते. तो सर्व्हर क्रॅश झाल्याचे लपवू शकतो. नेहमी तुमचे सर्व्हर लॉग्स तपासा.
• curl POST टेस्ट ब्राउझरची चाचणी करत नाही. ब्राउझर आधी OPTIONS preflight रिक्वेस्ट पाठवतात. तुमची टेस्ट वैध ठरण्यासाठी त्यात हे समाविष्ट असणे आवश्यक आहे.
• 204 सारख्या "no content" HTTP स्टेटससाठी null वापरा. रिकाम्या स्ट्रिंग्स वापरू नका.