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

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

Sitenizin çevrimdışı kullanımını neden daha iyi bir çevrimdışı deneyim gerektirdiğini açıklayabilmeniz için nasıl izleyebilirsiniz?

Stephan Giesau

Martin Schierle

Bu makalede, sitenizin neden daha iyi bir çevrimdışı mod gerektirdiğini açıklamanıza yardımcı olması için sitenizin çevrimdışı kullanımını nasıl izleyebileceğiniz anlatılmaktadır. Ayrıca, çevrimdışı kullanım analizlerini uygularken kaçınılması gereken tehlikeler ve sorunlar da açıklanmaktadır.

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

Çevrimdışı kullanımı izlemenin en iyi çözümü, birçok tarayıcının desteklediği online ve offline etkinlikleri 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 çeşitli sorunlar ve kısıtlamalar var:

Genel olarak, her ağ bağlantısı durumu olayı çok fazla olabilir ve gizlilik odaklı bir dünyada mümkün olduğunca az veri toplanması gereken bir ters etki yaratır. Buna ek olarak, online ve offline etkinlikleri, bir kullanıcının muhtemelen göremeyeceği veya fark edemeyeceği, yalnızca bir saniyelik ağ kaybı için tetiklenebilir.
Çevrimdışı etkinliğin analiz takibi, analiz sunucusuna hiçbir zaman ulaşmaz çünkü kullanıcı çevrimdışıdır.
Bir kullanıcı çevrimdışı olduğunda zaman damgasının yerel olarak 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ışı modun olmaması nedeniyle sitenizden ayrılır ve sitenizi hiçbir zaman tekrar ziyaret etmezse bunu izlemenin hiçbir yolu yoktur. Çevrimdışı ayrılmaları izleyebilme, sitenizin neden daha iyi bir çevrimdışı moda ihtiyacı olduğuna dair bir örnek oluşturmak için kritik öneme sahip 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'inin gönderilmesi başarısız olabilir.
Kullanıcı çevrimdışı durumdayken geçerli sayfada kalsa bile, diğer analiz etkinliklerinin (ör.kaydırma etkinlikleri, tıklamalar vb.) hiçbiri de izlenmez. Bu da daha alakalı ve faydalı bilgiler olabilir.
Genel olarak çevrimdışı olmak kendi başına çok anlamlı değildir. Bir web sitesi geliştiricisi olarak, hangi tür kaynakların yüklenemediğini bilmek daha önemli olabilir. Bu, özellikle ağ bağlantısının kesildiği bir tarayıcıda çevrimdışı hata sayfasına (kullanıcıların anlayacağı) yol açmayabildiği, ancak sayfanın rastgele dinamik bölümlerinin beklenmedik şekilde başarısız olma olasılığının daha yüksek olduğu SPA'lar açısından önemlidir.

