फ़ोरग्राउंड में बिताए गए कुल समय का हिसाब लगाना

इस गाइड में बताया गया है कि किसी पेज को ऐक्टिव तौर पर देखने में उपयोगकर्ता ने कुल कितना समय बिताया, इसका सटीक हिसाब कैसे लगाया जाए. पेज पर बिताए गए समय जैसी पारंपरिक मेट्रिक में, अक्सर बैकग्राउंड में पेज पर बिताए गए समय को गलत तरीके से शामिल किया जाता है. VisibilityStateEntry एपीआई का इस्तेमाल करके, सिर्फ़ "फ़ोरग्राउंड टाइम" को मेज़र किया जा सकता है. इससे उपयोगकर्ता की दिलचस्पी के बारे में बेहतर मेट्रिक मिलती है.

फ़ोरग्राउंड टाइम कैलकुलेट करने की सुविधा लागू करना

PerformanceTimeline एपीआई, विज़िबिलिटी स्टेटस में होने वाले बदलावों को परफ़ॉर्मेंस एंट्री के तौर पर दिखाता है. visibilitychange इवेंट पर प्रतिक्रिया देने और पूरे सेशन के दौरान मैन्युअल तरीके से समय इकट्ठा करने के बजाय, किसी भी समय पूरे विज़िबिलिटी इतिहास के बारे में क्वेरी की जा सकती है.

ज़रूरी: फ़ोरग्राउंड में बिताए गए असल समय का हिसाब लगाने के लिए, आपको visibility-state परफ़ॉर्मेंस एंट्री के लिए क्वेरी करनी होगी.

/**
 * Calculates total time the page was in the visible state.
 *
 * @returns {number} Total foreground time in milliseconds.
 */
function getTotalForegroundTime() {
  // MANDATORY: Query the visibility-state entries from the performance timeline.
  const entries = performance.getEntriesByType('visibility-state');

  // Fallback: If the browser does not support VisibilityStateEntry,
  // the API will gracefully return an empty array.
  if (entries.length === 0) {
    // Return total time since navigation start as a fallback.
    return performance.now();
  }

  let totalForegroundTime = 0;

  for (let i = 0; i < entries.length; i++) {
    // Only calculate duration for periods where the state was 'visible'
    if (entries[i].name === 'visible') {
      const start = entries[i].startTime;

      // The end time is the start time of the next state change,
      // or the current time if this is the final entry.
      const end = i + 1 < entries.length
          ? entries[i + 1].startTime
          : performance.now();

      totalForegroundTime += (end - start);
    }
  }

  return totalForegroundTime;
}

फ़ॉलबैक और ब्राउज़र के लिए सहायता

VisibilityStateEntry एपीआई, परफ़ॉर्मेंस टाइमलाइन में जोड़ा गया एक नया एपीआई है. ऐसा हो सकता है कि यह सभी ब्राउज़र पर काम न करे.

performance.getEntriesByType('visibility-state'), काम न करने वाले ब्राउज़र में खाली कलेक्शन दिखाता है. इसलिए, सुविधा का पता लगाने की प्रोसेस को कैलकुलेशन फ़्लो में शामिल किया गया है. आगे बढ़ने से पहले, हमेशा यह जांच लें कि एंट्री वापस की गई हैं या नहीं.

अगर एपीआई काम नहीं करता है, तो हमारा सुझाव है कि आप performance.now() वैल्यू दिखाएं. यह नेविगेशन के बाद से कुल समय को दिखाता है. यह समय, यूज़र ऐक्टिविटी के समय के लिए एक सही ऊपरी सीमा के तौर पर काम करता है. ऐसा तब होता है, जब विज़िबिलिटी स्टेट का इतिहास उपलब्ध न हो.

const entries = performance.getEntriesByType('visibility-state');

// If the array is empty, the API is likely unsupported.
if (entries.length === 0) {
  // Fallback: Return total time since page load.
  return performance.now();
}