Googleアナリティクスで特定のドメインに対するリンクのクリックをイベントとして計測

アクセス解析で特定のリンク先ドメインに対するリンクのクリック（誘導）のみコンバージョンとして計測するため、イベントとしてカウントするケースがある。

コード

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

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

以前はonclickイベントハンドラで実装していたが、イベントリスナを使ったほうが実装しやすい。
イベントハンドラと違って、もともと設定されているリンククリックアクションに対して純粋に処理を付加するだけだからである。

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

  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  window.addEventListener('load', function(){
    // すべての外部リンクを抽出
    var a = document.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
      // 特定のリンク先ドメインに対するリンクのみ絞り込む
      if(/^(www\.aaa\.com|www\.bbb\.net|www\.ccc\.jp)/.test(a[i].hostname)){
        // クロージャに入れてしまっているため`a[i].href`をクリック時に参照できない。
        // そのため`a[i]`が見えるうちに即時実行しておく
        (function(b){
          b.addEventListener('click', function(){
            ga('send', 'event', 'linkclick', 'outbound', b.href, 1);
          }, false);
        })(a[i]);
      }
    }
  }, false);

})();

ただしこの参考ページのままの実装だと別ウィンドウ（target="_blank"）処理ができない問題がある。
別ウィンドウで開く場合はwindow.open()する必要があるが、同期（クリックイベント中にポップアップ）にしないとポップアップがブロックされる。別ウィンドウの場合のみ同期処理（hitcallbackオプションを使わない）

http://www.maxmakedesign.co.uk/development/2014/outbound-links-new-window-analytics/

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);
    }
  }

  // ここから本実装
  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  ale(function() {
    // すべての外部リンクを抽出
    var a = document.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
      // 特定のリンク先ドメインに対するリンクのみ絞り込む
      if(/^(www\.aaa\.com|www\.bbb\.net|www\.ccc\.jp)/.test(a[i].hostname)){
        // クロージャに入れてしまっているため`a[i].href`をクリック時に参照できない。
        // そのため`a[i]`が見えるうちに即時実行しておく
        (function(b){
          ace(b, function(){
            ga('send', 'event', 'linkclick', 'outbound', b.href, 1);
          });
        })(a[i]);
      }
    }
  });

})();

参考までにonclickイベントハンドラを使った古い実装方法は以下の通り。

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

  // 同一ウィンドウで開くか別ウィンドウで開くかを指定（それによって後の処理が分岐）
  var sameWindow = true;

  // ページのDOMツリー構築後に実行（要するにwindow.onload）
  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  if (window.addEventListener) {
    window.addEventListener('load', fn, false);
  } else if(window.attachEvent) {
    window.attachEvent('load', fn);
  } else {
    window.onload = fn;
  }

  // ここから本実装
  function fn() {
    // すべての外部リンクを抽出
    var a = document.getElementsByTagName('a');
    for(var i in a) {
      // 特定のリンク先ドメインに対するリンクのみ絞り込む
      if(/^(www\.aaa\.com|www\.bbb\.net|www\.ccc\.jp)/.test(a[i].hostname)){

        // クロージャに入れてしまっているため`a[i].href`をクリック時に参照できない。
        // そのため`a[i]`が見えるうちに即時実行しておく
        (function(url){
          a[i].onclick = function(){
            if (sameWindow){
              // 同一ウィンドウで開く場合は非同期
              ga('send', 'event', 'linkclick', 'outbound', url, 1, {
                'hitCallback': function() {
                  document.location = url;
                }
              });
            } else {
              // 別ウィンドウで開く場合は同期
              ga('send', 'event', 'linkclick', 'outbound', url, 1);
              window.open(url);
            }
          }
        })(a[i].href);
      }
    }
  }
})();

参考 http://netnix.org/2014/04/27/tracking-downloads-with-google-analytics/