अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका, ताकि आप इस बात का पता लगा सकें कि आपकी साइट को बेहतर ऑफ़लाइन अनुभव क्यों चाहिए.
इस लेख में आपकी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका बताया गया है. इससे आपको यह समझने में मदद मिलेगी कि आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है. इसमें ऑफ़लाइन इस्तेमाल के आंकड़ों को लागू करते समय होने वाली गलतियों और समस्याओं के बारे में भी बताया गया है.
ऑनलाइन और ऑफ़लाइन ब्राउज़र इवेंट की कमियां
ऑफ़लाइन इस्तेमाल को ट्रैक करने का सबसे आसान तरीका यह है कि online और offline इवेंट (जो कई ब्राउज़र पर काम करता है) के लिए इवेंट लिसनर बनाएं. साथ ही, उन लिसनर में Analytics ट्रैकिंग लॉजिक शामिल किया जाए. माफ़ करें, इस तरीके में कई समस्याएं और सीमाएं हैं:
- सामान्य ट्रैकिंग में, इंटरनेट कनेक्शन की स्थिति से जुड़ा हर इवेंट ज़रूरत से ज़्यादा हो सकता है और
निजता पर आधारित दुनिया में बहुत कम डेटा इकट्ठा करना मुश्किल हो सकता है. इसके अलावा,
onlineऔरofflineइवेंट, नेटवर्क नुकसान के सिर्फ़ एक सेकंड के हिस्से के लिए फ़ायर हो सकते हैं. ऐसा हो सकता है कि उपयोगकर्ता ने इस पर ध्यान भी न दिया हो या उस पर ध्यान भी न दिया हो. - ऑफ़लाइन गतिविधि का विश्लेषण ट्रैकिंग कभी भी एनालिटिक्स सर्वर तक नहीं पहुंच पाएगी क्योंकि उपयोगकर्ता... ऑफ़लाइन है.
- जब कोई उपयोगकर्ता ऑफ़लाइन हो जाता है, तो उस समय टाइमस्टैंप को स्थानीय तौर पर ट्रैक किया जा सकता है. साथ ही, उपयोगकर्ता के ऑनलाइन होने के बाद, उसकी ऑफ़लाइन गतिविधि को Analytics सर्वर पर भेजा जा रहा है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता आपकी साइट पर फिर से जा रहा है. अगर उपयोगकर्ता, ऑफ़लाइन मोड न होने की वजह से आपकी साइट छोड़कर चला जाता है और कभी भी फिर से विज़िट नहीं करता है, तो आपके पास उसे ट्रैक करने का कोई तरीका नहीं है. ऑफ़लाइन ड्रॉप-ऑफ़ को ट्रैक करने की क्षमता एक ज़रूरी डेटा है, जिससे यह समझने में मदद मिलती है कि आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है.
onlineइवेंट ज़्यादा भरोसेमंद नहीं है, क्योंकि यह सिर्फ़ नेटवर्क ऐक्सेस के बारे में जानता है, इंटरनेट ऐक्सेस के बारे में नहीं. इसलिए, हो सकता है कि कोई उपयोगकर्ता अब भी ऑफ़लाइन हो और ट्रैकिंग पिंग अब भी नहीं भेजा जा सके.- भले ही, उपयोगकर्ता ऑफ़लाइन रहते हुए भी मौजूदा पेज पर ही बना रहता हो, फिर भी किसी भी अन्य Analytics इवेंट (जैसे, स्क्रोल इवेंट, क्लिक वगैरह) को ट्रैक नहीं किया जाता है. यह ज़्यादा काम की और काम की जानकारी हो सकती है.
- अपने-आप में ऑफ़लाइन होना भी आम तौर पर ज़्यादा सही नहीं होता. वेबसाइट डेवलपर के तौर पर, यह जानना ज़्यादा ज़रूरी हो सकता है कि किस तरह के रिसॉर्स लोड नहीं हो सके. यह खास तौर पर एसपीए के मामले में सबसे ज़रूरी है, जहां नेटवर्क कनेक्शन टूट जाने पर, हो सकता है कि इंटरनेट से कनेक्ट न होने पर, ब्राउज़र की ऑफ़लाइन गड़बड़ी वाले पेज (जिसे उपयोगकर्ता समझते हों) पर न ले जाएं. हालांकि, पेज के किसी भी क्रम में डाइनैमिक हिस्से के काम न करने की संभावना ज़्यादा होती है.
ऑफ़लाइन इस्तेमाल के बारे में बुनियादी जानकारी पाने के लिए, अब भी इस समाधान का इस्तेमाल किया जा सकता है. हालांकि, इसके कई नुकसान और सीमाओं को ध्यान से समझने की ज़रूरत है.
एक बेहतर तरीका: सर्विस वर्कर
ऑफ़लाइन मोड को चालू करने वाला समाधान, ऑफ़लाइन इस्तेमाल को ट्रैक करने का बेहतर समाधान है. इसका बुनियादी आइडिया यह है कि उपयोगकर्ता के ऑफ़लाइन रहने तक, Analytics के पिंग को IndexedDB में सेव किया जाए. साथ ही, जब उपयोगकर्ता फिर से ऑनलाइन हो जाए, तो उसे फिर से भेजें. Google Analytics के लिए यह पहले से ही वर्कबॉक्स मॉड्यूल के ज़रिए पहले से ही उपलब्ध है, लेकिन ध्यान रखें कि चार घंटे से ज़्यादा समय के लिए रोके गए हिट प्रोसेस नहीं किए जा सकते. सबसे आसान रूप में, इसे Workbox पर आधारित सर्विस वर्कर में इन दो लाइनों के साथ चालू किया जा सकता है:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize();
इससे ऑफ़लाइन रहने के दौरान सभी मौजूदा इवेंट और पेज व्यू पिंग को ट्रैक किया जाता है, लेकिन आपको पता नहीं चलेगा कि
वे ऑफ़लाइन हो गए (क्योंकि उन्हें इसी तरह फिर से चलाया जाता है). इसके लिए वर्कबॉक्स की मदद से ट्रैकिंग अनुरोधों में हेर-फेर किया जा सकता है. इसके लिए, Analytics पिंग में offline फ़्लैग जोड़ें. इसके लिए, कस्टम डाइमेंशन (नीचे दिए गए कोड सैंपल में cd1) का इस्तेमाल करें:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize({
parameterOverrides: {
cd1: 'offline',
},
});
अगर उपयोगकर्ता ऑफ़लाइन होने की वजह से, इंटरनेट कनेक्शन के वापस आने से पहले ही पेज से बाहर चला जाता है, तो क्या होगा? भले ही इसमें आम तौर पर सर्विस वर्कर स्लीप मोड में हो जाता है (क्योंकि कनेक्शन वापस आने पर यह डेटा नहीं भेज पाता), Workbox का Google Analytics मॉड्यूल बैकग्राउंड सिंक एपीआई का इस्तेमाल करता है. यह कनेक्शन के वापस आने पर, आंकड़ों का डेटा बाद में भेजता है. भले ही, उपयोगकर्ता टैब या ब्राउज़र बंद कर दे.
हालांकि, इसकी एक कमी है. मौजूदा ट्रैकिंग को ऑफ़लाइन इस्तेमाल किया जा सकता है. हालांकि, बुनियादी ऑफ़लाइन मोड लागू करने से पहले आपको ज़्यादा काम का डेटा नहीं दिखेगा. कनेक्शन टूट जाने पर भी उपयोगकर्ता आपकी साइट को तुरंत बंद कर देंगे. हालांकि, अब ऑफ़लाइन डाइमेंशन वाले उपयोगकर्ताओं और सामान्य उपयोगकर्ताओं के बीच सेशन की औसत अवधि और उपयोगकर्ता के जुड़ाव की तुलना करके, कम से कम इसे मेज़र और मेज़र किया जा सकता है.
एसपीए और लेज़ी लोडिंग
अगर कई पेजों वाली वेबसाइट के तौर पर बनाए गए किसी पेज पर जाने वाले उपयोगकर्ता ऑफ़लाइन होते हैं और नेविगेट करने की कोशिश करते हैं, तो ब्राउज़र का डिफ़ॉल्ट ऑफ़लाइन पेज दिखता है. इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि क्या हो रहा है. हालांकि, एक पेज के ऐप्लिकेशन के तौर पर बनाए गए पेज अलग तरह से काम करते हैं. उपयोगकर्ता उसी पेज पर रहता है और नया कॉन्टेंट, AJAX के ज़रिए डाइनैमिक तरीके से, बिना किसी ब्राउज़र नेविगेशन के लोड होता है. ऑफ़लाइन होने पर उपयोगकर्ताओं को ब्राउज़र की गड़बड़ी वाला पेज नहीं दिखता. इसके बजाय, पेज के डायनैमिक हिस्से गड़बड़ियों के साथ रेंडर होते हैं, वे तय नहीं की गई स्थितियों में चले जाते हैं या डाइनैमिक नहीं रह जाते.
लेज़ी लोडिंग की वजह से, कई पेजों वाली वेबसाइटों पर इसी तरह के असर हो सकते हैं. उदाहरण के लिए, हो सकता है कि शुरुआती लोड ऑनलाइन हो, लेकिन स्क्रोल करने से पहले उपयोगकर्ता ऑफ़लाइन हो गया हो. वेबसाइट में फ़ोल्ड के नीचे मौजूद लेज़ी लोड होने पर, कोई भी कॉन्टेंट बिना किसी रुकावट के काम करना बंद कर देगा.
चूंकि ऐसे मामले उपयोगकर्ताओं को बहुत परेशान करते हैं, इसलिए उन पर नज़र रखने में समझदारी है. सर्विस वर्कर, नेटवर्क की गड़बड़ियों का पता लगाने का सबसे सही तरीका है और आखिर में वे आंकड़ों की मदद से उन्हें ट्रैक करते हैं. Workbox से, एक ग्लोबल कैच हैंडलर को कॉन्फ़िगर किया जा सकता है, ताकि यह मैसेज इवेंट भेजकर पेज को फ़ेल हो चुके अनुरोधों के बारे में जानकारी दे सके:
import { setCatchHandler } from 'workbox-routing';
setCatchHandler(({ event }) => {
// https://developer.mozilla.org/docs/Web/API/Client/postMessage
event.waitUntil(async function () {
// Exit early if we don't have access to the client.
// Eg, if it's cross-origin.
if (!event.clientId) return;
// Get the client.
const client = await clients.get(event.clientId);
// Exit early if we don't get the client.
// Eg, if it closed.
if (!client) return;
// Send a message to the client.
client.postMessage({
action: "network_fail",
url: event.request.url,
destination: event.request.destination
});
return Response.error();
}());
});
पूरे न हो पाने वाले सभी अनुरोधों को सुनने के बजाय, सिर्फ़ खास रास्तों की गड़बड़ियों का पता लगाना एक और तरीका है. एक उदाहरण के तौर पर, अगर हम सिर्फ़ /products/* के रूट पर होने वाली गड़बड़ियों की रिपोर्ट करना चाहते हैं, तो हम setCatchHandler में एक चेक जोड़ सकते हैं, जो यूआरआई को रेगुलर एक्सप्रेशन से फ़िल्टर करता है.
इसका एक बेहतर समाधान है कि एक कस्टम हैंडलर के साथ recordRoute को लागू किया जाए. यह कारोबारी नियम को एक अलग रूट में शामिल कर देता है, जिससे ज़्यादा कॉम्प्लेक्स सर्विस वर्कर का रखरखाव बेहतर तरीके से किया जा सकता है:
import { registerRoute } from 'workbox-routing';
import { NetworkOnly } from 'workbox-strategies';
const networkOnly = new NetworkOnly();
registerRoute(
new RegExp('https:\/\/example\.com\/products\/.+'),
async (params) => {
try {
// Attempt a network request.
return await networkOnly.handle(params);
} catch (error) {
// If it fails, report the error.
const event = params.event;
if (!event.clientId) return;
const client = await clients.get(event.clientId);
if (!client) return;
client.postMessage({
action: "network_fail",
url: event.request.url,
destination: "products"
});
return Response.error();
}
}
);
आखिर में, पेज को message इवेंट सुनना होगा और आंकड़ों की जानकारी देने वाला पिंग भेजना होगा.
इसके अलावा, सर्विस वर्कर में ऑफ़लाइन होने वाले आंकड़ों के अनुरोधों को बफ़र करना न भूलें. जैसा कि पहले बताया गया है, Google Analytics में पहले से मौजूद सहायता के लिए, workbox-google-analytics प्लगिन को शुरू करें.
नीचे दिए गए उदाहरण में Google Analytics का इस्तेमाल किया गया है, लेकिन इसे दूसरे Analytics वेंडर के लिए भी लागू किया जा सकता है.
if ("serviceWorker" in navigator) {
// ... SW registration here
// track offline error events
navigator.serviceWorker.addEventListener("message", event => {
if (gtag && event.data && event.data.action === "network_fail") {
gtag("event", "network_fail", {
event_category: event.data.destination,
// event_label: event.data.url,
// value: event.data.value
});
}
});
}
यह Google Analytics में ऐसे रिसॉर्स लोड को ट्रैक करेगा जो पूरे नहीं हो सके, जहां रिपोर्टिंग की मदद से उन रिसॉर्स का विश्लेषण किया जा सकता है. इस अहम जानकारी का इस्तेमाल, सर्विस वर्कर कैश मेमोरी में सेव होने और गड़बड़ियों को ठीक करने के लिए किया जा सकता है. इससे नेटवर्क के खराब होने पर पेज को ज़्यादा मज़बूत और भरोसेमंद बनाया जा सकता है.
अगले चरण
इस लेख में, ऑफ़लाइन इस्तेमाल के फ़ायदों और कमियों को ट्रैक करने के अलग-अलग तरीके बताए गए हैं. इससे यह पता लगाने में मदद मिल सकती है कि आपके कितने उपयोगकर्ता ऑफ़लाइन होते हैं और इस वजह से उन्हें समस्याएं आती हैं. फिर भी यह सिर्फ़ शुरुआत है. अगर आपकी वेबसाइट पर, ऑफ़लाइन मोड की सुविधा उपलब्ध नहीं है, तो आपको Analytics में ऑफ़लाइन मोड का ज़्यादा इस्तेमाल नहीं दिखेगा.
हमारा सुझाव है कि आप पूरी तरह से ट्रैकिंग कर लें और उसके बाद ट्रैकिंग नंबर पर नज़र रखते हुए बार-बार अपनी ऑफ़लाइन क्षमताओं का इस्तेमाल करें. ऑफ़लाइन होने पर भी गड़बड़ी की जानकारी वाले एक आसान पेज से शुरुआत करें. Workbox के साथ, यह करना आसान है–और इसे कस्टम 404 पेजों की तरह ही UX का सबसे सही तरीका माना जाना चाहिए. इसके बाद, ज़्यादा बेहतर ऑफ़लाइन फ़ॉलबैक की ओर बढ़ते रहें और आखिर में ऑफ़लाइन असली कॉन्टेंट पाएं. पक्का करें कि आप विज्ञापन देते हैं और अपने उपयोगकर्ताओं को इसके बारे में साफ़ तौर पर बताते हैं. इससे आपको इसका इस्तेमाल बढ़ता हुआ दिखेगा. आखिरकार, हर कोई कभी-कभी ऑफ़लाइन हो जाता है.
अपनी वेबसाइट पर ज़्यादा निवेश करने के लिए, मेट्रिक को रिपोर्ट करने और परफ़ॉर्मेंस कल्चर तैयार करने और वेबसाइट की स्पीड को क्रॉस-फ़ंक्शनल पर सेट करने के तरीके देखें. हालांकि, ये पोस्ट परफ़ॉर्मेंस पर आधारित होती हैं, लेकिन इनसे आपको हिस्सेदारों से जुड़ने के सामान्य आइडिया मिल सकते हैं.
Unस्प्लैश पर जेसी गेलिडॉन की हीरो फ़ोटो.