ফোরগ্রাউন্ডে কাটানো মোট সময় গণনা করো

কোনও ব্যবহারকারী কোনও পৃষ্ঠা অ্যাক্টিভভাবে দেখার জন্য মোট কত সময় ব্যয় করেন তা কীভাবে সঠিকভাবে গণনা করা যায় তা এই নির্দেশিকায় বিস্তারিতভাবে জানানো হয়েছে। 'পৃষ্ঠায় কাটানো সময়'-এর মতো প্রথাগত মেট্রিক্সে প্রায়শই ব্যাকগ্রাউন্ডে পৃষ্ঠায় কাটানো সময় ভুলভাবে অন্তর্ভুক্ত করা হয়। VisibilityStateEntry API ব্যবহার করে, আপনি শুধুমাত্র "ফোরগ্রাউন্ড টাইম" পরিমাপ করতে পারবেন, যা ব্যবহারকারীর এনগেজমেন্টের আরও ভালো মেট্রিক প্রদান করে।

ফোরগ্রাউন্ড সময় গণনা করার সুবিধা প্রয়োগ করা হচ্ছে

PerformanceTimeline API পারফর্ম্যান্স এন্ট্রি হিসেবে দৃশ্যমানতা স্ট্যাটাসের পরিবর্তন দেখায়। 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 API হল পারফর্ম্যান্স টাইমলাইনের একটি আধুনিক সংযোজন এবং এটি সব ব্রাউজারে কাজ নাও করতে পারে।

যেহেতু performance.getEntriesByType('visibility-state') কাজ করে না এমন ব্রাউজারে খালি অ্যারে দেখায়, তাই ফিচার শনাক্তকরণ ক্যালকুলেশন ফ্লোতে তৈরি করা হয়। এগিয়ে যাওয়ার আগে এন্ট্রি ফেরত দেওয়া হয়েছে কিনা তা সবসময় চেক করা উচিত।

API কাজ না করলে, 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();
}