PWAでホームアイコンが追加されたかをGA/GTMで計測する！

Tweet

以前の投稿(WordPressでホームアイコンの追加（PWA）機能を実装してみた！)で、
WordPressのサイトにPWAの実装を施してホームアイコンを追加してもらえるようにする方法を紹介しました。
→【後日追記】プラグインを使ってPWAを実装する方法はこちら

しかし、せっかくPWAを実装しても、そのままだとホームアイコンを追加してもらえているのかがわかりません。
ここでは、GoogleTagManagerを使ってGoogleAnalyticsでホームアイコンが追加されたか否かを計測する方法をご紹介します。
どのように計測するかというと、GTMのカスタムイベントを使ってタグを発火し、GAでイベント発生する数をカウントします。
「ホームアイコンが追加された」というイベントが発生したときに、datalayer変数を使ってGoogleTagManagerにイベントを通知するだけでなので、結構簡単にできちゃいます。
あとは、GoogleTagMangerからGoogleAnalyticsにカスタムディメンションをセットすれば、
GoogleAnalyticsで計測できるようになります。

あと、ココナラでGA/GTM設定のお手伝いはじめました。
見積依頼をしていただければ内容カスタマイズしますのでよろしければどうぞ。
お困りですか？ GA/GTMの設定、承ります

１．GoogleTagManagerの設定

すみません。変数の設定がなくても計測できました。

1.変数の設定

ホームに追加されたことをdatalayer変数で受け取るための変数設定をします。

※デフォルト値は好みに合わせて設定してください。
※バージョンの意味の違いについては、タグマネージャのヘルプには下記のように記載されていましたので引用しておきます。

2.トリガーの設定

ホームに追加されたことをカスタムイベントとして設定します。

後でdatalalyerにEventに設定します.

3.タグの設定

上記で設定したカスタムイベント（トリガー）を今回設定するタグのトリガーとして設定し、ホームに追加されたことをGoogleAnaliticsにイベントとして計測するタグを設定します。

※カスタムディメンションや、カスタム指標を設定しても構わないですが、単純に計測するだけであれば必要ないので、削除しています。

2.GoogleAnalyticsの設定

GoogleTagManagerでGoogleAnalyticsにホームアイコンが追加されたことを通知するイベントを設定しました。
Ss>次はGoogleAnalyticsでGoogleTagManagerからの通知を受け取るためのカスタムディメンション、カスタム指標を設定します。

カスタムディメンションの設定

カスタムディメンションの設定は不要です。

アクティブのチェックボックスのチェックは入れたままにしておきます。

カスタム指標

カスタム指標の設定は不要です。
2018年８月現在、GAのカスタム指標は20個までしか設定できず、設定すると削除ができないので慎重に設定しましょう。

以上でGAの設定は終了です。
あとはサイト側のjsが終了するとGoogleAnalyticsの「イベント」」ビューで確認できるようになります。

3.サイトにjsを追加する（datalayer変数にプッシュする）

headタグ内に以下を記述します。
「ホームに追加しますか」のポップアップが出た後、ユーザーが「ホームに追加」または「キャンセル」のアクションすると「beforeinstallprompt」イベントが発生します。
これをイベントリスナーでキャッチし、datalayer変数に値をセットすることでGoogleAnalyticsでユーザーのアクションが確認できるようになります。

/*ユーザーアクション(beforeinstallprompt)をイベントリスナーでキャッチ*/
self.addEventListener('beforeinstallprompt',function(e) {
  // beforeinstallprompt Event fired
  // e.userChoice will return a Promise. 
  e.userChoice.then(function(choiceResult) {
    console.log(choiceResult.outcome);

    if(choiceResult.outcome == 'dismissed') {/*ユーザーがホームに追加しなかった場合*/
      console.log('User cancelled home screen install');
      dataLayer.push({ 
        'event' : 'a2hs_cancell'
      });
    }
    else {/*ユーザーがホームに追加した場合*/
      console.log('User added to home screen');
      dataLayer.push({ 
        'event' : 'a2hs',/*Eventにa2hsが送られることでGTMタグが発火*/
      });
    }
  });
});

追加しなかった場合のイベントも取得できるように書いてますが、GTM等の設定方法は同じですので参考までに。

さいごに

上記でホームスクリーンの追加をユーザーが行ったのか拒否したのかをGAでカウントすることができます。
イベントビューで見ることもできますが、カスタムレポートを作成しておいた方が状況を把握しやすくてよいと思います。

GoogleからAMP、PWA対応を推奨するアナウンスが強まったますね。
Webに断片的な情報は乗っていますが、体系的に学習しようとするとちょっとハードルがあると思います。
英語ですが、たまたまちゃんと学習できるコンテンツがあったのでメモしておきます。
プログレッシブWebアプリ（PWA） – 完全ガイド

また、PWAの実装をしていく上ではjavascriptの知識が必須になってきます。
javascriptの基本から応用までいくつか利用している勉強法があるのでご紹介です。
場所と時間に縛られないUdemyは特におすすめです。初心者向けの講座をリンクしておきましたが、玄人向けの講座もあるので一度見てみてください。
いきなりスクールに通うのは勇気がいりますよね。
人に直接教えてもらうなら、ストアカで一度トライしてみるのもありです。
ちょっと知りたいことがあるだけ、とかならストアカの方が都合がよいです。
ご都合に合わせてぜひ★

1. Webで勉強してみたい人向け

実例でわかるJavaScript講座

• 講義を受けてみたい方

日本最大級のまなびのマーケット「ストアカ」

• スクールでしっかり勉強したい人向け

キャリアチェンジを支援する・社会人のためのWebクリエイタースクール【デジタルハリウッド STUDIO by LIG】

Tweet