अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका, ताकि आप यह बता सकें कि आपकी साइट को ऑफ़लाइन अनुभव को बेहतर बनाने की ज़रूरत क्यों है.
इस लेख में, अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका बताया गया है. इससे आपको यह तय करने में मदद मिलेगी कि आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है. इसमें यह भी बताया गया है कि ऑफ़लाइन इस्तेमाल के आंकड़े लागू करते समय, किन समस्याओं और गड़बड़ियों से बचना चाहिए.
ऑनलाइन और ऑफ़लाइन ब्राउज़र इवेंट से जुड़ी समस्याएं
ऑफ़लाइन इस्तेमाल को ट्रैक करने का सबसे आसान तरीका यह है कि online और offline इवेंट (जो कई ब्राउज़र पर काम करता है) के लिए इवेंट लिसनर बनाएं. साथ ही, उन लिसनर में Analytics ट्रैकिंग लॉजिक शामिल किया जाए. माफ़ करें, इस तरीके में कई समस्याएं और सीमाएं हैं:
- आम तौर पर, हर नेटवर्क कनेक्शन की स्थिति के इवेंट को ट्रैक करना ज़रूरी नहीं होता. साथ ही, निजता को ध्यान में रखते हुए, जितना हो सके उतना कम डेटा इकट्ठा करना चाहिए. इसके अलावा,
onlineऔरofflineइवेंट, नेटवर्क के बंद होने के कुछ ही सेकंड के लिए ट्रिगर हो सकते हैं. ऐसा हो सकता है कि उपयोगकर्ता को इसकी भनक भी न लगे. - ऑफ़लाइन गतिविधि की आंकड़ों की ट्रैकिंग, Analytics सर्वर तक कभी नहीं पहुंच पाएगी, क्योंकि उपयोगकर्ता ऑफ़लाइन है.
- जब कोई उपयोगकर्ता ऑफ़लाइन हो जाता है और जब वह उपयोगकर्ता के ऑनलाइन होता है, तो उस ऑफ़लाइन गतिविधि को Analytics सर्वर पर भेजा जा रहा होता है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता आपकी साइट पर फिर से जा रहा है. अगर उपयोगकर्ता, ऑफ़लाइन मोड न होने की वजह से आपकी साइट छोड़कर चला जाता है और कभी भी फिर से विज़िट नहीं करता है, तो आपके पास उसे ट्रैक करने का कोई तरीका नहीं है. ऑफ़लाइन उपयोगकर्ताओं के साइट छोड़ने की जानकारी ट्रैक करने की सुविधा, इस बात को साबित करने के लिए अहम डेटा है कि आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है.
onlineइवेंट ज़्यादा भरोसेमंद नहीं है, क्योंकि यह सिर्फ़ नेटवर्क ऐक्सेस के बारे में जानता है, इंटरनेट ऐक्सेस के बारे में नहीं. इसलिए, हो सकता है कि उपयोगकर्ता अब भी ऑफ़लाइन हो और ट्रैकिंग पिंग भेजने में अब भी समस्या आ रही हो.- भले ही, उपयोगकर्ता ऑफ़लाइन होने के बावजूद मौजूदा पेज पर बना रहे, लेकिन किसी भी अन्य आंकड़ों के इवेंट (जैसे, स्क्रोल इवेंट, क्लिक वगैरह) को ट्रैक नहीं किया जाता. ये इवेंट ज़्यादा काम के और काम की जानकारी हो सकते हैं.
- आम तौर पर, ऑफ़लाइन होने का मतलब भी बहुत ज़्यादा नहीं होता. वेबसाइट डेवलपर के तौर पर, यह जानना ज़्यादा ज़रूरी हो सकता है कि किस तरह के रिसॉर्स लोड नहीं हो पाए. यह बात एसपीए के संदर्भ में खास तौर पर ज़रूरी है. यहां इंटरनेट कनेक्शन के बंद होने पर, ब्राउज़र का ऑफ़लाइन होने का गड़बड़ी वाला ��ेज नहीं दिखता. हालांकि, पेज के कुछ डाइनैमिक हिस्से काम नहीं करते.
ऑफ़लाइन इस्तेमाल के बारे में बुनियादी जानकारी पाने के लिए, अब भी इस तरीके का इस्तेमाल किया जा सकता है. हालांकि, इसकी कई कमियों और सीमाओं को ध्यान में रखना ज़रूरी है.
एक बेहतर तरीका: सर्विस वर्कर
ऑफ़लाइन मोड चालू करने वाला तरीका, ऑफ़लाइन इस्तेमाल को ट्रैक करने के लिए बेहतर साबित हुआ है. इसका मूल मकसद, उपयोगकर्ता के ऑफ़लाइन रहने तक 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 में एक चेक जोड़ सकते हैं, जो यूआरआई को रेगुलर एक्सप्रेशन से फ़िल्टर कर देता है.
कस्टम हैंडलर के साथ registerRoute लागू करना एक बेहतर तरीका है. इससे कारोबार के लॉजिक को अलग रूट में शामिल किया जाता है. साथ ही, ज़्यादा जटिल सर्विस वर्कर को बेहतर तरीके से मैनेज किया जा सकता है:
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 इवेंट को सुनना होगा और Analytics पिंग भेजना होगा.
फिर से, यह पक्का करें कि सेवा वर्कर में ऑफ़लाइन होने वाले आंकड़ों के अनुरोधों को बफ़र किया जाए. जैसा कि पहले बताया गया है, 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 का सबसे सही तरीका माना जाना चाहिए. इसके बाद, ज़्यादा बेहतर ऑफ़लाइन फ़ॉलबैक और आखिर में, असल ऑफ़लाइन कॉन्टेंट पर जाएं. पक्का करें कि आप विज्ञापन देते हैं और अपने उपयोगकर्ताओं को इसके बारे में साफ़ तौर पर बताते हैं. इससे आपको इसका इस्तेमाल बढ़ता हुआ दिखेगा. आखिरकार, हर कोई कभी-कभी ऑफ़लाइन हो जाता है.
मेट्रिक को रिपोर्ट करने और परफ़ॉर्मेंस को बेहतर बनाने का तरीका और अलग-अलग फ़ंक्शन वाले हिस्सेदारों को अपनी वेबसाइट में ज़्यादा निवेश करने के लिए राजी करने के बारे में सलाह पाने के लिए, अलग-अलग फ़ंक्शन वाले हिस्सेदारों को अपनी वेबसाइट में ज़्यादा निवेश करने के लिए राजी करने के बारे ��ें सलाह पाने के लिए, वेबसाइट की स्पीड को अलग-अलग फ़ंक्शन के हिसाब से ठीक करने के बारे में जानें. हालांकि, ये पोस्ट परफ़ॉर्मेंस पर फ़ोकस करती हैं, लेकिन इनसे आपको हिस्सेदारों से जुड़ने के सामान्य तरीके के बारे में जानकारी मिल सकती है.
Unsplash पर JC Gellidon की हीरो फ़ोटो.