이 페이지는 Cloud Translation API를 통해 번역되었습니다.

오프라인 사용 측정

사이트에 더 나은 오프라인 환경이 필요한 이유를 판단할 수 있도록 사이트의 오프라인 사용을 추적하는 방법

Stephan Giesau

Martin Schierle

이 도움말에는 사이트의 오프라인 사용을 추적하는 방법이 나와 있습니다. 사이트에 더 나은 오프라인 모드가 필요합니다. 또한 구현 시 피해야 할 함정과 문제도 설명합니다. 오프라인 사용 분석

온라인 및 오프라인 브라우저 이벤트의 위험 요소

오프라인 사용을 추적하기 위한 명백한 해결책은 online 및 offline 이벤트( 많은 브라우저가 지원)하고 애널리틱스 추적 데이터를 없습니다. 안타깝게도 여기에는 몇 가지 문제와 제한사항이 있습니다. 접근합니다.

일반적으로 모든 네트워크 연결 상태 이벤트를 추적하는 것은 과도할 수 있으며 가능한 한 적은 데이터가 있어야 하는 개인 정보 보호 중심 세상에서 오히려 비생산적일 것입니다. 수집됩니다. 또한 online 및 offline 이벤트는 1초 동안만 실행될 수 있습니다. 네트워크 손실이 발생할 수 있습니다.
오프라인 활동에 대한 애널리틱스 추적은 애널리틱스 서버에 도달하지 않습니다. 사용자는 오프라인 상태입니다.
사용자가 오프라인으로 전환되어 오프라인 활동을 다음으로 전송할 때 로컬에서 타임스탬프를 추적 사용자가 다시 온라인 상태가 될 때의 애널리틱스 서버는 사이트를 다시 방문하는 사용자에 따라 달라집니다. 사용자가 오프라인 모드가 없어서 사이트를 방문했다가 다시 방문하지 않는다면 추적할 방법이 없습니다. 오프라인 이탈을 추적하는 기능은 사이트에 더 나은 오프라인 모드가 필요한 이유에 대한 사례
online 이벤트는 다음과 같은 이유로 그다지 안정적이지 않습니다. 네트워크 액세스만 알고 있음 인터넷 액세스가 없습니다. 따라서 사용자가 여전히 오프라인 상태일 수 있으며 추적 핑을 전송하면 여전히 실패합니다
사용자가 오프라인 상태인 동안에도 현재 페이지에 머무르더라도 애널리틱스 이벤트 (예: 스크롤 이벤트, 클릭 등)가 추적되는데, 유용한 정보를 얻을 수 있습니다.
그 자체로는 오프라인이라는 것도 일반적으로 그다지 의미가 없습니다. 웹사이트 개발자는 어떤 종류의 리소스가 로드되지 못했는지 파악하는 것이 더 중요합니다. 이는 특히 네트워크 연결이 끊겨도 브라우저가 오프라인 상태로 이어지지 않을 수도 있는 SPA의 맥락에서 오류 페이지 (사용자가 이해할 수 있음)이지만 임의의 동적 부분이 실패할 가능성이 더 높음 조용히 말이야.

이 솔루션을 사용하여 오프라인 사용에 대한 기본적인 내용을 파악할 수는 있지만 신중하게 고려해야 합니다

더 나은 접근 방식: 서비스 워커

오프라인 모드를 사용 설정하는 솔루션이 오프라인 추적에 더 적합한 솔루션이 되었습니다. 사용합니다 기본 아이디어는 사용자가 오프라인 상태인 경우 분석 핑을 IndexedDB에 저장하는 것입니다. 사용자가 다시 온라인 상태가 되면 전송할 수 있습니다 Google 애널리틱스의 경우 이미 사용할 수 있습니다. 워크박스 모듈을 통해 즉시 사용할 수 있으며, 전송된 조회수는 4시간 연기 처리되지 않을 수 있습니다. 가장 간단한 형태로, Workbox 기반 서비스 내에서 활성화할 수 있습니다. 다음 두 줄로 바꿉니다.

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

googleAnalytics.initialize();

이렇게 하면 오프라인 상태일 때 모든 기존 이벤트와 페이지 조회 핑을 추적하지만 그대로 재생되기 때문에 오프라인에서 발생한 것입니다. 이 작업 Workbox로 추적 요청을 조작하고 맞춤 측정기준 (코드의 cd1)을 사용하여 애널리틱스 핑에 offline 플래그를 추가합니다. 참조).

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

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

사용자가 오프라인 상태여서 인터넷이 연결되기 전에 페이지에서 나가는 경우 어떻게 해야 할까요? 비록 이렇게 하면 일반적으로 서비스 워커가 절전 모드로 전환되더라도 (데이터를 전송할 수 없기 때문에) 다시 연결되면) Workbox Google 애널리틱스 모듈은 백그라운드 동기화 API를 사용하여 분석을 전송합니다. 데이터가 복구될 때 데이터를 전송할 수 있습니다.

