鉄馬の工具箱

te2uma(てつうま)のブログです。調べ物のメモなどを共有します。

このエントリーをはてなブックマークに追加

Googleアナリティクスで外部リンクのクリック数をうまいこと計測する

Googleアナリティクスで外部サイトへのリンクを計測するには、計測対象のリンクに手動でタグを設定する必要があります(参考: Googleアナリティクスのヘルプ)。しかし、CMSなどの場合に、ユーザー自身にその設定を手打ちさせるのは現実的ではないですし、サーバーサイドの処理をかませるのも煩雑になり面倒です。

そこで、JavaScriptでDOM操作を行い、クライアントサイドで処理させてしまうと、管理が楽になり便利。ここでは、次の前提でその手順を解説します。

  • 外部サイトへのリンクは target="_blank" が指定されており、別ウインドウで開く
  • Googleアナリティクスの解析タグは、次のように<head>部分で外部ファイルとして読み込んでいる(/PATH/TO/の部分は適宜読み替えのこと)
<script type="text/javascript" src="/PATH/TO/google_analytics.js"></script>

外部リンクをクライアントサイドで動的に計測用に置き換えるコード

Googleアナリティクスの設定ファイル(ここではgoogle_analytics.js)を次のように記述します。

/* デフォルトの非同期トラッキングコード部分 */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); //個々のトラッキングID
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* /デフォルトの非同期トラッキングコード部分 */


/* ヘルプで例示されているコード部分(一部改変) */
function trackOutboundLink(link, category, action) {
  try {
    _gaq.push(['_trackEvent', category , action]);
  } catch(err){}

  // ワークアラウンドで、Safariだけ同一ウインドウで画面遷移
  if (navigator.userAgent.indexOf('Safari') != -1
      && navigator.userAgent.indexOf('Chrome') == -1) {
    setTimeout(function() {
      document.location.href = link.href;
    }, 100);
  } else {
    // ポップアップブロック回避のため、
    // setTimeout()の外でwindow.open()を呼び出しておく
    var win = window.open('', '_blank');
    setTimeout(function() {
      win.location.href = link;
    }, 100);
  }
}
/* /ヘルプで例示されているコード部分 */


/* クライアントサイドで動的にリンクの設定を書き換える部分 */
function myOnLoad(){
  var links = document.getElementsByTagName('a');
  for (var i=0;i<links.length;i++) {
    if ('target' in links[i].attributes) {
      if (links[i].getAttribute('target') == '_blank') {
        var str = "trackOutboundLink(this, 'Outbound Links', '"
          + links[i].getAttribute('href') + "'); return false;";
        links[i].setAttribute('onClick', str);
      }
    }
  }
}

if (window.addEventListener)
{
  window.addEventListener('load', myOnLoad, false);
}
else if(window.attachEvent)
{
  window.attachEvent('onload', myOnLoad);
}
else
{
  window.onload = myOnLoad;
}
/* /クライアントサイドで動的にリンクの設定を書き換える部分 */

修正(2013/09/09)

非同期処理中にwindow.open()で別ウインドウを開くとブラウザのポップアップブロックに引っかかるので、先に別ウインドウを開いておくようにコードを一部修正しました。

修正(2013/09/10)

iOSのSafariでは、上記の方法でのポップアップブロックの回避が難しかったので、ひとまず同一ウインドウで画面遷移するように修正しました。新規ウインドウにフォーカスが移ると、親ウインドウでのJavaScriptの処理が一時停止状態になってしまうような挙動を示したため(親ウインドウにフォーカスを戻すとsetTimeout()内の処理が再度動き出す感じ)。Mac OSのSafariは未確認です。

str変数で、trackOutboundLinkに第2~第3引数で渡している値は、それぞれカテゴリラベル名とイベントアクション名です。後で集計しやすい値を設定してください。ここでは、ラベル名を「Outbound Links」とし、イベントアクション名をリンク先のURLとしています。

上記を組み込むと、例えば

<a href="http://example.com/hoge/" target="_blank">外部サイト</a>

といったリンクがあった場合に、次のように動的に書き換えられます。

<a href="http://example.com/hoge/" target="_blank" onclick="trackOutboundLink(this, 'Outbound Links', 'http://example.com/hoge/'); return false;">外部サイト</a>

外部リンクのクリック数を確認する

上記で計測した値は、Googleアナリティクスのレポート画面で、「コンテンツ」-「イベント」-「上位のイベント」をクリックし、設定したカテゴリラベル名(ここでは「Outbound Links」)をクリックすると、詳細が確認できます。

../../../_images/google_analytics_events.png
このエントリーをはてなブックマークに追加