સબ્સ્ક્રિપ્શન વગર લાઈવ વેબસાઇટ વિઝિટર્સને ટ્રેક કરો
એક ક્લાયન્ટ તેમની વેબસાઇટ પર રિયલ ટાઇમમાં કોણ છે તે જોવા માંગતા હતા.
તેમને Tidio વિજેટ ગમ્યું હતું પરંતુ તેઓ સબ્સ્ક્રિપ્શન માટે ચૂકવણી કરવા માંગતા નહોતા.
પડકારના બે ભાગ હતા:
- સાઇટ અલગ હોસ્ટિંગ પર WordPress નો ઉપયોગ કરતી હતી.
- હું WordPress સેટઅપમાં સીધું Firebase ઉમેરી શકતો ન હતો.
મેં Firebase નો ઉપયોગ કરીને એક એક્સટર્નલ ટ્રેકર બનાવ્યું. તે કેવી રીતે કામ કરે છે તે અહીં છે.
ઉકેલ
મેં WordPress હેડરમાં એક સિંગલ script tag નો ઉપયોગ કર્યો. આ script એક સ્વતંત્ર Firebase પ્રોજેક્ટ સાથે જોડાય છે.
• Live Presence: મેં onDisconnect() ફંક્શન સાથે Firebase Realtime Database નો ઉપયોગ કર્યો. જ્યારે વપરાશકર્તા તેમનું ટેબ બંધ કરે અથવા કનેક્શન ગુમાવે ત્યારે આ આપમેળે તેમને "online" યાદીમાંથી દૂર કરે છે. • Visitor History: મેં Firestore માં ડેટા લખવા માટે Netlify Function નો ઉપયોગ કર્યો. આ સર્વર-સાઇડ IP geolocation ની મંજૂરી આપે છે. • Security: મેં anonymous authentication નો ઉપયોગ કર્યો. વિઝિટર્સ ફક્ત તેમના પોતાના session node માં જ લખી શકે છે. ફક્ત એડમિન જ સંપૂર્ણ યાદી વાંચી શકે છે.
મુશ્કેલ બગ્સ (The Tricky Bugs)
આ બનાવવું સરળ નહોતું. મને ત્રણ મુખ્ય ટેકનિકલ અવરોધોનો સામનો કરવો પડ્યો.
- કેશિંગ ટ્રેપ (The Caching Trap) હિસ્ટ્રીમાં શૂન્ય સેશન્સ દેખાતા હતા. મને જાણવા મળ્યું કે ટ્રેકર script ની એક વર્ષની કેશ પોલિસી હતી. વિઝિટર્સ સ્ક્રિપ્ટના જૂના વર્ઝનનો ઉપયોગ કરવામાં અટવાયેલા હતા.
- ઉકેલ: મેં ટ્રેકર script માટે પાંચ મિનિટની કેશ પોલિસી સેટ કરી.
- ફેક CORS એરર (The Fake CORS Error) બ્રાઉઝરે CORS એરર દર્શાવી. મને લાગ્યું કે મારે ડોમેન વ્હાઇટલિસ્ટની સમસ્યા છે. એક સાદા curl ટેસ્ટથી ખબર પડી કે સર્વર બરાબર કામ કરી રહ્યું હતું. સત્ય અલગ હતું. સર્વર ખરેખર ક્રેશ થઈ રહ્યું હતું. Node.js માં, જો તમે 204 સ્ટેટસ કોડનો ઉપયોગ કરો છો, તો તમે બોડી તરીકે ખાલી સ્ટ્રિંગ (empty string) નો ઉપયોગ કરી શકતા નથી. તમારે null નો ઉપયોગ કરવો આવશ્યક છે. CORS હેડર્સ મોકલતા પહેલા ખાલી સ્ટ્રિંગને કારણે ક્રેશ થઈ ગયું હતું. બ્રાઉઝરે કોઈ હેડર્સ જોયા નહીં અને માની લીધું કે તે CORS સમસ્યા છે.
- ઉકેલ: response body ને '' થી બદલીને null કરી દીધું.
- ડેટા ગેપ (The Missing Data Gap) "Today" અથવા "Last 7 Days" માટેના ફિલ્ટર્સમાં કંઈ જ મળતું નહોતું. કેટલાક વપરાશકર્તાઓના લોકેશન "Unknown" તરીકે દેખાતા હતા. આવું એટલા માટે થયું કારણ કે મેં ફક્ત પ્રથમ પેજ લોડ વખતે જ timestamp અને લોકેશનની ગણતરી કરી હતી. જો વપરાશકર્તાના બ્રાઉઝરમાં જૂનું સેશન હોય, તો સર્વર "start" ઇવેન્ટ ચૂકી જાય છે.
- ઉકેલ: મેં ગણતરીને idempotent બનાવી. હવે સ્ક્રિપ્ટ દરેક ઇવેન્ટ પર આ કિંમતો ફરીથી ગણતરી કરે છે.
મુખ્ય બાબતો (Key Takeaways)
• બ્રાઉઝરમાં CORS એરર હંમેશા કન્ફિગરેશનની સમસ્યા નથી હોતી. તે સર્વર ક્રેશને છુપાવી શકે છે. હંમેશા તમારા સર્વર લોગ્સ તપાસો. • curl POST ટેસ્ટ બ્રાઉઝરનું પરીક્ષણ કરતું નથી. બ્રાઉઝર્સ પહેલા OPTIONS preflight રિક્વેસ્ટ મોકલે છે. તમારા ટેસ્ટને માન્ય બનાવવા માટે તેમાં આનો સમાવેશ થવો જોઈએ. • 204 જેવા "no content" HTTP સ્ટેટસ માટે null નો ઉપયોગ કરો. ખાલી સ્ટ્રિંગનો ઉપયોગ કરશો નહીં.