Çevrimdışı kullanıma dair temel bir fikir edinmek için bu çözümü de kullanabilirsiniz ancak birçok sakıncalılık ve sınırlamanın dikkatlice 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 çıkar. Temel fikir, analiz ping'lerinin kullanıcı çevrimdışı olduğu sürece IndexedDB'de depolanması ve kullanıcı tekrar çevrimiçi olduğunda bu ping'lerin tekrar gönderilmesidir. Google Analytics'te bu özellik zaten bir Çalışma Kutusu modülü üzerinden kullanıma hazırdır. Ancak dört saatten uzun süre ertelenen isabetlerin işlenmeyebileceğini unutmayın. En basit haliyle, 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 tüm mevcut etkinlikleri ve sayfa görüntüleme ping'lerini izler, ancak çevrimdışı oldukları için (sadece olduğu gibi yeniden oynatıldıklarından) emin olamazsınız. Bu işlem için özel bir boyut (aşağıdaki kod örneğinde cd1) kullanıp 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, internet bağlantısı tekrar kurulmadan sayfadan ayrılırsa ne olur? Bu işlem normalde Service Worker'ın uyku moduna geçmesine rağmen (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, bağlantı geri geldiğinde, kullanıcı sekmeyi veya tarayıcıyı kapatsa bile analiz verilerini daha sonra gönderir.

Yine de bir dezavantaj var: Bu, mevcut izlemeyi çevrimdışına uygun hale getirse de, temel bir çevrimdışı modu uygulayana kadar büyük olasılıkla pek alakalı veri elde edemezsiniz. Kullanıcılar, bağlantı koptuğunda da sitenizden kısa sürede vazgeçer. Ancak şimdi, çevrimdışı boyutun uygulandığı kullanıcıların ortalama oturum süresi ve kullanıcı etkileşimini, uygulanan çevrimdışı boyutla normal kullanıcılarınızla karşılaştırarak en azından bunu ölçüp nicel olarak anlayabilirsiniz.

SPA'lar ve geç yükleme

Çok sayfalı bir web sitesi olarak oluşturulmuş bir sayfayı ziyaret eden kullanıcılar çevrimdışı olur ve gezinmeye çalışırsa tarayıcının varsayılan çevrimdışı sayfası gösterilir. Böylece kullanıcıların neler olduğunu anlamasına yardımcı olunur. Ancak tek sayfalık uygulamalar olarak oluşturulan sayfaların işleyiş şekli farklıdır. Kullanıcı aynı sayfada kalır ve yeni içerik, hiçbir tarayıcıda gezinmeye gerek kalmadan AJAX yoluyla dinamik olarak yüklenir. Kullanıcılar çevrimdışı olduklarında tarayıcı hatası sayfasını görmez. Bunun yerine, sayfanın dinamik bölümleri hatalarla oluşturulur, tanımlanmamış duruma geçer veya artık dinamik olmaz.

Geç yükleme nedeniyle çok sayfalı web sitelerinde de benzer efektler görülebilir. Örneğin, ilk yükleme İnternet'te gerçekleşmiş, ancak kullanıcı sayfayı kaydırmadan önce çevrimdışı olmuş olabilir. Ekranın alt kısmındaki geç yüklenen tüm içerikler, sessiz bir şekilde başarısız olur ve kaybolur.

Bu tür durumlar kullanıcılar için çok rahatsız edici olduğundan, bunları takip etmek mantıklıdır. Service Worker'lar, ağ hatalarını yakalamak ve sonrasında analiz kullanarak bu hataları izlemek için mükemmel bir noktadır. Workbox ile, bir ileti etkinliği göndererek sayfayı başarısız istekler hakkında bilgilendirmek için genel bir yakalama işleyicisi 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 başka bir yol da yalnızca belirli rotalardaki hataları yakalamaktır. Örneğin, yalnızca /products/* rotalarında meydana gelen hataları bildirmek istiyorsak setCatchHandler öğesine, URI'yı normal ifadeyle filtreleyen bir kontrol ekleyebiliriz. Daha basit bir çözüm, registerRoute'u özel bir işleyiciyle uygulamaktır. Bu, iş mantığını ayrı bir rotaya dahil eder ve daha karmaşık hizmet çalışanları için 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ışı olarak 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çi firmaları 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 sayede, başarısız kaynak yüklemeleri Google Analytics'te izlenir ve burada raporlama ile analiz edilebilir. Türetilen analizler, hizmet çalışanı önbelleğine alma ve hata işlemeyi genel olarak iyileştirip 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ın avantajları ve dezavantajları ile birlikte kullanımın farklı yolları gösterilmiştir. Bu veri, kaç kullanıcınızın çevrimdışı olup bu nedenle sorunlarla karşılaştığını belirlemenize yardımcı olabilir, ancak bu hâlâ bir başlangıç. Web siteniz iyi oluşturulmuş bir çevrimdışı mod sunmadığı sürece, analizlerde elbette pek çevrimdışı kullanım görmezsiniz.

Tam izlemeyi uygulamanızı ve ardından takip numaralarını göz önünde bulundurarak çevrimdışı kapasitenizi yinelemelerinizi öneririz. Önce basit bir çevrimdışı hata sayfasıyla başlayın. Workbox çok önemlidir ve zaten özel 404 sayfalarına benzer bir kullanıcı deneyimi en iyi uygulaması olarak değerlendirilmelidir. Ardından daha gelişmiş çevrimdışı yedeklere ve son olarak gerçek çevrimdışı içeriklere doğru ilerleyin. Reklam verdiğinizden ve kullanıcılarınıza bunu iyi bir şekilde açıkladığınızdan emin olun, böylece kullanımın arttığını göreceksiniz. Sonuçta herkes zaman zaman çevrimdışı olur.

Farklı işlevleri olan paydaşları web sitenize daha fazla yatırım yapmaya ikna etmeye dair 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 bölümlerine göz atın. Bu gönderiler performansa odaklansa da paydaşları nasıl etkileşime geçireceğiniz konusunda genel bir fikir edinmenize yardımcı olacaktır.

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