Workbox-google-analytics

오프라인에서 작동하는 애플리케이션을 빌드하는 경우 인터넷에 연결되어 있지 않을 때 사용자가 앱과 상호작용하는 방식 이 경험을 최적화하는 데 매우 중요합니다.

분석 제공업체: Google 애널리틱스를 사용하려면 네트워크가 필요합니다. 연결을 통해 데이터를 서버에 전송할 수 있습니다. 즉, 연결이 해당 요청이 실패하고 해당 상호작용은 데이터가 없습니다. 그런 일은 없었던 것 같아.

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

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

Workbox Google 애널리틱스가 바로 이 작업을 수행합니다. 또한 kubectl get 및 이를 캐시하는 핸들러가 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 애널리틱스에 ga('set', 'dimension1', 'online')행을 추가할 수 있습니다. '네트워크 상태'에 기본값 '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. 새 맞춤 측정항목 만들기 확인할 수 있습니다 '오프라인 대기열 시간'과 같은 이름을 지정하고 범위를 '조회수'로 설정하고 형식 지정 유형을 '시간'(단위: 초)으로 설정합니다.

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 백그라운드 동기화 테스트.

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