ऑफ़लाइन इस्तेमाल को मापा जा रहा है

अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका, ताकि आप यह बता सकें कि आपकी साइट को ऑफ़लाइन अनुभव को बेहतर बनाने की ज़रूरत क्यों है.

Stephan Giesau
Stephan Giesau
Martin Schierle
Martin Schierle

इस लेख में, अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका बताया गया है. इससे आपको यह बताने में मदद मिलेगी कि आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है. इसमें यह भी बताया गया है कि ऑफ़लाइन इस्तेमाल के आंकड़े लागू करते समय, किन समस्याओं और गड़बड़ियों से बचना चाहिए.

ऑनलाइन और ऑफ़लाइन ब्राउज़र इवेंट से जुड़ी समस्याएं

ऑफ़लाइन इस्तेमाल को ट्रैक करने का सबसे आसान तरीका यह है कि आप online और offline इवेंट के लिए इवेंट लिसनर बनाएं. ये इवेंट, कई ब्राउज़र के साथ काम करते हैं. साथ ही, उन लिसनर में अपना आंकड़ों से जुड़ा ट्रैकिंग लॉजिक डालें. माफ़ करें, इस तरीके में कई समस्याएं और सीमाएं हैं:

  • आम तौर पर, हर नेटवर्क कनेक्शन की स्थिति के इवेंट को ट्रैक करना ज़रूरी नहीं होता. साथ ही, निजता को ध्यान में रखते हुए, जितना हो सके उतना कम डेटा इकट्ठा करना चाहिए. इसके अलावा, online और offline इवेंट, नेटवर्क के बंद होने के कुछ ही सेकंड के लिए ट्रिगर हो सकते हैं. ऐसा हो सकता है कि उपयोगकर्ता को इसकी भनक भी न लगे.
  • ऑफ़लाइन गतिविधि की आंकड़ों की ट्रैकिंग, Analytics सर्वर तक कभी नहीं पहुंच पाएगी, क्योंकि उपयोगकर्ता ऑफ़लाइन है.
  • जब कोई उपयोगकर्ता ऑफ़लाइन हो जाता है, तो स्थानीय तौर पर टाइमस्टैंप को ट्रैक करना और उपयोगकर्ता के वापस ऑनलाइन आने पर, ऑफ़लाइन गतिविधि को Analytics सर्वर पर भेजना, इस बात पर निर्भर करता है कि उपयोगकर्ता आपकी साइट पर फिर से आ रहा है या नहीं. अगर कोई उपयोगकर्ता ऑफ़लाइन मोड की सुविधा न होने की वजह से आपकी साइट छोड़ देता है और फिर कभी वापस नहीं आता, तो आपके पास इसे ट्रैक करने का कोई तरीका नहीं है. ऑफ़लाइन उपयोगकर्ताओं के साइट छोड़ने की जानकारी ट्रैक करने की सुविधा, इस बात को साबित करने के लिए अहम डेटा है कि आपकी साइट को बेहतर ऑफ़लाइन मोड की ज़रूरत क्यों है.
  • online इवेंट का इस्तेमाल करना बहुत भरोसेमंद नहीं है, क्योंकि यह सिर्फ़ नेटवर्क ऐक्सेस के बारे में बताता है, इंटरनेट ऐक्सेस के बारे में नहीं. इसलिए, हो सकता है कि उपयोगकर्ता अब भी ऑफ़लाइन हो और ट्रैकिंग पिंग भेजने में अब भी समस्या आ रही हो.
  • भले ही, उपयोगकर्ता ऑफ़लाइन होने के बावजूद मौजूदा पेज पर बना रहे, लेकिन किसी भी अन्य आंकड़ों के इवेंट (जैसे, स्क्रोल इवेंट, क्लिक वगैरह) को ट्रैक नहीं किया जाता. ये इवेंट ज़्यादा काम के और काम की जानकारी हो सकते हैं.
  • आम तौर पर, ऑफ़लाइन होने का मतलब भी बहुत ज़्यादा मायने नहीं रखता. वेबसाइट डेवलपर के तौर पर, यह जानना ज़्यादा ज़रूरी हो सकता है कि किस तरह के रिसॉर्स लोड नहीं हो पाए. यह बात एसपीए के संदर्भ में खास तौर पर ज़रूरी है. यहां इंटरनेट कनेक्शन के बंद होने पर, ब्राउज़र का ऑफ़लाइन होने का गड़बड़ी वाला पेज नहीं दिखता. हालांकि, पेज के कुछ डाइनैमिक हिस्से काम नहीं करते.

