【Google アナリティクス】イベントトラッキングを使って計測してみよう

ユーザが特定の行動を行った時、カウントして計測を行えるイベントトラッキング。
販売動向の分析、資料のダウンロード数やお問い合わせ数の計測など、様々な場面で役立つ機能です。

今回はこのイベントトラッキングについて学んでみようと思います。

イベントトラッキングとは？

イベントトラッキングとは、Google アナリティクスを設置したサイト上にて、ユーザのアクションを計測することができる機能です。
また、イベントトラッキングは通常のGoogle アナリティクスだけでは叶わない様々な計測が可能です。

たとえば…

同一ページ内のどこを多く押されたか計測したいとき

同じページ内にたくさんの要素（リンク先）があるけど、どこを一番押されるのか知りたい！そんな場合もイベントトラッキングを使えば簡単に計測できます。

「上部と下部のボタンではどちらが多くクリックされるか」「画像とボタンのどちらを多くクリックされるか」「どちらのアンカーリンクが効果あるか」などの分析にも役立ちます。

外部サイトへの遷移も計測できる

Google アナリティクスの計測範囲は、GAタグを設置している同一ドメイン内が基本ですが、イベントトラッキングは外部のサイトへの遷移数も計測できます。

サブドメインや別のドメインで運営しているサイトへの送客数を集計したいという場合、最も簡単に計測できる方法です。

計測できる内容をまとめると…

この他にも計測できる内容はたくさんありますので簡単にまとめました。
基本的には「クリック数の集計」が得意分野ですが、JavaScriptと併用しユーザのスクロール距離を計測する…なんてことも可能です。

応用すれば実に様々な計測が行えそうです…！
では最初にイベントトラッキングの使い方についてご説明します。

イベントトラッキングの使い方

イベントトラッキングはクリック数をカウントするだけならばとてもカンタン！
計測したいURLに「イベントトラッキングコード」を挿入するだけです。

ユーザーがイベントトラッキングコードのついたURLを踏む（ボタンや画像などを押す）と…
このようにGoogle アナリティクスでクリックされた回数を確認できます。

イベントトラッキングコードについて

まずは、イベントトラッキングコードとはどのようなものか見てみましょう。
こちらはGoogleの公式サイトで紹介しているひな形です。

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);
※ユニバーサルアナリティクスのものです

このタグで設定できる項目を表にまとめました。

項目	内容	必須	例
eventCategory	計測したい対象物	必須	valentineやsummersaleなど
eventAction	計測したいユーザの操作	必須	clickやplayなど
eventLabel	対象物の固有名詞など	任意
eventValue	商品の価格などの数値	任意

sendやeventは必須の要素です。内容は変更せずそのまま使用します。

その他のeventCategory、eventAction、eventLabel、eventValueは任意で入力する項目です。計測内容に合わせて設定しましょう。

実際にトラッキングコードを考えてみる

ではこれを元に実際に使用するトラッキングコードを考えてみましょう。
例えば、こんな内容を計測したいとします。

この情報を元にして作成すると、このような形になりました。

ga('send', 'event', 'valentine2018', 'click', 'chocolateassort_btn', 3240);

次は上記を使用して実際に計測が行えるようにイベントハンドラを設定します。

設定するためのイベントハンドラ

イベントハンドラ(event handler)とは特定の行動をきっかけに実行する処理のことを指します。 イベントトラッキングではJavaScriptのイベントハンドラを使用できます。

参考：JavaScriptのイベントハンドラ一覧

でも、イベントトラッキングで使用するものは「ボタンをクリックされた回数」「資料がダウンロードされた回数」などクリックなどに関するイベントが多いため、そのあたりのイベントハンドラを覚えておけばOKです。

マウスイベント

PCでの閲覧の場合は「マウス」の操作に関するイベントを多く使用します。
代表的なマウスイベントはこちらです。

項目	内容
onclick	クリックされたらイベント発生
onmousedown	マウスボタンが押されたときにイベント発生
onmouseout	要素からマウスが離れたらイベント発生
onmouseover	要素にマウスが触れたらイベント発生
onmouseup	マウスボタンを押し、ボタンが戻る時にイベント発生
onmousemove	マウスが移動したらイベント発生

タッチイベント

スマートフォンサイトの場合は「タッチ（タップ）」などの操作が中心です。
代表的なタッチイベントはこちらです。

項目	内容
ontouchstart	画面をタッチされたらイベント発生
ontouchmove	画面をタッチ後、指を動かす度にイベント発生
ontouchend	タッチ後、画面から指が離れたらイベント発生

なぜ…うまく取得できない…

クリック回数をカウントする場合onclickを使用するのが一般的ですが、いざ設定すると想定よりカウント数が少なく「もしかして正しく取得できていない？」と感じる出来事がありました。

//onclickを使用したイベントトラッキングの例
<a href="#" onclick="ga('send', 'event', 'valentine2018', 'click', 'chocolateassort_btn', 3240);">要素</a>

このonclickはイベントを発生させるタイミング上、Google アナリティクスでは正しく計測できない可能性が高いそうです。

onclickが適切ではない理由

onclickはクリックが終わった瞬間に発生するイベントです。

クリック終了後にイベントが発生し、Googleにビーコンを送信しますが、ビーコンが送られる前に次のページに遷移してしまうとカウントされない場合があるそうです。

そこで、より正確に計測を行う為イベントハンドラの見直しを行いました。

クリックをカウントする場合は

PCサイトではonmousedown

クリック数の計測は、マウスボタンを押した瞬間にイベントが発生するonmousedownが適切です。

ボタンを押した瞬間と押し終わった後では、前者の方が若干早くビーコンを送信でき、より正確に計測を行うことができるようです。

//PCサイトでクリック数計測
<a href="#" onmousedown="ga('send', 'event', 'valentine2018', 'click', 'chocolateassort_btn', 3240);">要素</a>

でもonmousedownはマウスイベントの為PCサイトでしか使用できません。
スマートフォンサイトの場合は別のイベントハンドラを設定します。

スマートフォンサイトではontouchstart

スマホサイトで要素をタッチした回数を計測する場合はタッチイベントのontouchstartを使用します。

//スマートフォンサイトでクリック数計測
<a href="#" ontouchstart="ga('send', 'event', 'valentine2018', 'click', 'chocolateassort_btn', 3240);">要素</a>

レスポンシブサイトの場合はonclickで

onmousedownはマウスイベント、ontouchstartはタッチイベントのため、PCサイトとスマートフォンサイトが切り分けてある場合のみ使用することが推奨されます。

トラッキングコードを使用してレスポンシブサイトを計測する場合は一般的であるonclickを使用して計測を行う形になります。

---

最後に

今回はイベントトラッキングの基本についてお伝えしました。

この記事を作成中、突然襲われた疑問を解決したく運営堂の森野さんに質問してしまったりして…いつもながらお世話になりました。（森野さんいつもありがとうございます！）

こうしてまとめたことで、改めてイベントトラッキングと仲良くなれたと思います。

次回は早速このイベントトラッキングを使って計測する方法を学んでみましょう！
今週は以上です。チカッパでした！