PWA アプリのホーム画面への追加 の OK Cancel 結果を Google Analytics に送信する

ウェブアプリのインストール バナー  |  Web  |  Google Developers を読んでいて、PWA の インストールバナーの OK Cancel を拾えることを知りました。

この OK 、 Cancel の結果 を 収集して Google Analytics に event として送信するようにしたので、実施したことを記載します。

参考

• ウェブアプリのインストール バナー  |  Web  |  Google Developers

• Tracking PWA events with Google Analytics – Dev Channel – Medium
  PWAの offline 時の event を収集する実装方法について記載されています。

• イベント トラッキング  |  ウェブ向けアナリティクス（analytics.js）  |  Google Developers

実装

送信する値

event 送付時は、カテゴリやラベル等、複数の値を送付できるので、以下の値を送付します。

• eventCategory
  A2H (Add to homescreen の略)

• eventAction
  OK or Cancel が判断できる値

• eventLabel
  ページタイトル

• nonInteraction
  非インタラクションイベントとして送信します。

実装内容

eventListner として、beforeinstallprompt を追加し、ユーザの選択した結果を、ga に送信します。

// Setup a listener to track Add to Homescreen events.
window.addEventListener('beforeinstallprompt', e => {
  e.userChoice.then(choiceResult => {
    if (typeof ga !== "undefined") {
          ga('send', {
            hitType: 'event',
            eventCategory: 'A2H',
            eventAction: choiceResult.outcome,
            eventLabel: document.title,
            nonInteraction: true
            });
    }
  });
});

export default function configure() {
    if ("serviceWorker" in navigator) {
        // Setup a listener to track Add to Homescreen events.
        window.addEventListener('beforeinstallprompt', e => {
          e.userChoice.then(choiceResult => {
            if (typeof ga !== "undefined") {
              ga('send', {
                hitType: 'event',
                eventCategory: 'A2H',
                eventAction: choiceResult.outcome,
                eventLabel: document.title,
                nonInteraction: true
                });
            }
          });
        });
    }        
}

補足. PWA の offline 時の event 送付について

参考にした記事に、PWA の offline 時の event を収集しておいて送付するライブラリの記載がありました。
面白そうなので、そのうち組み込みをしてみようかと思います。

• Integrating Analytics  |  Web  |  Google Developers

• PWAによるオフライン時のPVカウント実装 sw-offline-google-analytics

補足. GTMを使用して、event を送付する場合

GTM を使って、event を送付する場合、タグの設定を変更しないと、ga 関数で、event の送付ができません。
Google Tag Manger から Google Analytics にカスタムイベントを送る方法 - Qiita が参考になりました。
私は、少し冗長ですが、GTM のカスタムイベントを送付し、そのカスタムイベントをトリガーに、GTM から Google Analytics の event タグを配信するようにしました。

• beforeinstallprompt で、 GTM のカスタムイベントを送付する。
  

       // Setup a listener to track Add to Homescreen events.
       window.addEventListener('beforeinstallprompt', (e) => {
        e.userChoice.then((choiceResult) => {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
              event: "sendEvent",
              eventName: "A2H",
              eventData:{ category : "A2H", 
                  action : choiceResult.outcome,
                  label : document.title,
                  value : "",
                  nonInteraction : true
              }
          });
        });
      });
  

上記、カスタムイベントをトリガーに、データレイヤーの変数で、各項目を 連携して、Google Analytics の Event として送付します。
以上です。