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

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

Stephan Giesau

Martin Schierle

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

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

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

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

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

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

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

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

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

googleAnalytics.initialize();

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

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

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

अगर इंटरनेट कनेक्शन वापस आने से पहले, उपयोगकर्ता ऑफ़लाइन होने की वजह से पेज छोड़ देता है, तो क्या होगा? आम तौर पर, इससे सर्विस वर्कर स्लीप मोड में चला जाता है, क्योंकि कनेक्शन वापस आने पर वह डेटा नहीं भेज सकता. हालांकि, Workbox Google Analytics मॉड्यूल, बैकग्राउंड सिंक एपीआई का इस्तेमाल करता है. बैकग्राउंड सिंक, कनेक्शन वापस आने पर आंकड़ों के विश्लेषण का डेटा भेजता है. भले ही, उपयोगकर्ता टैब या ब्राउज़र बंद कर दे.

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

एसपीए और लेज़ी लोडिंग

अगर मल्टी-पेज वेबसाइट के तौर पर बनाए गए किसी पेज पर आने वाले उपयोगकर्ता ऑफ़लाइन हो जाते हैं और नेविगेट करने की कोशिश करते हैं, तो ब्राउज़र का डिफ़ॉल्ट ऑफ़लाइन पेज दिखता है. इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि क्या हो रहा है. हालांकि, सिंगल-पेज ऐप्लिकेशन के तौर पर बनाए गए पेज अलग तरीके से काम करते हैं. उपयोगकर्ता उसी पेज पर रहता है और AJAX की मदद से, नया कॉन्टेंट डाइनैमिक तौर पर लोड होता है. इसके लिए, ब्राउज़र में नेविगेट करने की ज़रूरत नहीं होती. ऑफ़लाइन होने पर, उपयोगकर्ताओं को ब्राउज़र की गड़बड़ी वाला पेज नहीं दिखता. इसके बजाय, पेज के डाइनैमिक हिस्से, गड़बड़ियों के साथ रेंडर होते हैं, अनडिफ़ाइंड स्टेट में चले जाते हैं या डाइनैमिक होना बंद हो जाते हैं.

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

उपयोगकर्ताओं को इन मामलों से काफ़ी परेशानी होती है. इसलिए, इन्हें ट्रैक करना ज़रूरी है. नेटवर्क की गड़बड़ियों को पकड़ने के लिए, सर्विस वर्कर सबसे सही जगह हैं. साथ ही, आंकड़ों के विश्लेषण की मदद से, इन्हें ट्रैक किया जा सकता है. Workbox की मदद से, a ग्लोबल कैच हैंडलर को कॉन्फ़िगर किया जा सकता है. इससे, मैसेज इवेंट भेजकर, पेज को लोड नहीं हो पाए अनुरोधों के बारे में जानकारी दी जा सकती है:

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 इवेंट को सुनना होगा और आंकड़ों के विश्लेषण के लिए बना पिंग भेजना होगा. फिर से पक्का करें कि सर्विस वर्कर में, ऑफ़लाइन होने पर आंकड़ों के विश्लेषण के अनुरोधों को बफ़र किया जाए. जैसा कि पहले बताया गया है, 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 में, लोड नहीं हो पाए संसाधनों को ट्रैक किया जाएगा. यहां रिपोर्टिंग की मदद से, उनका विश्लेषण किया जा सकता है reporting. इससे मिली अहम जानकारी का इस्तेमाल, सर्विस वर्कर की कैश मेमोरी को बेहतर बनाने और गड़बड़ी को ठीक करने के लिए किया जा सकता है. इससे, नेटवर्क की अस्थिर स्थितियों में भी पेज को ज़्यादा मज़बूत और भरोसेमंद बनाया जा सकता है.

अगले चरण

आपने ऑफ़लाइन इस्तेमाल को ट्रैक करने के अलग-अलग तरीकों के बारे में जाना. साथ ही, इनके फ़ायदों और कमियों के बारे में भी जाना. इससे यह पता लगाया जा सकता है कि कितने उपयोगकर्ता ऑफ़लाइन होते हैं और इसकी वजह से उन्हें किन समस्याओं का सामना करना पड़ता है. हालांकि, यह सिर्फ़ शुरुआत है. जब तक आपकी वेबसाइट में ऑफ़लाइन मोड की बेहतर सुविधा नहीं होगी, तब तक आंकड़ों के विश्लेषण में, ऑफ़लाइन इस्तेमाल का ज़्यादा डेटा नहीं दिखेगा.

हमारा सुझाव है कि पूरी ट्रैकिंग की सुविधा लागू करें. इसके बाद, ऑफ़लाइन मोड की सुविधाओं को चरणों में बढ़ाएं. साथ ही, ट्रैकिंग पर फ़ोकस करें. ऑफ़लाइन होने पर दिखने वाली गड़बड़ी के पेज से शुरुआत करें. इसे Workbox की मदद से आसानी से बनाया जा सकता है . साथ ही, यह UX का सबसे सही तरीका है. यह कस्टम 404 पेजों की तरह ही है. इसके बाद, ऑफ़लाइन मोड में ज़्यादा बेहतर फ़ॉलबैक और आखिर में, ऑफ़लाइन कॉन्टेंट की सुविधा लागू करें. पक्का करें कि आपने उपयोगकर्ताओं को इसके बारे में अच्छी तरह बताया हो और इसका विज्ञापन किया हो. इससे, आपको इस्तेमाल में बढ़ोतरी दिखेगी. आखिरकार, हर कोई कभी न कभी ऑफ़लाइन होता है.

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