Çevrimdışı kullanımı ölçme

Sitenizin çevrimdışı kullanımını izleyerek sitenizin neden daha iyi bir çevrimdışı deneyime ihtiyacı olduğunu açıklayabilirsiniz.

Stephan Giesau
Stephan Giesau
Martin Schierle
Martin Schierle

Bu makalede, sitenizin çevrimdışı modunun neden daha iyi olması gerektiğine dair bir gerekçe sunmanıza yardımcı olmak için sitenizin çevrimdışı kullanımını nasıl izleyeceğiniz gösterilmektedir. Ayrıca, çevrimdışı kullanım analizlerini uygularken kaçınılması gereken tuzaklardan ve sorunlardan da bahsedilmektedir.

Online ve çevrimdışı tarayıcı etkinliklerinin sakıncaları

Çevrimdışı kullanımı izlemenin en iyi yolu, online ve offline etkinlikleri (birçok tarayıcı tarafından desteklenir) için etkinlik işleyicileri oluşturmak ve analiz izleme mantığınızı bu işleyicilere yerleştirmektir. Maalesef bu yaklaşımın bazı sorunları ve sınırlamaları vardır:

  • Genel olarak her ağ bağlantısı durumu etkinliğini izlemek aşırı olabilir ve mümkün olduğunca az veri toplanmasının gerektiği gizlilik odaklı bir dünyada verimsizdir. Ayrıca online ve offline etkinlikleri, kullanıcının muhtemelen görmeyeceği veya fark etmeyeceği bir anlık ağ kaybı için tetiklenebilir.
  • Kullanıcı çevrimdışı olduğu için çevrimdışı etkinliğin analiz takibi hiçbir zaman Analytics sunucusuna ulaşmaz.
  • Kullanıcı internete bağlı olmadığında yerel olarak bir zaman damgasını izlemek ve kullanıcı tekrar internete bağlandığında internete bağlı olmayan etkinliği Analytics sunucusuna göndermek, kullanıcının sitenizi tekrar ziyaret etmesine bağlıdır. Kullanıcı, çevrimdışı mod olmadığı için sitenizden ayrılırsa ve sitenizi bir daha ziyaret etmezse bunu izlemeniz mümkün olmaz. Çevrimdışı kullanıcıların sitenizi terk etmesini izleme özelliği, sitenizin neden daha iyi bir çevrimdışı moduna ihtiyacı olduğuyla ilgili bir durum tespiti oluşturmak için kritik verilerdir.
  • online etkinliği, internet erişimini değil yalnızca ağ erişimini bildiği için çok güvenilir değildir. Bu nedenle, kullanıcı hâlâ çevrimdışı olabilir ve izleme ping'i gönderilmeyebilir.
  • Kullanıcı internete bağlı değilken mevcut sayfada kalsa bile diğer analiz etkinliklerinden hiçbiri (ör.kaydırma etkinlikleri, tıklamalar vb.) izlenmez. Bu etkinlikler daha alakalı ve yararlı bilgiler olabilir.
  • Genel olarak çevrimdışı olmak da çok anlamlı değildir. Web sitesi geliştiricisi olarak, hangi tür kaynakların yüklenemediğini bilmek daha önemli olabilir. Bu durum özellikle SPA'lar bağlamında önemlidir. Ağ bağlantısının kesilmesi, tarayıcıda çevrimdışı hata sayfası (kullanıcıların anlayabileceği bir durum) yerine sayfanın rastgele dinamik bölümlerinin sessizce çalışmamasına neden olabilir.

Çevrimdışı kullanımı temel düzeyde anlamak için bu çözümü kullanmaya devam edebilirsiniz ancak birçok dezavantaj ve sınırlamayı dikkatlice değerlendirmeniz gerekir.

Daha iyi bir yaklaşım: Hizmet çalışanı

Çevrimdışı modu etkinleştiren çözüm, çevrimdışı kullanımı izlemek için daha iyi bir çözümdür. Temel fikir, kullanıcı çevrimdışıyken analiz ping'lerini IndexedDB'de depolamak ve kullanıcı tekrar çevrimiçi olduğunda bunları yeniden göndermektir. Google Analytics için bu özellik Workbox modülü aracılığıyla hazır olarak kullanılabilir ancak dört saatten fazla gecikmeli gönderilen isabetlerin işlenemeyeceğini unutmayın. En basit haliyle, aşağıdaki iki satırla Workbox tabanlı bir hizmet çalışanı içinde etkinleştirilebilir:

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

googleAnalytics.initialize();

Bu yöntem, çevrimdışıyken mevcut tüm etkinlikleri ve sayfa görüntüleme ping'lerini izler ancak bunların çevrimdışı gerçekleştiğini bilemezsiniz (çünkü olduğu gibi yeniden oynatılırlar). Bunun için, özel bir boyut kullanarak (aşağıdaki kod örneğinde cd1) analytics ping'ine bir offline işareti ekleyerek Workbox ile izleme isteklerini değiştirebilirsiniz:

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

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

Kullanıcı, internet bağlantısı geri gelmeden önce çevrimdışı olduğu için sayfadan ayrılırsa ne olur? Bu işlem, normalde hizmet çalışanını uykuya yatırır (bağlantı tekrar kurulduktan sonra verileri gönderemediği için). Ancak Workbox Google Analytics modülü, Arka Plan Senkronizasyonu API'sini kullanır. Bu API, kullanıcı sekmeyi veya tarayıcıyı kapatsa bile bağlantı tekrar kurulduktan sonra analiz verilerini gönderir.

