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

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

Sitenizin neden daha iyi bir çevrimdışı deneyime ihtiyaç duyduğunu açıklayabilmek için sitenizin çevrimdışı kullanımını nasıl izleyebilirsiniz?

Stephan Giesau

Martin Schierle

Bu makalede, sitenizde neden daha iyi bir çevrimdışı moda ihtiyaç duyulduğunu açıklayabilmeniz için sitenizin çevrimdışı kullanımını nasıl izleyeceğiniz açıklanmaktadır. Ayrıca, çevrimdışı kullanım analizleri uygularken kaçınmanız gereken tehlikeler ve sorunlar da açıklanmaktadır.

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

Çevrimdışı kullanımı izlemenin en iyi çözümü, online ve offline etkinlikleri (birçok tarayıcının desteklediği) için etkinlik işleyiciler 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ğinin izlenmesi aşırı olabilir ve mümkün olduğunca az veri toplanmasının gerektiği gizlilik odaklı bir dünyada verimi olumsuz etkiler. Ayrıca online ve offline etkinlikleri, kullanıcının görmeyeceği veya fark edemeyeceği ağ kaybında yalnızca birkaç saniyelik bir süre için etkinleşebilir.
Kullanıcı çevrimdışı olduğu için, çevrimdışı etkinliğin analiz takibi analiz sunucusuna asla ulaşmaz.
Bir kullanıcı çevrimdışı olduğunda yerel olarak bir zaman damgasının izlenmesi ve kullanıcı tekrar çevrimiçi olduğunda çevrimdışı etkinliğin analiz sunucusuna gönderilmesi, kullanıcının sitenizi yeniden ziyaret etmesine bağlıdır. Kullanıcı, çevrimdışı mod olmadığı için sitenizden ayrılır ve hiç ziyaret etmezse bunu takip etmeniz mümkün olmaz. Çevrimdışı ayrılmaları izleme olanağı, sitenizin neden daha iyi bir çevrimdışı moda ihtiyacı olduğuna dair bir örnek oluşturmak açısından kritik verilerdir.
online etkinliği internet erişimi değil, yalnızca ağ erişimi hakkında bilgi sahibi olduğu 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ı çevrimdışıyken de geçerli sayfada kalsa bile diğer analiz etkinliklerinin (ör.kaydırma etkinlikleri, tıklamalar vb.) hiçbiri izlenmez. Bu, daha alakalı ve yararlı bir bilgi olabilir.
Çevrimdışı olmak da genel olarak çok anlamlı değildir. Bir web sitesi geliştiricisi olarak ne 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ıma dair temel bilgileri edinmek için bu çözümü kullanmaya devam edebilirsiniz. Bununla birlikte, birçok dezavantaj ve sınırlamanın dikkatli bir şekilde değerlendirilmesi gerekir.

Daha iyi bir yaklaşım: Service Worker

Çevrimdışı modu etkinleştiren çözümün, çevrimdışı kullanımı izlemek için daha iyi bir çözüm olduğu ortaya çıktı. Temel fikir, analiz ping'lerini kullanıcı çevrimdışı olduğu sürece IndexedDB'de depolamak ve kullanıcı tekrar çevrimiçi olduğunda yeniden göndermektir. Google Analytics için bu özellik bir Workbox modülü aracılığıyla kullanıma hazırdır ancak dört saatten uzun süre ertelenmiş isabetlerin işlenmeyebileceğ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, çevrimdışıyken mevcut tüm etkinlikleri ve sayfa görüntüleme ping'lerini izler, ancak bunların çevrimdışı olarak gerçekleştiğini bilemezsiniz (sadece olduğu gibi tekrar oynatıldıklarından). 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ı çevrimdışı olduğu için sayfadan ayrılırsa, internet bağlantısı tekrar kurulmadan önce ne olur? Bu normalde hizmet çalışanının uyku moduna geçmesine neden olsa da (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ı tekrar sağlandığında 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ı koptuğunda da kullanıcılar sitenizi hızla bırakır. Ancak artık, çevrimdışı boyut uygulanmış kullanıcılar ile normal kullanıcılarınızı karşılaştırarak ortalama oturum uzunluğunu ve kullanıcı etkileşimini karşılaştırarak bunu ölçebilir ve ölçebilirsiniz.

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ışırsa tarayıcının varsayılan çevrimdışı sayfası gösterilir ve kullanıcıların neler olduğunu anlamalarına yardımcı olur. Ancak, tek sayfalık uygulamalar olarak oluşturulan sayfalar farklı şekilde çalışır. Kullanıcı aynı sayfada kalır ve yeni içerik, tarayıcıda herhangi bir gezinme olmaksızın AJAX üzerinden dinamik bir şekilde yüklenir. Kullanıcılar çevrimdışıyken tarayıcı hata sayfasını görmezler. Bunun yerine, sayfanın dinamik kısımları hatalarla oluşturulur, tanımsız durumlara girer veya dinamik olmayı durdurur.

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 kısmındaki geç yüklenen tüm içerik sessizce başarısız olur ve kaybolur.

