釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

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


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

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

計測するには以下の手順が必要です。

それではいきましょう。







1.GoogleTagManagerの設定

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

1.変数の設定

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

変数の種類 データレイヤーの変数
データレイヤーの変数名 a2hs_add
※自由に設定してOKです。
データレイヤーのバージョン バージョン2※

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

2.トリガーの設定

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

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

トリガーの種類 カスタムイベント
イベント名 a2hs
※自由に設定してOKです。
トリガーの発生場所 一部のカスタムイベント
※Eventがa2hsに等しい

3.タグの設定

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

タグタイプ Google アナリティクス – ユニバーサル アナリティクス
トラッキングタイプ イベント
イベントトラッキングパラメータ カテゴリ:a2hs(GA上で表示されてわかりやすいように設定してもらえればOKです。)
※その他は必要に応じて設定いただければOkですが「ラベル」と「値」には上で設定した変数を入れておくのがよいでしょう。
詳細設定(カスタムディメンション) インデックスはGAの空いているインデックス値を設定してください。ディメンションの値には上記で設定した変数名を設定します。
詳細設定(カスタム指標) インデックスはGAの空いているインデックス値を設定してください。指標の値には「1」を設定します。

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

2.GoogleAnalyticsの設定

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

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

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

名前 a2hs_add
範囲 ヒット

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

カスタム指標

カスタム指標の設定は不要です。
2018年8月現在、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で勉強してみたい人向け

  2. 実例でわかるJavaScript講座

  3. 講義を受けてみたい方

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

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

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