Googleアナリティクスで一括イベントトラッキングする便利な実装

2017年3月6日

特定の要素ID群のエレメントに対して一括でクリックなどのイベントトラッキングを設定する便利な実装。

Googleアナリティクスのイベントの要素にはカテゴリ、アクション、ラベル(オプション)、値(オプション)があるが、

  • それらを指定するための文字列をアンダースコア区切りの「アクション_ラベル」という形式でHTMLのエレメントIDにしておいて、
  • 配列であらかじめ指定しておいたエレメントIDにのみ
  • ただし配列で指定しておくのは、そのページに含まれないIDであってもよい

一括でイベントトラッキング設定する。

たとえば要素IDが「inquiry_1」の場合、アクション=’inquiry’、ラベル=1として計測される。

コード

いずれのコードもGoogleアナリティクスのトラッキングタグとの前後関係は問わない(どこに設置してもいい)。

IE9以降のみ対応でいいなら

なお上記の実装では、画面切り替えによりイベントがカウントされない問題が一部発生する。

http://analytics-mynotebook.blogspot.jp/2014/05/blog-post_18.html

これを回避する場合、el.addEventListener('click', function(){...}, false);の部分について、以下のように変更する。
ただしこの場合IDを指定するエレメントはa要素でなければならない

同一ウィンドウでリンクを開く場合

別ウィンドウで開く場合、

IE8以前対応の場合

イベントハンドリングの実装の仕方がブラウザによって異なるので、それらに対応する。

同一ウィンドウでリンクを開く場合

別ウィンドウで開く場合、ale()の部分を

とする。

Googleアナリティクス関連Tips

イベント計測

ページビュー計測

eコマース計測