Workbox-google-analytics

오프라인에서 작동하는 애플리케이션을 빌드하는 경우 사용자가 인터넷 연결이 없을 때 앱과 상호작용하는 방식을 이해하는 것이 이러한 환경을 최적화하는 데 중요합니다.

Google 애널리틱스와 같은 분석 제공업체는 서버에 데이터를 전송하려면 네트워크에 연결되어 있어야 합니다. 즉, 연결을 사용할 수 없으면 요청이 실패하고 이러한 상호작용은 분석 보고서에서 누락됩니다. 그런 일은 없는 일처럼 일어날 것 같아.

Workbox Google 애널리틱스는 서비스 워커의 실패한 요청 감지 기능을 활용하여 Google 애널리틱스 사용자를 위해 이 문제를 해결합니다.

Google 애널리틱스는 HTTP 요청을 통해 측정 프로토콜에 모든 데이터를 수신합니다. 즉, 서비스 워커 스크립트가 가져오기 핸들러를 추가하여 측정 프로토콜로 전송된 실패한 요청을 감지할 수 있습니다. 이러한 요청을 IndexedDB에 저장하고 연결이 복원되면 나중에 다시 시도할 수 있습니다.

Workbox Google 애널리틱스는 바로 이 작업을 수행합니다. 또한 analytics.js 및 gtag.js 스크립트를 캐시하는 가져오기 핸들러를 추가하여 오프라인에서도 실행할 수 있습니다. 마지막으로 실패한 요청이 재시도되면 Workbox Google 애널리틱스는 요청 페이로드의 qt를 자동으로 설정 (또는 업데이트)하여 Google 애널리틱스의 타임스탬프에 원래 사용자 상호작용 시간이 반영되도록 합니다.

Workbox Google 애널리틱스 사용 설정

Workbox Google 애널리틱스를 사용 설정하려면 initialize() 메서드를 호출합니다.

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

googleAnalytics.initialize();

이는 Google 애널리틱스에 실패한 요청을 큐에 추가하고 재시도하는 데 필요한 유일한 코드이며 Google 애널리틱스를 오프라인에서 작동하도록 하는 가장 간단한 방법입니다.

그러나 위의 코드만 사용하면 재시도된 요청과 첫 번째 시도에서 성공한 요청을 구분할 수 없습니다. 즉, 오프라인 사용자로부터 모든 상호작용 데이터를 받게 되지만, 사용자가 오프라인 상태일 때 어떤 상호작용이 발생했는지는 알 수 없습니다.

이 문제를 해결하려면 아래에 설명된 구성 옵션 중 하나를 사용하여 재시도된 요청에서 전송되는 데이터를 수정하거나 주석을 달 수 있습니다.

전송할 데이터 수정

재시도된 요청과 재시도되지 않은 요청을 구분하려면 parameterOverrides 또는 hitFilter 구성 옵션을 지정하면 됩니다.

이 옵션을 사용하면 재시도된 요청에서 전송되는 측정 프로토콜 매개변수를 수정할 수 있습니다. 재시도된 모든 요청에서 특정 매개변수에 동일한 값을 설정하려는 경우 parameterOverrides 옵션을 사용해야 합니다. hitFilter 옵션은 특정 매개변수의 값을 런타임에 계산하거나 다른 매개변수의 값에서 파생해야 하는 경우에 사용해야 합니다.

아래 예는 두 옵션을 사용하는 방법을 보여줍니다.

예

맞춤 측정기준을 사용하여 온라인 및 오프라인 상호작용 추적하기

Google 애널리틱스에는 온라인 또는 오프라인 상호작용에 대한 기본 제공 측정기준이 없습니다. 그러나 맞춤 측정기준이라는 기능을 사용하여 정확히 이러한 용도로 자체 측정기준을 만들 수 있습니다.

Workbox Google 애널리틱스에서 커스텀 측정기준을 사용하여 서비스 워커가 재생한 요청을 추적하려면 다음 단계를 따르세요.

1. Google 애널리틱스에서 새 맞춤 측정기준을 만듭니다. 모든 상호작용은 오프라인일 수 있으므로 '네트워크 상태'와 같은 이름을 지정하고 범위를 '조회'로 설정합니다.

2. 새로 만든 측정기준에 할당된 색인을 기록한 후 이를 매개변수 이름으로 Workbox Google 애널리틱스 코드의 parameterOverrides 구성 옵션에 전달합니다.

   예를 들어 첫 번째 맞춤 측정기준인 경우 색인은 1, 매개변수 이름은 cd1입니다 (색인이 8이면 cd8임).

   import * as googleAnalytics from 'workbox-google-analytics';
   
   googleAnalytics.initialize({
     parameterOverrides: {
       cd1: 'offline',
     },
   });
   

3. (선택사항) parameterOverrides의 값은 재시도된 ('오프라인') 요청에만 적용되므로 다른 모든 요청에도 기본값인 '온라인'을 설정하는 것이 좋습니다. 꼭 필요한 것은 아니지만 이렇게 하면 보고서를 더 쉽게 읽을 수 있습니다.
   
   예를 들어 기본 analytics.js 추적 스니펫을 사용하여 Google 애널리틱스를 설치한 경우 서비스 워커가 재생하지 않는 모든 요청에 대해 '네트워크 상태' 맞춤 측정기준에 'online'의 기본값을 사용하도록 ga('set', 'dimension1', 'online') 줄을 추가할 수 있습니다.

   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   
     ga('create', 'UA-XXXXX-Y', 'auto');
   
     // Set default value of custom dimension 1 to 'online'
     ga('set', 'dimension1', 'online');
   
     ga('send', 'pageview');
   </script>
   

커스텀 측정항목을 사용하여 큐에 소요된 요청 추적

오프라인 상호작용이 발생한 시점부터 연결이 복원되고 요청이 성공적으로 재시도된 시점까지 시간이 얼마나 지났는지 알아보려면 커스텀 측정항목과 hitFilter 구성 옵션을 사용하여 이를 추적할 수 있습니다.

1. Google 애널리틱스에서 새 맞춤 측정항목을 만듭니다. '오프라인 대기열 시간'과 같은 이름을 지정하고 범위를 '조회'로 설정한 후 형식 지정 유형을 '시간' (초)으로 설정합니다.

2. 초 단위로 변환하려면 hitFilter 옵션을 사용하여 qt 매개변수의 값을 가져와 1,000으로 나눕니다. 그런 다음 이 값을 새로 만든 측정항목의 색인이 포함된 매개변수로 설정합니다. 첫 번째 맞춤 측정항목인 경우 매개변수 이름은 'cm1'입니다.

   import * as googleAnalytics from 'workbox-google-analytics';
   
   googleAnalytics.initialize({
     hitFilter: (params) => {
       const queueTimeInSeconds = Math.round(params.get('qt') / 1000);
       params.set('cm1', queueTimeInSeconds);
     },
   });
   

Workbox Google 애널리틱스 테스트

Workbox Google 애널리틱스는 백그라운드 동기화를 사용하여 이벤트를 재생하므로 테스트하기가 직관적이지 않을 수 있습니다. 자세한 내용은 작업 상자 백그라운드 동기화 테스트를 참고하세요.

workbox-google-analytics.initialize(
  options?: GoogleAnalyticsInitializeOptions,
)