여전히 단점이 있습니다. 이 경우 기존 추적을 오프라인으로 사용할 수 있지만, 대부분의 경우 들어오는 관련 데이터를 많이 볼 수 없는 경우 기본 오프라인 모드를 구현할 수 있습니다. 사용자는 여전히 연결이 끊어지면 사이트를 빠르게 끊습니다. 하지만 이제 최소한 사용자의 평균 세션 길이와 사용자 참여도를 오프라인 매장과 비교하여 일반 사용자 대비 '측정기준'을 적용할 수도 있습니다.

SPA 및 지연 로드

다중 페이지 웹사이트로 구축된 페이지를 방문하는 사용자가 오프라인에서 이동하려고 하면 브라우저의 기본 오프라인 페이지가 표시되어 사용자가 상황을 이해하는 데 도움이 됩니다. 그러나 단일 페이지 애플리케이션은 다르게 작동합니다. 사용자는 같은 페이지를 보고 브라우저 탐색 없이 AJAX를 통해 동적으로 로드됩니다. 사용자에게 브라우저 오류가 표시되지 않음 표시됩니다. 대신 오류와 함께 렌더링되는 페이지의 동적 부분이 동적이 되는 것을 중지할 수도 있습니다.

지연 로드로 인해 여러 페이지의 웹사이트에서도 이와 유사한 효과가 발생할 수 있습니다. 예를 들어 초기 로드가 온라인에서 발생했지만 사용자가 스크롤하기 전에 오프라인으로 전환했습니다. 모든 지연 로드 콘텐츠 자동으로 실패하여 누락될 것입니다.

이러한 사례는 사용자를 매우 짜증 나게 하므로 추적하는 것이 좋습니다. 서비스 워커는 네트워크 오류를 포착하고 분석을 사용하여 추적하기에 완벽한 지점입니다. Workbox를 사용하면 전역 catch 핸들러 메시지 이벤트를 전송하여 실패한 요청을 페이지에 알리도록 구성할 수 있습니다.

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

  }());
});

실패한 모든 요청을 수신 대기하는 대신 특정 경로에서 오류를 포착하는 방법도 있습니다. 전용입니다. 예를 들어 /products/*로 가는 경로에서 발생하는 오류만 보고하려면 다음과 같이 하면 됩니다. 정규 표현식으로 URI를 필터링하는 setCatchHandler에 검사를 추가합니다. 더 깔끔한 해결책은 맞춤 핸들러로 registerRoute를 구현하는 것입니다. 이는 포드의 비즈니스 로직을 별도의 경로로 분리하고 더 복잡한 서비스 워커에서 더 나은 유지 관리성을 얻을 수 있습니다.

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

마지막 단계로, 페이지는 message 이벤트를 수신 대기하고 분석 핑을 전송해야 합니다. 다시 말하지만, 오프라인에서 발생하는 분석 요청을 서비스 워커 내에서 버퍼링해야 합니다. 따라서 앞서 설명한 대로 기본 제공되는 Google 애널리틱스용 workbox-google-analytics 플러그인을 초기화합니다. 도움이 될 수 있습니다

다음 예에서는 Google 애널리틱스를 사용하지만 다른 애널리틱스에 동일한 방식으로 적용할 수 있습니다. 있습니다.

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

이렇게 하면 Google 애널리틱스에서 실패한 리소스 로드를 추적하고 보고서입니다. 파생된 통계는 서비스 워커 캐싱 및 오류 처리를 전반적으로 개선하고 페이지를 더욱 견고하게 만드는 데 사용됨 불안정한 네트워크 조건에서도 안정적인 성능을 유지할 수 있습니다

다음 단계

이 도움말에서는 오프라인 사용을 추적하는 다양한 방법과 장단점에 대해 알아봤습니다. 이는 얼마나 많은 사용자가 오프라인으로 전환하고 이로 인해 문제에 직면하는지 정량화하는 데 도움이 될 수 있지만 아직 시작에 불과합니다 웹사이트에서 제대로 구축된 오프라인 모드를 제공하지 않는 한 분석에서는 오프라인 사용량이 많지 않을 것입니다.

완벽한 추적을 한 다음, 다음에서 오프라인 기능을 확장하는 것이 좋습니다. 운송장 번호를 주시하면서 반복할 수 있습니다. 먼저 간단한 오프라인 오류 페이지부터 시작하세요. 워크박스를 통해 하고 맞춤 404 페이지와 유사한 UX 권장사항으로 간주되어야 합니다. 원하는 방식으로 작업 더 많은 고급 오프라인 대체를 마지막으로 실제 오프라인 콘텐츠를 고려하는 것입니다 사용자에게 이 점을 광고하고 설명해야 합니다. 사용량이 증가할 것입니다 결국 모든 사람이 가끔씩은 오프라인으로 전환됩니다.

측정항목을 보고하고 실적 문화를 조성하는 방법을 확인해 보세요. 및 여러 부서의 웹사이트 속도 문제 해결에서 팁을 확인하세요. 여러 직종의 이해관계자가 웹사이트에 더 많이 투자하도록 설득하는 데 매우 중요합니다. 이러한 게시물이 실적에 초점을 맞추고 있지만 있습니다.

히어로 사진: JC 젤리돈(Unsplash 제공)