Pomiary wykorzystania offline

Dowiedz się, jak śledzić korzystanie z witryny w trybie offline, aby uzasadnić, dlaczego warto korzystać z niej w trybie offline.

Stephan Giesau

Martin Schierle

Z tego artykułu dowiesz się, jak śledzić korzystanie z witryny offline i sprawdzać, dlaczego Strona wymaga lepszego trybu offline. Omawia także pułapki i problemy, jakich należy unikać przy wdrażaniu do analizy wykorzystania w trybie offline.

Przyczyny pułapek zdarzeń online i offline w przeglądarce

Oczywistym rozwiązaniem do śledzenia użytkowania offline jest utworzenie detektorów zdarzeń dla funkcji online i offline zdarzenia (które obsługuje wiele przeglądarek) i umieścić funkcje śledzenia i logikę logiczną w tych słuchaczach. Niestety wiąże się to z pewnymi problemami i ograniczeniami podejście:

• Śledzenie wszystkich zdarzeń stanu połączenia sieciowego może być zbyt częste i nie jest w świecie skupionym na prywatności, w którym należy ograniczać ilość danych, zgromadzone dane. Dodatkowo zdarzenia online i offline mogą uruchamiać się tylko przez ułamek sekundy utraty sieci, których użytkownik prawdopodobnie nie zobaczy ani nie zauważy.
• Śledzenie aktywności offline nigdy nie dotarło do serwera analiz, ponieważ użytkownik jest... cóż, offline.
• Śledzić sygnaturę czasową lokalnie, gdy użytkownik przechodzi w tryb offline, i wysyłanie aktywności offline na adres to, kiedy użytkownik wróci do trybu online, zależy od tego, czy ponownie odwiedzi on Twoją witrynę. Jeśli użytkownik opuści witrynę z powodu braku trybu offline i nigdy nie wróci, oznacza to, że masz nie można tego śledzić. Możliwość śledzenia porzuceń offline jest niezbędnym narzędziem dlaczego Twoja strona potrzebuje lepszego trybu offline.
• Zdarzenie online nie jest bardzo wiarygodne, ponieważ ma tylko dostęp do sieci, brak dostępu do internetu. Użytkownik może być wtedy offline, a wysyłanie pingu śledzenia może nadal kończy się niepowodzeniem.
• Nawet jeśli użytkownik pozostaje na bieżącej stronie w trybie offline, żaden inny śledzone są też zdarzenia analityczne (np. zdarzenia przewijania, kliknięcia itp.), co może być większą istotne i przydatne informacje.
• Działanie w trybie offline również nie jest zbyt istotne dla ogółu użytkowników. Deweloper witryn może ważne jest, aby wiedzieć, jakiego rodzaju zasobów nie udało się wczytać. Jest to szczególnie istotne w kontekście aplikacji SPA – utrata połączenia sieciowego może nie prowadzić do trybu offline przeglądarki. strony błędu (zrozumiałe dla użytkowników), ale występuje większe prawdopodobieństwo, że losowe dynamiczne części strony ulegają awarii. dyskretnie.

Nadal możesz korzystać z tego rozwiązania, aby poznać podstawowe informacje na temat użytkowania offline, ale wiele wady i ograniczenia trzeba dokładnie przeanalizować.

Lepsze podejście: mechanizm Service Worker

Rozwiązanie, które włącza tryb offline, okazuje się lepszym rozwiązaniem do śledzenia offline i ich wykorzystaniu. Podstawowym założeniem jest przechowywanie pingów analityki w IndexedDB, dopóki użytkownik jest offline. i wysyłać je ponownie, gdy użytkownik znowu połączy się z internetem. W Google Analytics jest to już dostępne gotowych modułów dzięki modułowi Workbox, ale pamiętaj, że działania wysyłały więcej niż odroczenie o 4 godziny mogą nie zostać przetworzone. W najprostszej formie można ją aktywować w usłudze opartej na Workbox instancji roboczej z tymi dwoma wierszami:

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

googleAnalytics.initialize();

Spowoduje to śledzenie wszystkich zdarzeń i pingów odsłon w trybie offline. pojawiły się offline (są odtwarzane w takiej postaci, w jakiej są). Do tego celu możesz modyfikować żądania śledzenia za pomocą Workbox dodając flagę offline do pingu statystyk za pomocą wymiaru niestandardowego (cd1 w kodzie) przykład poniżej):

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

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

Co się stanie, jeśli użytkownik opuści stronę z powodu braku połączenia z internetem, zanim nawiąże połączenie z internetem z powrotem? Mimo że zwykle powoduje to uśpienie skryptu service worker (ponieważ nie może wysłać danych po ponownym połączeniu) moduł Workbox Google Analytics korzysta z funkcji Synchronizacja w tle API, który wysyła dane analityczne. danych po przywróceniu połączenia, nawet jeśli użytkownik zamknie kartę lub przeglądarkę.

