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


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

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


参考


実装

送信する値

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
            });
    }
  });
});
上記は、serviceWorker が 登録できるブラウザのみ起動させればよいので、以下のようなメソッドを作成し、ページ表示時に呼び出すようにしました。
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 を収集しておいて送付するライブラリの記載がありました。
面白そうなので、そのうち組み込みをしてみようかと思います。


補足. 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 として送付します。
以上です。

コメント