Tam oturum analizlerini ve telemetriyi güvenilir bir şekilde ölçme

Analizleri, Core Web Vitals'ı ve bir kullanıcının web sayfası ziyaretinin tamamını (yalnızca sayfa yüklenene kadar değil) kapsayan telemetri verilerini güvenilir bir şekilde izlemek için fetchLater() API'sini kullanın.

fetchLater() API'si, yanıtın gerekli olmadığı ve teslimat zamanlamasının acil olmadığı durumlarda sunucuya veri göndermenin en güvenilir yoludur. Bu durum, kullanıcı analizleri, telemetri, hata izleme ve Core Web Vitals gibi performans metrikleri gibi veriler için geçerlidir.

unload etkinlik işleyicide <img> pikseli oluşturma gibi eski teknikler, güvenilmezlikleriyle bilinir (özellikle mobil cihazlarda) ve performansı olumsuz etkileyebilir (sayfaları geri-ileri önbellek için uygunsuz hale getirerek).

Nasıl uygulanır?

1. İsteği planlayın: Alakalı veriler kullanılabilir olduğunda veri yükünüzle fetchLater() yöntemini çağırın. Bu işlem, verileri daha sonra gönderilmek üzere sıraya alır.

2. Yükü gerektiği gibi güncelleyin: Kullanıcı daha fazla veri oluşturursa veya durum değişirse önceden planlanmış isteği iptal edin ve tamamen güncellenmiş anlık görüntüyle fetchLater() yöntemini tekrar çağırın.

3. Gerisini tarayıcıya bırakın: Kullanıcı sayfadan ayrıldığında veya sekmeyi kapattığında tarayıcı, en son fetchLater() çağrınızdaki yükü güvenilir bir şekilde gönderir.

Örnek kod

Bu kod, güncellenen oturum süresiyle her 10 saniyede bir yeni bir işaretçiyi sıraya almak için fetchLater() kullanarak kullanıcının bir sayfayı ziyaret ettiği oturumun süresini ölçer.

const ANALYTICS_ENDPOINT = '/path/to/analytics/endpoint';

const sessionData = {
  duration: 0,
  id: crypto.randomUUID(),
};

let fetchLaterController = null;

function queueBeacon() {
  // Abort any pending beacons before creating a new one.
  if (fetchLaterController) {
    fetchLaterController.abort();
  }
  fetchLaterController = new AbortController();

  // Update session duration to the current page time.
  sessionData.duration = performance.now();

  // Schedule a fetch for the data payload to be sent later.
  // IMPORTANT: wrap the call in a try/catch to handle quota errors.
  try {
    fetchLater(ANALYTICS_ENDPOINT, {
      method: 'POST',
      headers: {'content-type': 'application/json'},
      body: JSON.stringify(sessionData),
      signal: fetchLaterController.signal,
    });
  } catch (error) {
    // Handle errors as needed.
  }
}

// Update the session data and queue a new beacon every 10 seconds.
setInterval(queueBeacon, 10000);

En İyi Uygulamalar

• Yanıtın gerekli olmadığı ve verilerin hemen gönderilmesinin kritik olmadığı durumlarda sunucuya veri göndermek için fetchLater() KULLANIN.
• Kullanıcı sayfadan ayrılmadan önce verilerin güncellenmesi gerekebilecek durumlarda, beklemedeki getirme işlemini iptal etmek için AbortController KULLANIN.
• YAPIN: Kotanın aşılmaması için yük boyutunu minimumda tutun (şu anda kaynak başına yaklaşık 64 KB).
• MUTLAKA kota hatalarını işlemek için fetchLater() çağrılarını try/catch içine alın.
• globalThis üzerinde fetchLater()'nin varlığını tespit etmek için özellik algılamayı KULLANIN ve API'yi desteklemeyen tarayıcılar için bir yedek strateji uygulayın.
• İstek gövdesi için ReadableStream nesnesi KULLANMAYIN. Aksi takdirde hata alırsınız.

Tarayıcı desteği ve yedek stratejiler

fetchLater(), Baseline hedefinize ulaşmazsa bir yedek strateji gerekir. Ancak bu API'nin daha yüksek güvenilirlik ve performans avantajları göz önüne alındığında, tarayıcı destekliyorsa fetchLater() kullanılmalıdır.

Önerilen yedek strateji, keepalive veya navigator.sendBeacon() ile fetch() kullanarak desteklenmeyen tarayıcıları dahili olarak işleyen aşağıdaki polyfill'i kullanmaktır. Kendi kodunuz doğrudan fetchLater() yöntemini çağırmalıdır. fetch(), sendBeacon() veya diğer işaretçi API'lerini hiçbir zaman kendiniz çağırmayın.

fetchLater() polyfill

Desteklenmeyen tarayıcılarda API'yi mümkün olduğunca yakın bir şekilde uygulayan aşağıdaki minimal fetchLater() polyfill'i kullanın.

Bu polyfill'in tek önemli davranış farkı, kullanıcının ne zaman ayrıldığını algılamak için tarayıcının yerel unload işleyicisine güvenmek yerine visibilitychange kullanmasıdır. Bu, dahili bir uygulama ayrıntısıdır. Kodunuzun visibilitychange veya diğer sayfa yaşam döngüsü olaylarını dinlemesi gerekmez. fetchLater() yöntemini çağırmanız yeterlidir. Polyfill, yayınlama işlemini gerçekleştirir.

globalThis.fetchLater ??= function fetchLater(url, init = {}) {
  let timeoutHandle;
  let activated = false;

  function sendNow() {
    if (!(init.signal && init.signal.aborted)) {
      // Use fetch keepalive if the browser supports it or if custom fetch
      // parameters are specified (e.g. custom headers or methods).
      // Otherwise fall back to `navigator.sendBeacon()`.
      if (
        'keepalive' in Request.prototype ||
        init.method !== 'POST' ||
        init.headers
      ) {
        fetch(url, Object.assign({}, init, {keepalive: true}));
        activated = true;
      } else {
        activated = navigator.sendBeacon(url, init.body);
      }
    }
    destroy();
  }

  function destroy() {
    document.removeEventListener('visibilitychange', sendNow);
    clearTimeout(timeoutHandle);
  }

  if (document.visibilityState === 'hidden') {
    // If the beacon was created while the page is already hidden, send data
    // ASAP but wait until the next microtask to allow all sync code to run.
    queueMicrotask(sendNow);
  } else {
    document.addEventListener('visibilitychange', sendNow);

    if (typeof init.activateAfter === 'number' && init.activateAfter >= 0) {
      timeoutHandle = setTimeout(sendNow, init.activateAfter);
    }
  }

  if (init.signal) {
    init.signal.addEventListener('abort', destroy);
  }

  return {
    get activated() {
      return activated;
    },
  };
};