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

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

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

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

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

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

コード

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

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

// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){

  // これらの要素IDに対してのみイベントトラッキングを設定する
  // ページ内に含まれないIDを含めてもいい
  var ids = [
    'inquiry_1', 'inquiry_2', 'inquiry_3', 
    'reqBrochure_1', 'reqBrochure_2', 
    'call_1', 'call_2', 'call_3', 
  ];

  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  window.addEventListener('load', function(){
    for (var id in ids){
      var el = document.getElementById(ids[id]);
      // ページ内に含まれるIDのみを対象に（エラー回避）
      if (el !== null){
        // この瞬間のelオブジェクトを呼び出して実行
        // （この即時実行関数がないと、上の処理が必要なelオブジェクトをクリック時に評価するためエラー）
        (function(el){
          el.addEventListener('click', function(){
            var strElId = el.id.split('_');
            ga('send', 'event', 'click', strElId[0], strElId[1]);
          }, false);
        }(el));
      }
    }
  }, false);

})();

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

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

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

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

// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){

  // これらの要素IDに対してのみイベントトラッキングを設定する
  // ページ内に含まれないIDを含めてもいい
  var ids = [
    'inquiry_1', 'inquiry_2', 'inquiry_3', 
    'reqBrochure_1', 'reqBrochure_2', 
    'call_1', 'call_2', 'call_3', 
  ];

  window.addEventListener('load', function(){
    for (var id in ids){
      var el = document.getElementById(ids[id]);
      // ページ内に含まれるIDのみを対象に（エラー回避）
      if (el !== null){
        // この瞬間のelオブジェクトを呼び出して実行
        // （この即時実行関数がないと、上の処理が必要なelオブジェクトをクリック時に評価するためエラー）
        (function(el){
          el.addEventListener('click', function(){
            var strElId = el.id.split('_');
            ga('send', 'event', 'click', strElId[0], strElId[1], {'hitCallback': function(){
              document.location = el.href;
            }});
          }, false);
        }(el));
      }
    }
  }, false);

})();

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

// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){

  // これらの要素IDに対してのみイベントトラッキングを設定する
  // ページ内に含まれないIDを含めてもいい
  var ids = [
    'inquiry_1', 'inquiry_2', 'inquiry_3', 
    'reqBrochure_1', 'reqBrochure_2', 
    'call_1', 'call_2', 'call_3', 
  ];

  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  window.addEventListener('load', function(){
    for (var id in ids){
      var el = document.getElementById(ids[id]);
      // ページ内に含まれるIDのみを対象に（エラー回避）
      if (el !== null){
        // この瞬間のelオブジェクトを呼び出して実行
        // （この即時実行関数がないと、上の処理が必要なelオブジェクトをクリック時に評価するためエラー）
        (function(el){
          el.addEventListener('click', function(){
              var strElId = el.id.split('_');
              ga('send', 'event', 'click', strElId[0], strElId[1]);
              window.open(el.href);
              return false;
          }, false);
        }(el));
      }
    }
  }, false);

})();

IE8以前対応の場合

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

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

// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){

  // ライブラリ
  // ページのDOMツリー構築後に実行（要するにwindow.onload）
  function ale(fn){
    if (window.addEventListener) {
      window.addEventListener('load', fn, false);
    } else if(window.attachEvent) {
      window.attachEvent('onload', fn);
    } else {
      window.onload = fn;
    }
  }

  // 要素にクリックイベントリスナーを付加
  function ace(el, fn){
    if (window.addEventListener){
      el.addEventListener('click', fn, false);
    } else if(window.attachEvent){
      el.attachEvent('onclick', fn);
    }
  }

  // ここから本実装
  // これらの要素IDに対してのみイベントトラッキングを設定する
  // ページ内に含まれないIDを含めてもいい
  var ids = [
    'inquiry_1', 'inquiry_2', 'inquiry_3', 
    'reqBrochure_1', 'reqBrochure_2', 
    'call_1', 'call_2', 'call_3', 
  ];

  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  ale(function(){
    for (var id in ids){
      var el = document.getElementById(ids[id]);
      // ページ内に含まれるIDのみを対象に（エラー回避）
      if (el !== null){
        // この瞬間のelオブジェクトを呼び出して実行
        // （この即時実行関数がないと、上の処理が必要なelオブジェクトをクリック時に評価するためエラー）
        (function(el){
          ace(el, function(){
            var strElId = el.id.split('_');
            ga('send', 'event', 'click', strElId[0], strElId[1], {'hitCallback': function(){
              document.location = el.href;
            }});
          });
        }(el));
      }
    }
  });
})();

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

  ale(function(){
    for (var id in ids){
      var el = document.getElementById(ids[id]);
      // ページ内に含まれるIDのみを対象に（エラー回避）
      if (el !== null){
        // この瞬間のelオブジェクトを呼び出して実行
        // （この即時実行関数がないと、上の処理が必要なelオブジェクトをクリック時に評価するためエラー）
        (function(el){
          ace(el, function(){
            var strElId = el.id.split('_');
            ga('send', 'event', 'click', strElId[0], strElId[1]);
            window.open(el.href);
            return false;
          });
        }(el));
      }
    }
  });

とする。