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, sitenizin çevrimdışı kullanımını nasıl takip edeceğiniz açıklanmaktadır. Bu sayede, sitenin daha iyi bir çevrimdışı moda ihtiyacı var. Uygulama sırasında kaçınmanız gereken tehlikeler ve sorunlar da açıklanmaktadır. çevrimdışı kullanım analizi.

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

Çevrimdışı kullanımı izlemenin en iyi çözümü, online ve offline etkinlik birçok tarayıcı destekler) ve analiz izleme aracınızı mantık yürütmeniz gerekir. Ne yazık ki bu ürünle ilgili bazı sorunlar ve sınırlamalar var. yaklaşım:

Genel olarak, her ağ bağlantısı durumu etkinliğinin izlenmesi aşırı olabilir ve mümkün olduğunca az verinin gerektiği gizlilik odaklı bir dünyada verimsiz toplanıyor. Ayrıca online ve offline etkinlikleri yalnızca birkaç saniyeliğine etkinleşebilir. kullanıcıların göremeyeceği veya fark edemeyeceği şeyler de yaşanabilir.
Çevrimdışı etkinliğin analiz izlemesi hiçbir zaman analiz sunucusuna ulaşmaz çünkü kullanıcı çevrimdışıysa.
Bir kullanıcı çevrimdışı olduğunda ve çevrimdışı etkinliği Analiz sunucusu, kullanıcının sitenizi yeniden ziyaret etmesine bağlıdır. Kullanıcı, çevrimdışı mod olmadığı için sitenizden ayrılır ve daha sonra sitenizi hiçbir zaman ziyaret etmezse, bunu takip etmeniz mümkün değil. Çevrimdışı ayrılmaları takip edebilmek sitenizde neden daha iyi bir çevrimdışı moda ihtiyaç duyduğunu öğrenin.
online etkinliği, güvenilir olmadığı için yalnızca ağ erişimini bilir, internet erişimi yok. Dolayısıyla, kullanıcı hâlâ çevrimdışı olabilir ve izleme ping'i göndermek başarısız olur.
Kullanıcı çevrimdışıyken de geçerli sayfada kalsa bile Analytics etkinlikleri (ör.kaydırma etkinlikleri, tıklamalar vb.) de izlenir. Bu da yararlı bilgiler sağlar.
Ç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 önemlidir. Bu, özellikle de SPA'lar bağlamında, ağ bağlantısının kesilmesi durumunda bir tarayıcı çevrimdışına geçmeyebilir hata sayfası (kullanıcıların anlar) ancak sayfanın rastgele dinamik bölümlerinin başarısız olma olasılığı sessizce yönetiyorum.

Bu çözümü yine de çevrimdışı kullanımla ilgili temel bir fikir edinmek için kullanabilirsiniz, ancak dezavantajlar ve sınırlamalar dikkatle incelenmelidir.

Daha iyi bir yaklaşım: Service Worker

Çevrimdışı modu etkinleştiren çözümün, çevrimdışı izleme için daha iyi bir çözüm olduğu ortaya çıktı. bazı yolları da görmüştük. Temel fikir, kullanıcı çevrimdışı olduğu sürece analiz ping'lerini IndexedDB'de depolamaktır. ve kullanıcı tekrar internete bağlandığında bunları yeniden göndermelidir. Google Analytics için bu zaten mevcuttur bir Çalışma Kutusu modülüyle kullanıma hazır, Ancak, isabetler %50’den fazla dört saat ertelendi işleme konulmayabilir. En basit haliyle Workbox tabanlı bir hizmette etkinleştirilebilir. şu iki satırı kullanın:

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 çevrimdışı olarak gerçekleştiğinden (videolar sadece olduğu gibi tekrar oynatıldığı için) Bunun için İzleme isteklerini Workbox ile değiştirebilirsiniz. Analytics ping'ine bir offline işareti ekleyerek, bir özel boyut (kodda cd1) kullanarak aşağıda bir örnek verilmiştir):

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ı sağlanmadan önce ne olur? nasıl dönebilirim? Bu işlem normalde hizmet çalışanının uyku moduna geçmesine neden olur (çünkü verileri gönderemediği için bağlantı tekrar kurulduğunda), Workbox Google Analytics modülü Arka Plan Senkronizasyonu API'sinden gelen trafiktir. kullanıcı sekmeyi veya tarayıcıyı kapatmış olsa bile, bağlantı tekrar kurulduğunda

