GAのイベントを利用して、Webアプリの機能の利用時間を可視化してみる
こんにちは。
岐阜でWebマーケをやっていますYoshi(@motoy0shi)です。
最近、データドリブンな(Web)マーケティングをしていく大切さを改めて感じています。データに基づかなければ、どうしても主観が入り込む余地が大きいですし、改善施策をしてみても結局よかったのか、悪かったのか分からないからです。
みなさまもご存じピーター・ドラッカーはこんなセリフを残していますよね。
you can’t manage what you can’t measure
(意訳:測定できないものはマネージメントできない)
したがってデータドリブンなマーケティングを進める上では、さまざまな状況をデータで計測する技術が重要になってきます。
ちょうど最近、お仕事でSaaS系のビジネスをご支援する機会がありました。その際に「Webアプリで、特定の機能を使った時間をGAでうまく可視化できないか?」とのオーダーがありました。
どのように実装しようか方法を検討した結果、GAとGTM(Googleタグマネージャー)を連携させ、「イベントの値」指標を使うことで実現できました。
そこでこの記事では、サンプルアプリを使いながら、アプリの特定機能の利用時間を計測・可視化する方法についてご紹介します。
本来こういったデータは、Big Queryなどにログを残した方がよさそうですが、使い慣れているGAで見れたらやはり便利です。使い道はあまり多くなさそうですが、どなたかの参考になれば幸いです。
この記事は、この記事は WEBやデータ分析に関する投稿をみんなでしてみよう アドベントカレンダー(#大好きWeb分析)への寄稿です。
実装の概要
今回サンプルとして、ストップウォッチもどきのアプリをつくりました。スタートを押してから、ストップを押すまでの時間が計測されます。計測する際には、「赤」「青」の2グループから選択ができます。
この記事では、それぞれのグループについて、計測した時間の状況をGAで計測して・可視化していきます。最終的には、こんな感じでデータポータルで表現することもできちゃいます。
それでは、実際の実装方法について見ていきましょう。
1.データ構造を定義する
最初にすることは、データ構造の定義です。ここで大事なのは、最終的にどうやってデータを表現したいかを考えること。データ構造を間違えると、レポーティングする際に思ったような表現ができないなんてことになりかねません。
今回は、最終的に上記のイメージでデータを見たいとします。すると計測実装における仕様は以下のようになります。
・「赤」「青」の色グループを分けて計測すること
・計測した秒数をGAに持たせること
なお今回は実装を簡単にするために、整数秒だけを取得し、おおまかな傾向を見ることにします。またスタートボタンをクリックした回数は、別途クリックイベントを取り、完了率などを見ることにします。
この要件を実現するために、アプリ側にコードを記載します。使うのは、GTMにデータを渡すdataLayer変数です。
念のため説明しておくと、dataLayerはGTMにデータを渡すために使うオブジェクトです。GTMはこのdataLayerに、ページビューやイベントなどの情報を保持しています。
今回は、このdataLayerに独自で作成したデータを渡します。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
"event": "timerCount", //カスタムイベント名
"timerInfo": {
”color": "red", //ラジオボタンで選択された色
"duration": 2105 //ストップウォッチで計測したミリ秒
}
});
</script>
※実際のアプリでは、color および duration が動的に設定される仕様になっています
簡単にコードについて解説します。dataLayer変数にpushしたデータは、大きく2つです。
①カスタムイベント(event)
カスタムイベントとは、任意のタイミングでタグを発火させられる方法です。dataLayerに "event": "hogehoge" の形でデータを入れると、トリガーとして使えます。今回は、「timerCount」と記載しています。
②アプリから送信したい情報(timerInfo)
timerInfoは、独自で定義した変数です。任意のキーと値のペアを入れることで、後ほどGTM側でデータをキャッチします。
JavaScriptの連想配列そのものなので、入れ子(ネスト)することも可能です。今回は、選択した色(color)とストップウォッチで計測したミリ秒(duration)をGTMに渡します。
2.GTMでdataLayerの情報をキャッチする
1.でWebアプリ側からデータを送る実装をしたので、次はGTM側でデータを受け取る実装を行います。
まずはデータを受けとる変数の作成です。変数のタブから「データレイヤーの変数」を選択します。
データレイヤーの変数名には、「timerInfo.color」と入力します。
おそらく記事を読んでいる方の中には「なぜこの名前になるのか?」と思われている方もいるかもしれません。
実は、GTMでは入れ子になっている連想配列の中にアクセスする際は、.(ドット)で繋ぎます。なおこの挙動は、すぐ下のデータレイヤーのバージョンが2になっている時のみですのでご注意ください。
バージョン 1: キー名でのドットの使用を許可します。たとえば dataLayer.push('a.b.c': 'value') の場合、キー名は「a.b.c」(つまり {'a.b.c': 'value'})と解釈されます。
バージョン 2: ドットをネストされた値として解釈します。たとえば dataLayer.push({'a.b.c': 'value'}) の場合は、3 段階にネストされた {a: {b: {c: 'value'}}} となります。
出典:Googleタグマネージャーヘルプ
同じように、durationに格納されたデータを受け取るため、同じようにデータレイヤーの変数を作成します。
3.GTMでデータを加工する
2.では、データレイヤーの変数を使って、データを受け取れました。このデータをGAのイベントに送信します。
ただその前に1つ注意があります。今回取得した利用時間(duration)はミリ秒であるため、このままでは扱いづらいです。またGAのイベントの値は、整数しか受け付けない仕様です。
そこで、GTM側でミリ秒を整数秒に変換する作業を行います。
変数タブから「カスタムJavaScript」を選択します。カスタムJavaScriptは、その名の通り、自由にJavaScriptを書いて処理させられる変数です。
処理の内容については割愛しますが、ミリ秒を整数秒に変換するため、1000で割って小数部分を切り捨てています。
【メモ】
カスタムJavaScript 内では、{{ }}で囲むと、他の変数を使えます。今回は、先ほど作成したデータレイヤーの変数を読み込んでみました。
これで下準備は完了です。
4.GAにイベントを送信する
いよいよGAにイベントを送信していきます。
まずはトリガーを作成しましょう。トリガーのタブで「カスタム イベント」を選択します。
イベント名には、1.で実装したカスタムイベント名「timerCount」を入力します。イベントはこれで作成OKです。
次にタグを作成します。(※今回はユニバーサル アナリティクスを使います)以下のようにフィールドを設定していきます。
トラッキングタイプ:タイマー
アクション:タイマー時間
ラベル:{{ timerInfo.color }} ※色グループ(赤 or 青)
値:{{ タイマー時間(秒) }} ※整数化した秒数
非インタラクションヒット:真
Google アナリティクス設定:(計測したいGAのプロパティID)
あとはトリガーに、先ほど作成したカスタム イベントを指定すれば完成です。設定内容をプレビューしてみましょう。
5.データを可視化する
実装が完了したら、GA側で見てみましょう。
イベントを見てみると、きちんとデータが取れています。標準のレポートだけでも、イベントの発生数、合計値、平均値を確認できます。
またGAでデータが取れているなら、データポータルなどでグラフ化することも容易です。
グループごとの割合を比較したり、時系列でトレンドを見たり、他のディメンション(年齢や地域など)とのクロス集計したりできるため、一度実装してしまえば指標のウォッチなどに役立ちそうですね。
おわりに
この記事では、GAとGTMを活用してアプリの利用状況を可視化する方法についてご紹介しました。
今回はユニバーサルアナリティクスで実装しましたが、今後イベントベースのGA4プロパティが普及すれば、Mixpanel等のグロースハックツールを使わなくても、ある程度はGAで計測/可視化できそうです。
どなたかのアクセス解析にお役に立てば嬉しいです。
*******
最後までお読みいただき、ありがとうございました。
記事に関するご感想やアドバイスなどがあれば、ぜひTwitter等で教えていただけますと幸いです。
またTwitterでは、Webマーケティングに関することを呟いています。よければぜひフォローしてみてください。
→https://twitter.com/motoy0shi
【補足①】
今回の実装については、アプリ側でMeasurement Protocolを使っても同様の計測が可能です。ただしアプリ開発者にGAの知識等が要求されるため、今回はGTMを使う方法を採用しました。
【編集後記】
この記事で一番大変だったのが、サンプルアプリの作成でした。最近覚えたてのVue.jsを使い、見様見真似ではありましたが、なんとか様になってよかったです…! 最近Webマーケターも、開発の知識が求められている感あります(とてもたいへん)
この記事が気に入ったらサポートをしてみませんか?