Bununla birlikte, bu yöntem mevcut izlemeyi çevrimdışı hale getirse de temel bir çevrimdışı modu uygulamadan önce büyük olasılıkla çok fazla alakalı veri almazsınız. Kullanıcılar, bağlantı kesildiğinde sitenizden hızlıca ayrılır. Ancak artık, çevrimdışı boyutu uygulanmış kullanıcıların ortalama oturum uzunluğunu ve kullanıcı etkileşimini normal kullanıcılarınızla karşılaştırarak bunu en azından ölçebilir ve nicelleştirebilirsiniz.

SPA'lar ve geç yükleme

Çok sayfalı bir web sitesi olarak oluşturulmuş bir sayfayı ziyaret eden kullanıcılar çevrimdışı olduğunda ve gezinmeye çalıştıklarında, tarayıcının varsayılan çevrimdışı sayfası gösterilir. Bu sayede kullanıcılar ne olduğunu anlayabilir. Ancak tek sayfalık uygulamalar olarak oluşturulan sayfalar farklı çalışır. Kullanıcı aynı sayfada kalır ve yeni içerik, tarayıcı gezinmesi olmadan AJAX aracılığıyla dinamik olarak yüklenir. Kullanıcılar çevrimdışıyken tarayıcı hata sayfasını görmez. Bunun yerine, sayfanın dinamik bölümleri hatalarla oluşturulur, tanımlanmamış durumlara girer veya dinamik olmaktan çıkar.

Geç yükleme nedeniyle, çok sayfalı web sitelerinde de benzer etkiler görülebilir. Örneğin, ilk yükleme internette gerçekleşmiş ancak kullanıcı kaydırmadan önce çevrimdışı olmuş olabilir. Ekranın altındaki tüm geç yüklenen içerikler sessizce başarısız olur ve eksik olur.

Bu tür durumlar kullanıcılar için gerçekten can sıkıcı olduğundan bu tür durumları izlemek mantıklı bir harekettir. Hizmet çalışanları, ağ hatalarını yakalamak ve analizleri kullanarak bunları izlemek için mükemmel bir yerdir. Workbox ile, bir küresel yakalama işleyicisi, sayfayı bir mesaj etkinliği göndererek başarısız istekler hakkında bilgilendirecek şekilde yapılandırılabilir:

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

  }());
});

Başarısız olan tüm istekleri dinlemek yerine, yalnızca belirli rotalardaki hataları yakalamak da bir yöntemdir. Örneğin, yalnızca /products/* rotalarında gerçekleşen hataları bildirmek istiyorsak setCatchHandler'e URI'yi normal ifadeyle filtreleyen bir kontrol ekleyebiliriz. Daha temiz bir çözüm, registerRoute işlevini özel bir işleyiciyle uygulamaktır. Bu, iş mantığını ayrı bir yola sarmalayarak daha karmaşık hizmet işçilerinde daha iyi sürdürülebilirlik sağlar:

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

Son adım olarak sayfanın message etkinliğini dinlemesi ve Analytics ping'ini göndermesi gerekir. Yine de, çevrimdışı gerçekleşen analiz isteklerini hizmet çalışanı içinde arabelleğe aldığınızdan emin olun. Daha önce açıklandığı gibi, yerleşik Google Analytics desteği için workbox-google-analytics eklentisini başlatın.

Aşağıdaki örnekte Google Analytics kullanılmaktadır ancak diğer analiz sağlayıcıları için de aynı şekilde uygulanabilir.

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

Bu işlem, Google Analytics'te başarısız kaynak yüklemelerini izler ve raporlama ile analiz edilebilir. Türetilmiş analiz, hizmet çalışanı önbelleğe alma ve genel olarak hata işleme işlemlerini iyileştirmek, sayfayı kararsız ağ koşullarında daha sağlam ve güvenilir hale getirmek için kullanılabilir.

Sonraki adımlar

Bu makalede, çevrimdışı kullanımı izlemenin avantajları ve eksiklikleri ile birlikte farklı yolları gösterilmiştir. Bu, kullanıcılarınızın kaçının internete bağlanmadığını ve bu nedenle sorun yaşadığını ölçmenize yardımcı olsa da bu yalnızca başlangıçtır. Web siteniz iyi tasarlanmış bir çevrimdışı mod sunmadığı sürece analizlerde çok fazla çevrimdışı kullanım görmezsiniz.

Tam izlemeyi etkinleştirmenizi ve ardından izleme numaralarına dikkat ederek çevrimdışı özelliklerinizi iterasyonlar halinde genişletmenizi öneririz. Öncelikle basit bir çevrimdışı hata sayfasıyla başlayın. Workbox ile bunu yapmak çok kolaydır. Ayrıca, özel 404 sayfalarına benzer bir kullanıcı deneyimi en iyi uygulaması olarak kabul edilmelidir. Ardından, daha gelişmiş çevrimdışı yedek çözümlere ve son olarak gerçek çevrimdışı içeriklere geçin. Bu özelliğin reklamını yapıp kullanıcılarınıza iyi bir şekilde açıkladığınızda kullanım oranının arttığını göreceksiniz. Herkesin zaman zaman çevrimdışı olduğu durumlar olabilir.

İşlevler arası paydaşları web sitenize daha fazla yatırım yapmaya ikna etmeyle ilgili ipuçları için Metrikleri raporlama ve performans kültürü oluşturma ve Web sitesi hızını işlevler arası olarak düzeltme başlıklı makalelere göz atın. Bu yayınlar performansa odaklansa da paydaşlarla nasıl etkileşime geçeceğinizle ilgili genel fikirler edinmenize yardımcı olacaktır.

Unsplash'taki JC Gellidon tarafından çekilen hero fotoğrafı.