سبسکرپشن کے بغیر ویب سائٹ کے لائیو وزٹرز کو ٹریک کریں

ایک کلائنٹ یہ دیکھنا چاہتا تھا کہ ریئل ٹائم میں ان کی ویب سائٹ پر کون موجود ہے۔

انہیں Tidio ویجیٹ پسند تھا لیکن وہ سبسکرپشن کے لیے ادائیگی نہیں کرنا چاہتے تھے۔

چیلنج کے دو حصے تھے:

  • سائٹ مختلف ہوسٹنگ پر WordPress استعمال کر رہی تھی۔
  • میں براہ راست WordPress سیٹ اپ میں Firebase شامل نہیں کر سکتا تھا۔

میں نے Firebase کا استعمال کرتے ہوئے ایک بیرونی ٹریکر بنایا۔ یہ اس طرح کام کرتا ہے۔

حل

میں نے WordPress ہیڈر میں ایک سنگل اسکرپٹ ٹیگ استعمال کیا۔ یہ اسکرپٹ ایک آزاد Firebase پروجیکٹ سے منسلک ہوتا ہے۔

• لائیو موجودگی (Live Presence): میں نے onDisconnect() فنکشن کے ساتھ Firebase Realtime Database استعمال کیا۔ یہ صارف کے ٹیب بند کرنے یا کنکشن ٹوٹنے پر اسے خود بخود "online" فہرست سے ہٹا دیتا ہے۔ • وزٹر کی ہسٹری (Visitor History): میں نے Firestore میں ڈیٹا لکھنے کے لیے Netlify Function استعمال کیا۔ یہ سرور سائیڈ IP جیو لوکیشن (geolocation) کی اجازت دیتا ہے۔ • سیکیورٹی (Security): میں نے anonymous آتھنٹیکیشن استعمال کی۔ وزٹرز صرف اپنے مخصوص سیشن نوڈ (session node) پر ڈیٹا لکھ سکتے ہیں۔ صرف ایڈمن ہی مکمل فہرست پڑھ سکتا ہے۔

مشکل بگ (Bugs)

اسے بنانا آسان نہیں تھا۔ مجھے تین بڑے تکنیکی مسائل کا سامنا کرنا پڑا۔

  1. کیشنگ کا جال (The Caching Trap) ہسٹری میں زیرو سیشنز نظر آ رہے تھے۔ مجھے معلوم ہوا کہ ٹریکر اسکرپٹ کی کیش پالیسی ایک سال کی تھی۔ وزٹرز اسکرپٹ کے پرانے ورژن استعمال کرنے پر مجبور تھے۔
  • حل: میں نے ٹریکر اسکرپٹ کے لیے پانچ منٹ کی کیش پالیسی مقرر کی۔
  1. جعلی CORS ایرر (The Fake CORS Error) براؤزر نے CORS ایرر رپورٹ کیا۔ مجھے لگا کہ ڈومین وائٹ لسٹ کا مسئلہ ہے۔ ایک سادہ curl ٹیسٹ سے معلوم ہوا کہ سرور بالکل ٹھیک کام کر رہا تھا۔ حقیقت مختلف تھی۔ سرور دراصل کریش ہو رہا تھا۔ Node.js میں، اگر آپ 204 اسٹیٹس کوڈ استعمال کرتے ہیں، تو آپ باڈی کے طور پر خالی اسٹرنگ (empty string) استعمال نہیں کر سکتے۔ آپ کو null استعمال کرنا ہوگا۔ خالی اسٹرنگ کی وجہ سے CORS ہیڈرز بھیجے جانے سے پہلے ہی کریش ہو گیا۔ براؤزر کو کوئی ہیڈرز نہیں ملے اور اس نے سمجھا کہ یہ CORS کا مسئلہ ہے۔
  • حل: ریسپانس باڈی کو '' سے بدل کر null کر دیا۔
  1. ڈیٹا کا غائب ہونا (The Missing Data Gap) "Today" یا "Last 7 Days" کے فلٹرز کچھ بھی ظاہر نہیں کر رہے تھے۔ کچھ صارفین کی لوکیشن "Unknown" نظر آ رہی تھی۔ ایسا اس لیے ہوا کیونکہ میں نے ٹائم اسٹیمپ اور لوکیشن کا حساب صرف پہلے پیج لوڈ پر لگایا تھا۔ اگر کسی صارف کے براؤزر میں پرانا سیشن موجود ہوتا، تو سرور "start" ایونٹ کو مس کر دیتا تھا۔
  • حل: میں نے کیلکولیشن کو idempotent بنا دیا۔ اب اسکرپٹ ہر ایونٹ پر ان ویلیوز کو دوبارہ کیلکولیٹ کرتا ہے۔

اہم نکات (Key Takeaways)

• براؤزر میں CORS ایرر کا مطلب ہمیشہ کنفیگریشن کا مسئلہ نہیں ہوتا۔ یہ سرور کریش کو چھپا سکتا ہے۔ ہمیشہ اپنے سرور لاگز چیک کریں۔ • curl POST ٹیسٹ براؤزر کی جانچ نہیں کرتا۔ براؤزرز پہلے ایک OPTIONS preflight درخواست بھیجتے ہیں۔ آپ کے ٹیسٹ کو درست ہونے کے لیے اسے شامل کرنا ضروری ہے۔ • 204 جیسے "no content" HTTP اسٹیٹس کے لیے null استعمال کریں۔ خالی اسٹرنگز استعمال نہ کریں۔

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