ऑफ़लाइन इस्तेमाल के बारे में बुनियादी जानकारी पाने के लिए, अब भी इस तरीके का इस्तेमाल किया जा सकता है. हालांकि, इसकी कई कमियों और सीमाओं को ध्यान में रखना ज़रूरी है.

बेहतर तरीका: सेवा वर्कर

ऑफ़लाइन मोड चालू करने वाला तरीका, ऑफ़लाइन इस्तेमाल को ट्रैक करने के लिए बेहतर साबित हुआ है. इसका मूल मकसद, उपयोगकर्ता के ऑफ़लाइन रहने तक Analytics पिंग को IndexedDB में स्टोर करना है. साथ ही, उपयोगकर्ता के फिर से ऑनलाइन आने पर उन्हें फिर से भेजना है. Google Analytics के लिए, यह सुविधा पहले से ही Workbox मॉड्यूल के ज़रिए, बिना किसी बदलाव के इस्तेमाल के लिए उपलब्ध है. हालांकि, ध्यान रखें कि चार घंटे से ज़्यादा देर से भेजे गए हिट को प्रोसेस नहीं किया जा सकता. इसे आसानी से, Workbox पर आधारित सेवा वर्कअर में चालू किया जा सकता है. इसके लिए, इन दो लाइनों का इस्तेमाल करें:

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize();

यह ऑफ़लाइन होने पर, सभी मौजूदा इवेंट और पेज व्यू पिंग को ट्रैक करता है. हालांकि, आपको यह पता नहीं चलेगा कि ये इवेंट और पेज व्यू पिंग ऑफ़लाइन हुए हैं, क्योंकि इन्हें ठीक वैसा ही फिर से चलाया जाता है जैसा कि वे पहले हुए थे. इसके लिए, Workbox की मदद से ट्रैकिंग अनुरोधों में बदलाव किया जा सकता है. इसके लिए, कस्टम डाइमेंशन (नीचे दिए गए कोड सैंपल में cd1) का इस्तेमाल करके, ऐनलिटिक्स पिंग में offline फ़्लैग जोड़ें:

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize({
  parameterOverrides: {
    cd1: 'offline',
  },
});

अगर इंटरनेट कनेक्शन वापस आने से पहले, उपयोगकर्ता ऑफ़लाइन होने की वजह से पेज से बाहर निकल जाता है, तो क्या होगा? हालांकि, आम तौर पर इससे सेवा वर्कर सो जाता है, क्योंकि कनेक्शन वापस आने पर वह डेटा नहीं भेज पाता. हालांकि, Workbox का Google Analytics मॉड्यूल, Background Sync API का इस्तेमाल करता है. यह कनेक्शन वापस आने पर, 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 का इस्तेमाल किया गया है. हालांकि, इसे अन्य ऐनालिटिक्स वेंडर के लिए भी इसी तरह लागू किया जा सकता है.

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 पेजों की तरह ही है. इसके बाद, ज़्यादा बेहतर ऑफ़लाइन फ़ॉलबैक और आखिर में, असल ऑफ़लाइन कॉन्टेंट पर जाएं. पक्का करें कि आपने अपने उपयोगकर्ताओं को इसकी जानकारी अच्छी तरह से दी हो और इसका विज्ञापन किया हो. इससे, आपको इसका इस्तेमाल बढ़ता हुआ दिखेगा. आखिरकार, हर कोई कभी-कभी ऑफ़लाइन हो जाता है.

मेट्रिक को रिपोर्ट करने और परफ़ॉर्मेंस को बेहतर बनाने का तरीका और अलग-अलग फ़ंक्शन वाले हिस्सेदारों को अपनी वेबसाइट में ज़्यादा निवेश करने के लिए राजी करने के बारे में सलाह पाने के लिए, अलग-अलग फ़ंक्शन वाले हिस्सेदारों को अपनी वेबसाइट में ज़्यादा निवेश करने के लिए राजी करने के बारे में सलाह पाने के लिए, वेबसाइट की स्पीड को अलग-अलग फ़ंक्शन के हिसाब से ठीक करना लेख पढ़ें. हालांकि, ये पोस्ट परफ़ॉर्मेंस पर फ़ोकस करती हैं, लेकिन इनसे आपको हिस्सेदारों से जुड़ने के सामान्य तरीके के बारे में जानकारी मिल सकती है.

Unsplash पर JC Gellidon की हीरो फ़ोटो.