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

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

Stephan Giesau

Martin Schierle

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

ऑनलाइन और ऑफ़लाइन ब्राउज़र इवेंट की कमियां

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

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

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

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

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

इसे Workbox पर आधारित सर्विस वर्कर में, इन दो लाइनों की मदद से आसानी से चालू किया जा सकता है:

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

googleAnalytics.initialize();

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

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

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

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

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