アナリティクスの【イベントトラッキング】でユーザーの行動を把握する

「PDFがどれだけダウンロードされたか？」「バナーからどれくらいの流入があったか？」「問合せボタンがどれだけクリックされたか？」といったことを知りたい。そんな時に役立つのがGoogle Analyticsの「イベントトラッキング」という機能。今回はサイト改善にも役立つイベントトラッキングの設定方法をご紹介します。

３ステップで設定完了

1. アナリティクスのバージョンを確認

どのバージョンのアナリティクスを使っているかによって、設置するトラッキングコードが異なります。まずは対象サイトにアクセスし、アナリティクスのバージョンを確認します。

↑Google Chromeでサイトを開き右クリックで「ページのソースを選択」

表示されたソース上で「command+F」を押して出てくる検索窓に「analytics」と入力すると下記３パターンのどれかが出てくるはず。すでにサポートが終了しているバージョンもありますが、現在よく見かけるのは下記3種類です。

ga.js　サポートが終了中。できれば新しいタグに変更したいタグ。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>

analytics.js　2014年にサービスが開始された１世代前のタグ。

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-x', 'auto');
ga('send', 'pageview');
</script>

gtag.js　2017年以降に発行された最新のタグ。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-1');
</script>

アナリティクスのバージョンが確認できたら、イベントトラッキングを設定していきましょう。

2. ソースにトラッキングコードを追加

ga.js、analytics.js、gtag.jsごとにソースに埋め込むトラッキングコードが異なります。下記を確認して適合するトラッキングコードをソースに追加します。

ga.js

イベントハンドラ="_gaq.push(['_trackEvent', 'カテゴリー', 'アクション', 'ラベル']);

analytics.js

イベントハンドラ="ga(‘send’, ‘event’, 'カテゴリ', 'アクション', 'ラベル', 値)"

gtag.js

 イベントハンドラ="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル','value': 値});

例えば、問合せボタンのクリック数を計測したい場合は下記を入力します。
　・【必須】イベントハンドラ：onclick
　・【必須】アクション：click
　・【必須】カテゴリ：button
　・【任意】ラベル：test
　・【任意】値：1
これらを入力してみるとこうなります。この時、値以外はテキストでの指定のため「’　‘」ありの記載にしないと動作しないので注意。値は整数での指定なので「’　‘」は不要です。

ga.js

onclick="_gaq.push(['_trackEvent', 'button', 'click', 'test']);

analytics.js

onclick="ga(‘send’, ‘event’, 'button', 'click', 'test', 1)"

gtag.js

 onclick="gtag('event', 'click', {'event_category': 'button','event_label': 'test','value': 1});

このコードをHTMLに設置したら、きちんと計測されるかテストします。テストはアナリティクスの「リアルタイム」→「インベント」を確認するだけ。

↑このページを開いた状態でイベントをクリックして、リアルタイムに反映されたらOKです。

3. アナリティクスで目標を作成

トラッキングコードで収集した結果をアナリティクスで確認するために「目標」を設定します。

↑アナリティクスの ❶ 管理 → ❷ 目標 から ❸＋新しい目標 を追加します。

まず、「目標設定」で「カスタム」を選択。「続行」をクリックして

次に目標名を入力します。内容が分かりやすければどのようなものでも大丈夫。タイプは「イベント」を選択します。

最後にソースに追加したトラッキングコードの内容を入力して完了です。ここでは少なくとも１つのイベント条件を指定すればOK。もちろん全て設定しても大丈夫ですが、もしうまく記録されない時には指定を外して検証してみることをオススメします。

以上でイベントトラッキングの設定は完了です。

デフォルトではページのアクセスやサイト内をどう移動したか？といったページ遷移が記録されるアナリティクス。ページ遷移だけでなく、ユーザーがどのように行動したかを知ることができる【イベントトラッキング】を使えば、サイト分析の幅が広がると思います。ぜひ活用してみてくださいね！