Bu sayfa, Cloud Translation API ile çevrilmiştir.

Ç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

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.

Çevrimiçi ve çevrimdışı tarayıcı etkinliklerinin tehlikeleri

Ç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. Ne yazık ki bu yaklaşımla ilgili bazı sorunlar ve sınırlamalar var:

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, bir kullanıcı hâlâ çevrimdışı olabilir ve izleme ping'i gönderme işlemi yine de başarısız olabilir.
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, özellikle SPA'lar bağlamında geçerlidir. Ağ bağlantısının kesilmesi, tarayıcının çevrimdışı hata sayfasına (kullanıcıların bunu anlayabileceği) yol açmasa da sayfanın rastgele dinamik bölümlerinin sessiz bir şekilde başarısız olmasına yol açabilir.

Ç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: Service Worker

Çevrimdışı modu etkinleştiren çözüm, çevrimdışı kullanımı izlemek için daha iyi bir çözümdür. Temel fikir, kullanıcı çevrimdışı olduğu sürece 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 şekliyle, Workbox tabanlı bir hizmet çalışanı içinde şu iki satırla 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 (aşağıdaki kod örneğinde cd1) kullanarak analiz ping'ine offline işareti ekleyerek izleme isteklerini Workbox ile 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, normalde hizmet çalışanını uyku moduna geçirse de (bağlantı tekrar kurulduğunda verileri gönderemediği için) Workbox Google Analytics modülü Arka Plan Senkronizasyonu API'sini kullanır. Bu API, kullanıcı sekmeyi veya tarayıcıyı kapatsa bile daha sonra bağlantı yeniden kurulduğunda analiz verilerini gönderir.

Yine de bir dezavantaj vardır: Bu, mevcut izlemeyi çevrimdışına uygun hale getirse de, temel bir çevrimdışı modu uygulayana kadar büyük olasılıkla çok fazla alakalı veri gelmeyecektir. Bağlantı kesildiğinde kullanıcılar yine de sitenizden hızla 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 çevrimiçi gerçekleşse de kullanıcı sayfayı kaydırmadan önce çevrimdışı oldu. 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 sorunları takip etmek mantıklı olacaktır. Hizmet çalışanları, ağ hatalarını yakalamak ve sonunda analizleri kullanarak takip etmek için mükemmel bir noktadır. 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 oluşan hataları raporlamak istiyorsak setCatchHandler bölümüne URI'yı normal ifadelerle filtreleyen bir kontrol ekleyebiliriz. Daha temiz bir çözüm, registerRoute'u özel bir işleyici ile 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 tedarikçileri için 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üretilen 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 devreye sokmanızı ve daha sonra, takip sayılarına bakarak iterasyonlarda çevrimdışı özelliklerinizi 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ı.