Bu tür durumlar kullanıcıları gerçekten rahatsız ettiğinden, bunları takip etmenizde fayda vardır. Hizmet çalışanları, ağ hatalarını yakalamak ve sonunda analizleri kullanarak takip etmek için mükemmel bir noktadır. Workbox sayesinde, bir mesaj etkinliği göndererek başarısız istekler hakkında sayfayı bilgilendirecek genel bir yakalama işleyici 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();

  }());
});

Tüm başarısız istekleri dinlemek yerine yalnızca belirli rotalardaki hataları yakalamak için başka bir yöntem kullanabilirsiniz. Örneğin, yalnızca /products/* rotalarında meydana gelen hataları bildirmek istiyorsak setCatchHandler bölümüne, URI'yı normal ifade ile filtreleyen bir kontrol ekleyebiliriz. Daha temiz bir çözüm, registerRoute'u özel bir işleyici ile uygulamaktır. Bu, iş mantığını ayrı bir rotada birleştirir ve daha karmaşık hizmet çalışanlarında daha iyi bakım 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 analiz ping'ini göndermesi gerekir. Çevrimdışı gerçekleşen analiz isteklerini Service Worker'da 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, Google Analytics'te başarısız kaynak yüklemelerini izler ve bunlar raporlama ile analiz edilebilir. Türetilen analiz, istikrarsız ağ koşullarında sayfayı daha sağlam ve güvenilir hale getirmek amacıyla Service Worker önbelleğe alma ve genel olarak hata işleme süreçlerini iyileştirmek için kullanılabilir.

Sonraki adımlar

Bu makalede, çevrimdışı kullanımı izlemenin farklı yolları, avantajları ve dezavantajlarıyla birlikte gösterilmiştir. Bu, kaç kullanıcınızın çevrimdışı olduğunu ve bu nedenle sorunla karşılaştığını ölçmenize yardımcı olsa da bu sadece bir başlangıç. Web siteniz iyi oluşturulmuş bir çevrimdışı mod sunmadığı sürece, Analytics'te ç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 (Workbox işlemi önemsizdir) başlayın. Yine de özel 404 sayfalarına benzer bir kullanıcı deneyimi en iyi uygulaması olarak düşünülmelidir. Ardından daha gelişmiş çevrimdışı yedeklere, son olarak da gerçek çevrimdışı içeriklere doğru ilerleyin. Reklam yapıp kullanıcılarınıza iyice açıklayın. Kullanımın arttığını göreceksiniz. Sonuçta herkes zaman zaman çevrimdışı oluyor.

Çapraz fonksiyonlu 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ı çapraz fonksiyonlu düzeltme bölümlerine göz atın. Bu gönderiler performansa odaklansa da paydaşların katılımını sağlama konusunda genel fikirler edinmenize yardımcı olacaktır.

JC Gellidon'ın Unsplash'teki hero fotoğrafı.