はじめに
新卒3年目のフロントエンドエンジニアです。
先日、開発しているVueアプリケーションで、検証目的の新しい導線を実装する機会がありました。
実装後に検証したかったのが、
「このボタン、実際にユーザーに使われているのだろうか？」
「ユーザーはどういう経路でこの画面に来ているのだろうか？」
ということです。
アプリケーションにはすでにGoogle Analytics 4（以下GA4）が導入されていたため、イベントとして計測することにしました。
GA4ではさまざまなことが計測できるため、まず何をイベントとして計測するかを決める必要がありました。
この記事では、そのときに考えたことと、実際に計測してみて分かったことを整理します。
前提：Googleタグとイベント計測
設計の話に入る前に、Googleタグについて簡単に整理しておきます。
Googleタグ＝サイト上で動くコード
GA4について調べていると「Googleタグ」「計測タグ」といった言葉が頻繁に出てきます。
「タグ」とはWebサイト上で動作し、外部サービスへデータを送るためのコードです。
ユーザー
↓
Webサイト
↓
Googleタグ
↓
Google Analytics
Webページ上でコードが動き、その仕組みを通してデータが送られています。
gtag.jsで設置する場合は、次のようなスクリプトをサイトに読み込みます。
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
「Googleタグ」はGoogle Analytics専用ではなく、Google広告など複数のGoogleサービスへデータを送るために使えるタグです。また、タグを管理するためのシステムであるGoogleタグマネージャー（GTM）とは別物です。
Googleタグ：https://developers.google.com/tag-platform/devguides?hl=ja
イベントの送り方
GA4では、Webサイト上で起きたユーザーの操作などを「イベント」として計測します。
gtag.jsからイベントを送る場合の基本形は次のとおりです。
gtag('event', 'event_name', {
parameter_name: 'value'
})
第1引数のeventはイベントデータを送信するコマンド、第2引数はイベント名、第3引数は必要に応じて付加するパラメータです。
Vueであれば、ユーザー操作に応じて実行される処理の中から呼び出せます。
<script setup>
const handleClick = () => {
gtag('event', 'example_event', {
button_name: 'example_button'
})
// 本来のボタン処理
}
</script>
<template>
<button @click="handleClick">
ボタン
</button>
</template>
何を計測するかをどう決めたか
「取れるデータ」ではなく「知りたいこと」から
GA4を使えば、さまざまなイベントを計測できます。
ただ、「計測できるから、とりあえず取る」 では、データは増えても何の判断に使うのか分からなくなります。「せっかくだからいろいろ取ってみたい」と思いましたが、知りたいことから逆算をしました。
知りたいこと
↓
観測したいユーザー行動
↓
送るイベント
「どんなデータが取れるだろう？」から始めるのではなく、「ユーザーについて何を知りたいのか？」 から逆算する。
今回は下記の問いを立てました。
問い：このページにはどのような経路で辿り着いているか
対象のページへ複数の入口からアクセスできる状態になっていたことから生まれた問いです。
同じページに辿り着くとしても、どの入口から来たかによって、ユーザーがそのとき考えていることは違うはずです。何かを探して能動的に来たのか、別の作業の流れでたまたま通りかかったのかでは、そのページに期待していることが変わります。
知りたいこと
「ユーザーはどの経路でこのページに来ている？」
↓
観測したいユーザー行動
「各導線のリンク／ボタンがクリックされた」
↓
送るイベント
「導線ごとに区別できる形でイベントを送信する」
2つの流入経路（ボタン）があったため、
それぞれにイベントを仕込み、クリックされる回数を計測しました。
導線1のボタンから流入している人が多いだろうと想定していました。
// 導線1のボタン
gtag('event', 'click_entry_a')
// 導線2のボタン
gtag('event', 'click_entry_b')
計測して分かったこと
想定通りだった
結果は、想定していた通り、導線1が実際に多かったというものでした。
「想定通り」と聞くと、計測した意味がなかったように思えるかもしれませんが、数字で裏付けされたこと自体が収穫でした。
「ユーザーはこの経路で来ている」＝「ユーザーはこういう文脈でこのページに辿り着いている」 と確信できたからです。
多かった経路は、前画面での体験を受けて、目的を持って遷移してくるものでした。
つまり、ユーザーはなんとなく回遊してこのページに来ているのではなく、前の画面で何かを認識し、明確な目的を持って遷移してきているということになります。
この結果をもとに、「では、その目的で辿り着いた先の画面はどういう体験であるべきか」という議論ができました。
GA4だけでは「なぜ」は分からない
一方で、ほとんど押されていないボタンもありました。
計測によって「何回押されたか」という事実は分かりましたが、GAはなぜそうなったのかまでは教えてくれません。
押されていない理由には下記のようなことが考えられます。
- 「自分には不要」と判断した
- ボタンに気づかなかった
- 何が起こるボタンなのか分からず、押しづらかった
「なぜ」を探るには、ヒートマップやユーザーインタビューなど、別の方法と組み合わせる必要があります。
計測は答えを出してくれる場合もありますが、新しい問いを生む場合もある、ということも学びました。
まとめ
初めてGA4のイベント計測を実装してみて、下記のことを実感しました。
「取れるデータ」ではなく「知りたいこと」から逆算する
計測できることは無数にあるからこそ、先に問いを持つことが重要
想定通りか否かに関わらず、計測結果に価値がある
想定通りなら、それを前提として次の議論に進めるし、想定と違えば、「なぜ？」という新しい問いが手に入る
「実装 → 計測 → 分析 → 仮説 → 改善」のサイクルを回す手段のひとつとして、これからも活用していきたいと思います！