Obliczanie łącznego czasu działania na pierwszym planie

Z tego przewodnika dowiesz się, jak dokładnie obliczyć łączny czas, przez który użytkownik aktywnie przegląda stronę. Tradycyjne dane, takie jak czas spędzony na stronie, często nieprawidłowo uwzględniają czas, gdy strona była otwarta w tle. Korzystając z interfejsu API VisibilityStateEntry, możesz mierzyć tylko „czas na pierwszym planie”, co zapewnia lepsze dane o zaangażowaniu użytkowników.

Implementowanie obliczania czasu na pierwszym planie

Interfejs API PerformanceTimeline udostępnia zmiany stanu widoczności jako wpisy dotyczące wydajności. Zamiast reagować na zdarzenia visibilitychange i ręcznie sumować czas podczas sesji, możesz w dowolnym momencie sprawdzić całą historię widoczności.

OBOWIĄZKOWE: aby obliczyć rzeczywisty czas działania na pierwszym planie, musisz wysłać zapytanie do wpisów dotyczących wydajności 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;
}

Kreacje zastępcze i obsługa przeglądarek

Interfejs API VisibilityStateEntry to nowoczesny dodatek do osi czasu wydajności, który może nie być obsługiwany we wszystkich przeglądarkach.

Ponieważ w nieobsługiwanych przeglądarkach performance.getEntriesByType('visibility-state') zwraca pustą tablicę, wykrywanie funkcji jest wbudowane w proces obliczeniowy. Zanim przejdziesz dalej, zawsze sprawdź, czy wpisy są zwracane.

Jeśli interfejs API nie jest obsługiwany, zalecamy zwrócenie wartości performance.now(). Reprezentuje on łączny czas od nawigacji, który stanowi rozsądną górną granicę czasu zaangażowania, gdy historia stanu widoczności jest niedostępna.

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();
}