2012年8月15日水曜日

GoogleAnalytics イベントトラッキング: onClick vs onMouseDown

GAカスタマイズでよく使われるonClick

Google Analytics でページ内のPDFファイルへのリンクやボタンのクリックなど、標準のトラッキングコードでは収集されないデータを収集するためには、イベントトラッキングかバーチャルページビューを使います。

普通よくやるのは、対象のエレメントのclickイベントハンドラからtrackEvent/trackPageviewメソッドを呼ぶ手法で、実際に下記のようなコードがあちこちで使われています。
<a href="/path/to/pdf.pdf" onclick="_gaq.push(['_trackEvent', 'PDFLink', 'Click', this.href]);">PDFへのリンク</a>
このコード、実はやや問題があって、リンク先のPDFの読み込みが速いと、ビーコンをGoogleに送る前にリンク先のPDFが開いてしまい、ビーコンを送信していた元のページがunloadされ、結果としてイベント/PVがカウントされないことがあります。
よくわからない図を描いてしまったので貼っておきますね。


この問題を避けるために、trackEvent/trackPageviewメソッドを_gaq(非同期実行キュー)に入れずに、_gat(トラッカーオブジェクト)を直接呼び出したり、trackEvent/trackPageviewメソッド呼び出し後に数十ミリ秒ウェイトさせたりと、ちょっと不細工な工夫をすることもよくあります。普通のリンクじゃなくて、別のウィンドウで開くなら(target="_blank"が付いていれば)こんな問題は起きないのですが…。

本当にonClickでいいのか?

ところで、「リンクがクリックされた」ことを検知するのはonClickでほんとにいいんだっけ?という議論が本題です。onClickの他にも、よくよく考えるとonMouseDownというイベントがあります。
onClick
マウスのボタンを押して離した後に発生するイベント
onMouseDown
マウスのボタンが押された瞬間に発生するイベント

ほとんど変わりないのですが、onMouseDownのほうが先に発生するので、上記のような「どこかへのリンクのクリックをイベントとして記録する」ような使い方ならどう考えてもこちらが有利な気がしますね。

  • onMouseDownで計測したイベント数: 205
  • Onclickで計測したイベント数: 122
実際のページビューと比較しても、onMouseDownのほうが正確だと言えるようです。いままでonClickで実装したあのサイトやあのサイトは大丈夫だろうか…と心配になってしまう結果ですね。

実際に同様のコードでビーコンの飛ぶタイミングを見てみました。

トラックパッドのタップでクリックしたので、mousedown -> mouseupまでの間隔はかなり短いですが(11msec)、たしかにビーコンのリクエストが発生したタイミングが12msecほど違います。

ただし、Cardinal Pathの筆者も計測方法に正しいとか間違ってるっていうのはないと記載しています。確かに、その指標がどうやって計測されているか理解していれば、正しく解釈できますからね。

また、実験で使用したコードを見たところ、onMouseDownとonClickを両方設定しているので、この実験のonClickの数値は若干少なめに出るような気がします。
(1つイベント処理してビーコン送るより2つ送るほうが時間かかってonClickのビーコンが飛ぶ前にunloadされるんじゃないかと; ビーコンは非同期・並列でリクエストされるから関係ないかも)

あと、めったに無いですが、リンクをドラッグしたとき(リンクをメールに貼り付けるときや、クリックしようとしてやめたとき)もonMouseDownイベントは発生するような気がしますね…

結論

いずれにせよ、この実験から分かるのは、
  • Google Analyticsでクリックイベントを取るなら、onMouseDownのほうが確からしい数値が取れる
  • どんな方法で計測・分析するにしても、指標の正確な定義は忘れないこと
という2点でした。
さて、いままでにやった実装を見なおさないと…

1 件のコメント:

  1. Thanks for sharing such a great information with us.Keep on updating us with these types of blogs.
    professional web design company in chennai

    返信削除