aタグのクリックイベントをGoogleアナリティクスで正しく計測できない
めちゃくちゃ久しぶりに更新します。
さてさて、今回はGoogleアナリティクスについて。
弊社のサマーインターンシップ用ランディングページを作ることになって。
いままでのLPはPV数だけ取得するためにGoogleアナリティクス入れてたんですが、今回はクリックイベントだけでもしっかり目に計測しようと思い、前々から気になっていた表題の件について調べましたのでメモ。
イベント計測について
現状、Googleアナリティクスでは、2通りの書き方があるらしく、
- クラシックアナリティクス
こちらが昔からある記法。ただ、どんどん下記のものに移行していくらしい。
※参考 http://analytics-ja.blogspot.jp/2013/10/blog-post.html
- ユニバーサルアナリティクス
こちらが、去年の夏頃から使われている記法。上述したものよりもシンプルに書ける上に、APIと併用することでかなりカスタマイズして利用できるそう。
詳しくは以下記事に書いてあるので参考に。
公式レファレンス https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja
って、ことで
なんか良さそうなのでユニバーサルアナリティクスを使ってます。
aタグのクリックイベント計測漏れについて
このへんの記事をみると、どうやらアナリティクスのjavascriptの処理を待つ前にリンクしてしまうことが原因で起こるらしい。。
で、解決法。
いろいろ調べた結果、2つの方法があるとのこと。
hitCallback関数を利用する
こちらを使うとアナリティクスの計測後にイベント発生をさせることができるとのこと。
<a onclick="ga('send', 'event', 'カテゴリ名', 'アクション名', { hitCallback: function () { document.location.href = 'http://example.com/'; }}); return false;">サイトへのリンク</a>実際にやってみましたが、
・なぜか、href属性をつけてると先にリンクに飛んでしまうようで、、、ｗ外すとすんなりいきました。
・ただhref属性を外すとhoverしたときのポインターが効かなくなるようで、、ｗなのでcss側で改めて設定しました。
・hitCallback関数内のリンク先は相対パスでもOKです。
って感じで攻略できました。
ただ、ユーザーが「別タブで開く」の動作ができなくなるので、場合によってはまずいですね。
onClickでなくonMouseDownを利用する
こちらを使うと、リンクより前にアナリティクスの計測を実行してくれるそう。
<a href="http://example.com/" onMouseDown="ga('send', 'event', 'カテゴリ名', 'アクション名', true);">サイトへのリンク</a>これはすんなりいきました。
ただ、mouse downなので右クリックでも計測されてしまうという欠点あり。
これもこれでちょっと悩ましいですね。。
