#workbox-google-analytics

オフラインで動作するアプリを構築する場合、接続していないときにユーザーがアプリをどのように操作しているかを理解することは、エクスペリエンスを最適化するために重要です。

アナリティクスプロバイダは Google アナリティクスにはネットワークが必要です。 サーバーにデータを送信します。つまり、接続が不安定な場合、 利用できない場合、そのリクエストは失敗し、 不足している場合があります削除されたコメントは、あたかも存在しなかったかのように扱われます。

Workbox Google アナリティクスは、Google アナリティクス ユーザーがこの問題を解決するために 失敗したリクエストを検出する Service Worker の機能を活用します。

Google アナリティクスは、Measurement Protocol への HTTP リクエストを介してすべてのデータを受信します。つまり、Service Worker スクリプトでは、フェッチ ハンドラを追加して、Measurement Protocol に送信された失敗したリクエストを検出できます。これらを IndexedDB でリクエストを送信し、接続が回復してから再試行します。 復元しました。

ワークボックス 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 のいずれかを指定できます。 構成オプション。

これらのオプションを使用すると、 Measurement Protocol のパラメータ 送信されるデータの数とサイズを表します。parameterOverrides オプションは、再試行するリクエストごとに特定のパラメータに同じ値を設定する場合に使用します。hitFilter オプションを使用する 特定のパラメータの値を 別のパラメータの値から派生した値を返します。

下記の例は、両方のオプションの使用方法を示しています。

例

カスタム ディメンションを使用してオンラインとオフラインの接点をトラッキングする

Google アナリティクスには、オンラインとオフラインを示すディメンションが組み込まれていない やり取りできますただし、この特定のイベント専用の独自のディメンションを作成することもできます。 使用すると、 カスタム ディメンション

カスタム マシンタイプを使用して、Service Worker によってリプレイされたリクエストを Workbox Google アナリティクスでディメンションを結合するには、以下の手順を行います。

1. Google アナリティクスで新しいカスタム ディメンションを作成します。「ネットワーク ステータス」などの名前を付けます。設定し、 「ヒット」にスコープを （あらゆるやり取りがオフラインになる可能性があるため）。

2. 新しく作成したディメンションに割り当てられたインデックスをメモし、 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' を使用するカスタム ディメンション Service Worker でリプレイされなかったすべてのリクエストに対して

   <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 アナリティクスで新しいカスタム指標を作成します。「Offline Queue Time」などの名前を付け、 「ヒット」をスコープとする 書式設定タイプを「Time」に設定する（秒単位）。

2. hitFilter オプションを使用すると、 qt それを 1,000 で割ります（秒単位に換算します）。次に、その値をパラメータとして設定し、新しく作成した指標のインデックスを指定します。これが 1 つ目のカスタム指標の場合、パラメータ名は 'cm1' のようになります。

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

Google アナリティクスのワークボックスのテスト

Workbox Google アナリティクスでは、イベントの再生にバックグラウンド同期を使用するため、 直感的でもありません。詳細: Workbox のバックグラウンド同期のテスト

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