ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

GoogleアナリティクスのイベントトラッキングはonclickよりonMouseDownとonTouchStartで計測

      2017/05/15

 - Googleアナリティクス, javascript

Googleアナリティクスのイベントトラッキングのコードはonclickで設置するよりonmousedown、ontouchstartで計測する方が取得数がより正確になります。

以前のアナリティクスのABテストの記事でonclickでイベントトラッキングしましたが、実際のPV数よりイベントのカウント数が少なくなっていました。なぜなのか調べてみましたら次のような記事がありました。
GoogleAnalytics イベントトラッキング: onClick vs onMouseDown
(ありがとうございます)

このコード、実はやや問題があって、リンク先のPDFの読み込みが速いと、ビーコンをGoogleに送る前にリンク先のPDFが開いてしまい、ビーコンを送信していた元のページがunloadされ、結果としてイベント/PVがカウントされないことがあります。

この記事に書かれている内容は、onclickイベントは「マウスのボタンを押して離した後に発生するイベント」になるため、Googleにビーコンを送る前にユーザーがボタンをクリックしてページ遷移してしまうとカウントされない場合がある、という事のようです。

スマホでも正確にカウントできない

またスマホではブラウザによってonclickイベントが正しくカウントできないものもあるようなので、スマホ版の場合にもonclickをカウントできない環境向けに対応が必要です。

イベントトラッキングする場合はonclickよりonMouseDown

ということで、正確に計測できていないイベントがあるといことです。それを取得する方法も記載されていました。
onClickイベントのほかにもイベント処理をするイベント属性(イベントハンドラ)はいくつかあります。なかでも「onMouseDown」を使うと良いようです。
onMouseDownは、「マウスのボタンが押された瞬間に発生するイベント」になるようで、onClickよりもイベントが発生するタイミングは早いです。その結果ボタンクリックでのカウントをより正確にカウントすることができるようです。

onClickからonMouseDownに変更したコード

実際にonMouseDownに変更したGoogleアナリティクスのイベントトラッキングコードの書き方は次のようになります。

<a class="btn01" href="URL" onmousedown="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', 値);">申し込みボタン</a>

onclickの部分をonmousedownに変更するのみです。

スマホ版の場合はさらにontouchstart

また、onmousedownではマウスのボタンが押された瞬間となるため、スマートフォンではonMouseDownではなく、タッチに対するイベントハンドラを使う必要があります。その場合onTouchStartを使います。onTouchStartは画面タップした瞬間にイベント発生します。

特にスマホの場合にonclickイベントを指定していると数ミリ秒遅延するようなのでカウントに差異がでやすいようです。

onClickからonTouchStartに変更したコード

<a class="btn01" href="URL" ontouchstart="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', 値);">申し込みボタン</a>

このコードに変更する場合はスマホ版とPC版でソースが切り分けられた場合にのみ使用した方がいいです。PC版にontouchstartを指定してしまうと正確にカウントできない場合があります。

追記
実際に設置していくつか計測してみた結果、スマホ版のontouchstartで重複カウントされるなど、正確にカウントできない場合もありました。端末によっても挙動は違っているようです。

ほかにもいくつか調べてみましたが、イベントに関しては現時点でこれがベストというのものが今のところはなさそうです。ABテストの場合、カウント数で見るよりも指標の定義を併せて比率で見ることが必要かもしれません。

PC版ではPCのみの比率を、スマホ版ではスマホのみの比率でチェックする方がよさそうです。

イベントハンドラメモ

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

※onclickはiPhoneの場合、クリック後300ミリ秒遅れる。ダブルタップなどのイベントが発生する可能性を考慮してとのこと

タッチイベント
touchstartタッチパネルに指をタッチした時に発生
touchmoveタッチパネルに触れたまま、指を動かした時に発生
touchendタッチパネルに触れていた指を離した時に発生

※touchendはスマホでカウントされにくかったので選択しない方がいいです。

ontouchstart = onmousedown
ontouchmove = onmousemove
ontouchend ≒ onmouseup

参考にさせて頂いたページ

ありがとうございます。
意外と簡単!JavaScriptでタッチイベントを取得しよう
iOS Safariでのclickとtouchendの挙動について