अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका, ताकि आप इस बात का पता लगा सकें कि आपकी साइट को बेहतर ऑफ़लाइन अनुभव क्यों चाहिए.
इस लेख में आपकी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका बताया गया है. इससे आपको यह समझने में मदद मिलेगी कि साइट को एक बेहतर ऑफ़लाइन मोड की ज़रूरत है. इस फ़ॉर्म को लागू करते समय होने वाली गलतियों और समस्याओं के बारे में भी जानकारी दी गई है ऑफ़लाइन इस्तेमाल के आंकड़े.
ऑनलाइन और ऑफ़लाइन ब्राउज़र इवेंट की कमियां
ऑफ़लाइन उपयोग को ट्रैक करने का स्पष्ट समाधान यह है कि
online और
offline इवेंट (जो
कई ब्राउज़र का इस्तेमाल किया जा सकता है) और आंकड़ों की ट्रैकिंग
तर्क के साथ काम करते हैं. माफ़ करें, इसमें कई समस्याएं हैं और इसकी सीमाएं हैं
अप्रोच:
- सामान्य ट्रैकिंग में, हर इंटरनेट कनेक्शन की स्थिति का हर इवेंट बहुत ज़्यादा हो सकता है और
उपयोगकर्ताओं की निजता को बनाए रखने वाली दुनिया में हम कई तरह से अपना काम कर सकते हैं, जहां कम से कम डेटा
इकट्ठा किया गया. इसके अलावा
onlineऔरofflineइवेंट सिर्फ़ एक सेकंड के लिए ट्रिगर हो सकते हैं नेटवर्क की कमी, जिसे उपयोगकर्ता ने शायद न देखा हो और न ही उस पर ध्यान दिया हो. - ऑफ़लाइन गतिविधि के आंकड़ों की ट्रैकिंग, आंकड़ों के सर्वर तक कभी नहीं पहुंच पाएगी, क्योंकि और उपयोगकर्ता... ऑफ़लाइन है.
- जब कोई उपयोगकर्ता ऑफ़लाइन हो जाता है और ऑफ़लाइन गतिविधि यहां भेज रहा होता है, तब उस डिवाइस पर टाइमस्टैंप ट्रैक करना ऐनलिटिक्स सर्वर, जब उपयोगकर्ता वापस ऑनलाइन होता है, यह उपयोगकर्ता के आपकी साइट पर फिर से विज़िट करने पर निर्भर करता है. अगर उपयोगकर्ता, ऑफ़लाइन मोड न होने की वजह से आपकी साइट छोड़कर चला जाता है और कभी भी फिर से विज़िट नहीं करता है, तो आपके पास ट्रैक करने का कोई तरीका नहीं है. ऑफ़लाइन ड्रॉप-ऑफ़ को ट्रैक करने की क्षमता एक ऐसा अहम डेटा है, जिससे आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है.
onlineइवेंट ज़्यादा भरोसेमंद नहीं है, क्योंकि यह सिर्फ़ नेटवर्क ऐक्सेस के बारे में है, इंटरनेट का ऐक्सेस नहीं है. इसलिए, हो सकता है कि कोई उपयोगकर्ता अब भी ऑफ़लाइन हो और ट्रैकिंग पिंग भेजकर अभी भी विफल रहा.- भले ही उपयोगकर्ता ऑफ़लाइन रहते हुए भी मौजूदा पेज पर ही रहे, लेकिन किसी दूसरे तरीके से नहीं आंकड़ों वाले इवेंट (जैसे कि स्क्रोल इवेंट, क्लिक वगैरह) को भी ट्रैक किया जाता है. प्रासंगिक और उपयोगी जानकारी.
- अपने-आप में ऑफ़लाइन होना भी आम तौर पर ज़्यादा सही नहीं होता. वेबसाइट डेवलपर के तौर पर यह यह जानना ज़्यादा ज़रूरी हो जाएगा कि किस तरह के संसाधन लोड नहीं हो सके. यह खास तौर पर काम का है एसपीए के संदर्भ में, जहां हो सकता है कि इंटरनेट कनेक्शन टूट जाने पर, ब्राउज़र ऑफ़लाइन न हो गड़बड़ी वाला पेज (जिसे उपयोगकर्ता समझते हैं) लेकिन पेज के किसी भी क्रम में डाइनैमिक हिस्सों के काम न करने की संभावना ज़्यादा होती है चुपचाप.
आप अभी भी इस समाधान का उपयोग ऑफ़लाइन उपयोग की एक बुनियादी जानकारी पाने के लिए कर सकते हैं, लेकिन कई अन्य कमियों और सीमाओं पर सावधानी से विचार करना चाहिए.
एक बेहतर तरीका: सर्विस वर्कर
ऑफ़लाइन मोड को सक्षम करने वाला समाधान ऑफ़लाइन ट्रैकिंग के लिए बेहतर समाधान साबित होता है इस्तेमाल. इसका बुनियादी आइडिया यह है कि उपयोगकर्ता के ऑफ़लाइन रहने पर, IndexedDB में आंकड़ों के पिंग सेव किए जाएं, और उपयोगकर्ता के दोबारा ऑनलाइन होने पर उन्हें फिर से भेजें. Google Analytics के लिए यह सुविधा पहले से उपलब्ध है वर्कबॉक्स मॉड्यूल के ज़रिए शेल्फ़ पर उपलब्ध, लेकिन ध्यान रखें कि हिट ने चार घंटे टाल दिए गए शायद प्रोसेस न हो. अपने सबसे आसान रूप में, इसे Workbox पर आधारित सेवा में चालू किया जा सकता है इन दो पंक्तियों वाला कर्मचारी:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize();
यह ऑफ़लाइन होने पर सभी मौजूदा इवेंट और पेज व्यू पिंग को ट्रैक करता है, लेकिन आपको यह पता नहीं चलेगा
वे ऑफ़लाइन हो गए (क्योंकि उन्हें इसी रूप में फिर से चलाया जा रहा है). इसके लिए
वर्कबॉक्स की मदद से ट्रैकिंग अनुरोधों में बदलाव किया जा सकता है
कस्टम डाइमेंशन (कोड में cd1) का इस्तेमाल करके, आंकड़ों के पिंग में offline फ़्लैग जोड़कर
सैंपल देखें):
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 का इस्तेमाल किया गया है, लेकिन इसे दूसरे आंकड़ों के लिए भी लागू किया जा सकता है वेंडर.
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 में लोड न हो पाने वाले रिसॉर्स लोड को ट्रैक करेगा, जहां उनकी मदद से उनका विश्लेषण किया जा सकता है रिपोर्टिंग. इस अहम जानकारी से इसका इस्तेमाल सर्विस वर्कर के कैश मेमोरी और गड़बड़ी के मैनेजमेंट में सुधार के लिए किया जाता है. इससे पेज को बेहतर बनाया जाता है और स्थिर न होने वाले नेटवर्क की स्थितियों में भी भरोसेमंद होते हैं.
अगले चरण
इस लेख में, ऑफ़लाइन इस्तेमाल के फ़ायदों और कमियों को ट्रैक करने के अलग-अलग तरीके बताए गए हैं. हालांकि इससे यह समझने में मदद मिल सकती है कि आपके कितने उपयोगकर्ता ऑफ़लाइन हो जाते हैं और उन्हें परेशानी का सामना करना पड़ता है, यह अभी बस एक शुरुआत है. जब तक आपकी वेबसाइट अच्छी तरह से बनाया गया ऑफ़लाइन मोड ऑफ़र नहीं करती, तब तक आपको आंकड़ों में, इसका ज़्यादा ऑफ़लाइन इस्तेमाल नहीं दिखेगा.
हमारा सुझाव है कि आप पूरी तरह से ट्रैकिंग की सुविधा सेट अप करें. इसके बाद, ऑफ़लाइन होने पर इस्तेमाल करने की बेहतर सुविधाएं पाएं बार-बार किया जा सकता है. पहले एक आसान ऑफ़लाइन गड़बड़ी पेज से शुरू करें– वर्कबॉक्स करना काफ़ी आसान है ऐसा करें–और इसे UX का सबसे सही तरीका माना जाना चाहिए. यह तरीका, कस्टम 404 पेजों के जैसा ही है. फिर अपने तरीके से काम करें ज़्यादा बेहतर ऑफ़लाइन फ़ॉलबैक के लिए और आखिरकार, ऑफ़लाइन कॉन्टेंट उपलब्ध कराने की कोशिश कर रहा है. पक्का करें कि आपने विज्ञापन दिया हो और लोगों को इसके बारे में बताया हो साथ ही, आपको इसका इस्तेमाल बढ़ते हुए दिखेगा. आखिरकार, हर कोई कभी-कभी ऑफ़लाइन हो जाता है.
मेट्रिक की रिपोर्ट करने और परफ़ॉर्मेंस कल्चर तैयार करने का तरीका जानें और सलाह पाने के लिए, वेबसाइट की स्पीड को क्रॉस-फ़ंक्शनल करके ठीक करना साथ ही, अलग-अलग प्लैटफ़ॉर्म पर काम करने वाले हिस्सेदारों को अपनी वेबसाइट में ज़्यादा निवेश करने के लिए तैयार करना. भले ही वे पोस्ट परफ़ॉर्मेंस पर फ़ोकस करते हैं. इनसे आपको यूज़र ऐक्टिविटी बढ़ाने के सामान्य आइडिया मिल सकते हैं स्टेकहोल्डर.
Unस्प्लैश पर जेसी गेलिडॉन की हीरो फ़ोटो.