Nadal ma pewną wadę: chociaż umożliwia to korzystanie z istniejących funkcji śledzenia offline, najprawdopodobniej nie będzie zauważać zbyt wielu istotnych danych, dopóki nie wdrożysz podstawowego trybu offline. Użytkownicy szybko opuszczają witrynę, gdy połączenie z internetem zostanie przerwane. Teraz jednak można przynajmniej zmierzyć aby to określić, porównując średnią długość sesji i zaangażowanie użytkowników wymiarem zastosowanym w porównaniu ze zwykłych użytkowników.

SPA i leniwe ładowanie

Jeśli użytkownik odwiedzający stronę utworzoną jako witryna wielostronicowa przechodzi w tryb offline, przeglądarka może wyświetlana jest domyślna strona offline, która pomaga użytkownikom zrozumieć, co się dzieje. Jednak strony utworzone jako aplikacje jednostronicowe działają inaczej. Użytkownik pozostaje na tej samej stronie, a nowe treści są ładowane dynamicznie za pomocą technologii AJAX bez konieczności przechodzenia w przeglądarce. Użytkownicy nie widzą błędu przeglądarki stronę w trybie offline. Zamiast tego dynamiczne części strony renderują się z błędami, nieokreślonych stanów lub po prostu przestają być dynamiczne.

Podobne efekty może wystąpić w witrynach wielostronicowych z powodu leniwego ładowania. Na przykład być może początkowe wczytanie nastąpiło online, ale użytkownik przeszedł w tryb offline przed przewijaniem. Wszystkie treści wczytywane metodą leniwego ładowania w części ekranu widocznej po przewinięciu będzie dyskretnie zabraknie.

Takie przypadki są naprawdę irytujące dla użytkowników, dlatego warto je śledzić. Skrypty service worker to które pozwalają wychwytywać błędy sieci i śledzić je za pomocą analityki. Workbox globalny moduł obsługi wiadomości typucatch można skonfigurować tak, aby informował stronę o nieudanych żądaniach, wysyłając zdarzenie wiadomości:

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

  }());
});

Zamiast nasłuchiwać wszystkich nieudanych żądań, innym sposobem jest wychwytywanie błędów na konkretnych trasach Jeśli na przykład chcesz zgłosić błędy występujące tylko na trasach do: /products/*, możemy dodaj kontrolę w funkcji setCatchHandler, która filtruje identyfikator URI za pomocą wyrażenia regularnego. Lepszym rozwiązaniem jest wdrożenie requestRoute za pomocą niestandardowego modułu obsługi. Obejmuje to logikę biznesową w osobny sposób, który zapewnia większą łatwość obsługi w przypadku bardziej złożonych mechanizmów Service Worker:

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

Na ostatnim etapie strona musi nasłuchiwać zdarzenia message i wysłać ping analityczny. Pamiętaj też, aby buforować żądania analityczne, które są realizowane offline w skrypcie service worker. Jako opisane powyżej zainicjuj wtyczkę workbox-google-analytics dla wbudowanej usługi Google Analytics .

Poniższy przykład korzysta z Google Analytics, ale można go też zastosować w inny sposób do innych analiz dostawców.

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

Spowoduje to śledzenie nieudanych wczytań zasobów w Google Analytics, gdzie można je przeanalizować raportowania. Obserwacją pochodną można używane do usprawnienia buforowania skryptu service worker i ogólnie obsługi błędów w celu ulepszenia strony i niezawodne w niestabilnych warunkach.

Dalsze kroki

W tym artykule przedstawiliśmy różne sposoby śledzenia użytkowania offline, a także ich zalety i wady. Pomaga to oszacować, ilu użytkowników przestaje korzystać z internetu i ma z tego powodu problemy, To dopiero początek. O ile Twoja witryna nie zapewnia dobrze zaprojektowanego trybu offline, nie będzie jednak znacznie częściej wykorzystywać dostęp offline w statystykach.

Zalecamy wdrożenie pełnego śledzenia, a następnie rozszerzenie możliwości offline Analizując dane śledzenia, Zacznij od prostej strony błędu offline – Workbox to proste robić–i należy traktować jako sprawdzoną metodę UX podobną do niestandardowych stron 404. Pracuj po swojemu w stronę bardziej zaawansowanych kreacji zastępczych offline i treści offline. Reklamuj się i wyjaśnij to użytkownikom i zauważysz wzrost wykorzystania. W końcu wszyscy na jakiś czas przełączają się w tryb offline.

Przeczytaj artykuł Jak raportować dane i tworzyć kulturę skuteczności. oraz poprawianie szybkości witryny w różnych funkcjach. na przekonanie zainteresowanych osób z różnych działów do większych inwestycji w Twoją witrynę. Chociaż te posty są nastawione na zwiększanie skuteczności, ale pomogą Ci znaleźć ogólne pomysły na to, zainteresowanym.

Zdjęcie główne: JC Gellidon, Unsplash.