Yine de bir dezavantaj vardır: Bu, mevcut izlemeyi çevrimdışı olarak etkinleştirirken, büyük olasılıkla pek fazla alakalı verinin gelmediğini görebilirsiniz. Kullanıcılar yine de bağlantı koptuğunda sitenizi hızla terk etmesini sağlayın. Ama artık en azından riskleri ölçebilir ve Bu karşılaştırmayı, çevrimdışı dönüşüm gerçekleştiren kullanıcılar için ortalama oturum uzunluğunu ve kullanıcı etkileşimini normal kullanıcılarınıza kıyasla uygulandı.

SPA'lar ve geç yükleme

Çok sayfalı 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ışı sayfa görünür ve kullanıcıların neler olduğunu anlamasına yardımcı olur. Ancak, tek sayfalık uygulamalar farklı şekilde çalışır. Kullanıcı aynı sayfada kalır ve yeni içerik Tarayıcı gezinmesi gerekmeden AJAX ile dinamik bir şekilde yüklenir. Kullanıcılar tarayıcı hatasını görmüyor sayfasını ziyaret edin. Bunun yerine, sayfanın dinamik bölümleri hatalarla oluşturulur, olabilir veya durabilir.

Geç yükleme nedeniyle çok sayfalı web sitelerinde de benzer etkiler görülebilir. Örneğin, İlk yükleme çevrimiçi gerçekleşti, ancak kullanıcı sayfayı kaydırmadan önce çevrimdışı oldu. Tüm geç yüklenen içerikler 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. Service Worker'lar ağ hatalarını yakalamak ve en sonunda analiz kullanarak bunları takip etmek için mükemmel bir noktadır. Çalışma kutusu sayesinde global yakalama işleyici , bir mesaj etkinliği göndererek başarısız istekler hakkında sayfayı 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();

  }());
});

Tüm başarısız istekleri dinlemek yerine, belirli rotalardaki hataları yakalamak için başka bir yöntem kullanabilirsiniz. gerekir. Örneğin, yalnızca /products/* rotalarında oluşan hataları bildirmek istiyorsak setCatchHandler içinde, URI'yı normal ifade ile filtreleyen bir denetim ekleyin. Daha temiz bir çözüm, registerRoute'u özel bir işleyici ile uygulamaktır. Bu proje aynı zamanda iş mantığını ayrı bir rotada düzenleyebilir ve daha karmaşık hizmet çalışanlarında daha iyi bakım sağlayabilirsiniz.

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. Farklı daha önce açıklandığı gibi, Yerleşik Google Analytics için workbox-google-analytics eklentisini başlatın destek.

Aşağıdaki örnekte Google Analytics kullanılmaktadır, ancak diğer analizlerde aynı şekilde uygulanabilir. yardımcı olur.

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 bu öğeler ile analiz edilebilir. raporlama. Türetilen analiz, Service Worker önbelleğe alma ve genel olarak hata işleme süreçlerini iyileştirerek sayfayı daha sağlam hale getirmek için kullanılır. istikrarsız ağ koşullarında güvenilir hale gelir.

Sonraki adımlar

Bu makalede, çevrimdışı kullanımı izlemenin farklı yolları, avantajları ve dezavantajlarıyla birlikte gösterilmiştir. Bu, kullanıcılarınızdan kaçının çevrimdışı olduğunu ve bu nedenle sorunla karşılaştığını ölçmenize yardımcı olabilir. bu hâlâ sadece bir başlangıç. Web siteniz iyi oluşturulmuş bir çevrimdışı mod sunmadığı sürece, Analytics'te çok fazla çevrimdışı kullanım görmeyecektir.

Tam izlemeyi kullanmaya başlamanızı ve çevrimdışı özelliklerinizi iterasyonlar ile yürütülmesini sağlar. Öncelikle basit bir çevrimdışı hata sayfasıyla başlayın: Bu bilginin ne kadar yapın ve yine de özel 404 sayfalarına benzer bir kullanıcı deneyimi en iyi uygulaması olarak kabul edilmelidir. Sonra istediğiniz gibi çalışın geliştirdik. ve son olarak gerçek çevrimdışı içeriğe yöneliktir. Reklam verin ve bunu kullanıcılarınıza açıklayın. kullanımın arttığını göreceksiniz. Sonuçta herkes zaman zaman çevrimdışı oluyor.

Metrikleri raporlama ve performans kültürü oluşturma başlıklı makaleyi inceleyin. ve web sitesi hızını çapraz fonksiyonlu olarak düzeltme başlıklı makalelere göz atın daha fazla yatırım yapmaya ikna etmek üzerine proje yöneticisi rolündesiniz. Bu yayınlar odaklanıyorsa, onlarla nasıl etkileşime geçeceğinize dair yardımcı olmaktır.

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