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

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

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

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

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

たとえば…

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

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

どちらがよく押される?

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

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

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

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

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

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

  • 商品サムネイルとボタン、どちらがよく押されたか知りたい
  • お問い合わせのボタンがどれくらい押されたか知りたい
  • どの商品が多くクリックされたか知りたい
  • ページの上部と下部、どちらのリンクが押されたか知りたい
  • ページ内リンクの遷移を計測したい
  • 外部サイトへのリンクのクリック率を計測したい
  • ユーザがページのどのあたりまで閲覧してくれたか読了率を知りたい
  • モーダルウィンドウが表示された回数を知りたい

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

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

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

イベントトラッキングコードがURLに挿入されてるよの図

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

GAを見ればその回数がわかるよの図

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

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

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

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

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

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

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

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

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

バレンタインの特集ページ計測/2018年のバレンタイン特集ページ/対象商品はチョコレートアソート/金額は3,240円/「カートに入れる」のボタンを押されたらカウント

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

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を使用して計測を行う形になります。

この場合は、前述のようにイベントハンドラやGoogleのデータ取得のタイミングによって完璧な計測を行えないケースもあることを理解しておきましょう。


最後に

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

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

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

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