Google Analyticsでアンカーのクリック数をトラッキングする方法 [Cool Web Window]

Top ＞ webコラム＞素敵なサイトを作るために＞ Google Analyticsでアンカーのクリック数をトラッキングする方法

Google Analyticsでアンカーのクリック数をトラッキングする方法

2009年6月 6日

Google Analyticsではサイト内のページ遷移など詳細に解析できます。
しかし例えば、PDFファイルなどのダウンロード数などを知ることはできません。
そこで、Javascriptのonclickイベントを使うことでトラッキングできます。

サイトからのファイルのダウンロード (PDF、AVI、WMV など) をトラッキングするにはどうすればよいですか。 - Analytics ヘルプ

上記のヘルプを見ると、

Google Analytics では、ファイルをダウンロードするためにリンクがクリックされた回数を簡単に記録することができます。リンクのクリックはトラッキングコードを設定したページの計測する方法とは異なります。ダウンロードリンクのクリックをトラッキングするには、_trackPageview() JavaScript を使用して、リンク自体にタグを設定する必要がございます。この JavaScript コードにより、リンクのクリックに対して 1 回のページビューが割り当てられるようになります。このページビューは指定した任意のファイル名でカウントすることができます。

たとえば、www.example.com/files/map.pdf へのリンクのクリックを /downloads/map のページビューとして記録するには、リンクの <a> タグに下記の属性を追加します。

<a href="http://www.example.com/files/map.pdf" onClick="javascript: pageTracker._trackPageview('/downloads/map'); "</a>

サイトからのファイルのダウンロード (PDF、AVI、WMV など) をトラッキングするにはどうすればよいですか。 - Analytics ヘルプより引用

と長々とあります。

しかしこの方法では、直接HTMLソースにJavaScriptコードを書くことになりますね。特にJavaScriptのイベントを直接書くとinvalidになるので、なんとなく気持ち悪い感じがします。あと、この場合はソースコードが短いのでよいのですが、プログラムをHTMLファイルに記述すると煩雑になって見にくくなったり、メンテナンス性に欠けたりするので、個人的にはJavaScriptソースは外部に記述したい派です。

そこで今流行り？の jQueryを使用してvalidになるソースコードにしてみたいと思います。

STEP1：jQueryのダウンロード

まず、 jQueryを使用しているので、以下のサイトから jQueryをダウンロードしてください。

jQuery: The Write Less, Do More, JavaScript Library

STEP2：HTMLソースコードの変更

HTMLソースは次のとおりです。

<html>
<head>
<title><title>
<meta http-equiv="Content-Script-Type"
content="text/javascript" />
<script language="JavaScript" type="text/javascript"
src="jquery.js"></script>
</head>
<body>

<!--  トラッキングしたいアンカー -->
<p><a href="sample.pdf" class="tracking"
rel="/downloads/sample.pdf"></p>

<!-- トラッキングコード (新しいバージョン） -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ?
"https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" +
gaJsHost + "google-analytics.com/ga.js' 
type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
</script>

<!-- トラッキングコード (古いバージョン） -->
<script src="http://www.google-analytics.com/urchin.js"
 type="text/javascript">
</script>
<script type="text/javascript">
  _uacct="UA-xxxx-x";
  urchinTracker();
</script> 

<!-- トラッキング用JavaScriptファイル -->
<script src="tracking.js" type="text/javascript"></script>

</body>
</html>

※レイアウトくずれを防ぐため一部改行してはいけないところで改行していますが、実際は一行で書いてください。

aタグの｢tracking｣というclassに対してクリック数を測定します。rel属性でイベント名を記述します。イベント名は、｢/｣から始めなければなりません。

トラッキングコードは2バージョンあって以前の古いバージョン、新しいバージョンがあります。これは、管理ツールから確認してください。

ポイントは、トラッキングコードの下にJavaScript外部ファイルを設置することです。これは、ヘルプにもありますが、_trackPageviewの呼び出しが含まれている場合、トラッキングコードを先に読み込まないとトラッキングされなくなります。

重要: ページに _trackPageview、_setAllowLinker、または _trackTrans() の呼び出しが含まれている場合、HTML コードでは、これらの呼び出しより上にトラッキングコードを配置する必要があります。この場合、トラッキングコードは、開始タグ <body> と JavaScript 呼び出しの間の任意の場所に配置してください。

JavaScript イベントをトラッキングするにはどうすればよいですか。 - Analytics ヘルプより引用

STEP3：外部JavaScriptファイルの作成

続いて、｢tracking.js｣という名前のJavaScriptファイルを作成します。名前は別のものにリネームされてももちろん構いません。

JavaScriptコードは以下のようになります。

$(document).ready(function(){
  $('.tracking').click(function(){
    // 新しいバージョンの場合
    pageTracker._trackPageview(this.rel);
    
    // 古いバージョンの場合
    urchinTracker(this.rel);
  });
})

トラッキングコードの新旧によって、記述するJavaScriptコードも違うので注意です。

この方法は、PDFファイルのダウンロード数のカウントだけでなく、バナーのクリック数や外部へのリンクのクリック数のトラッキングなど、様々な用途に使用できます。

これで、Google Analyticsの管理ページの｢上位のコンテンツ｣からクリック数を見ることができます。

イベント名を例えば｢/click/～｣や｢/go/～｣のように特定の文字列から始めるようにするとフィルター機能から簡単に検索できるので便利です。

Google Analytics トラッキング

余談

解析ツールで識別するためのイベント名をrel属性で設定しているのですが、本来ならid属性を使用するべきだと思います。rel属性はリンク先の情報を示すものであり、JavaScriptなどのプログラム処理する際の識別子はid属性を使用するのが一般的だからです。

しかし個人的事情により、id属性はワークフレーム名に使用しているのであまりその他の用途で使用したくないというのが実情です。

MovableTypeやWordPressなどのCMSを比較的デフォルトの状態で使っている方はid属性が頻繁に使われているという点でも、id属性で指定するのをお勧めします。ただし、id属性はページ毎に1回しか使用できないので注意が必要です。

その場合は、HTMLコードは

<!--  トラッキングしたいアンカー -->
<a href="sample.pdf" class="tracking"
id="/downloads/sample.pdf">

JavaScriptコードは、

$(document).ready(function(){
  $('.tracking').click(function(){
    // 新しいバージョンの場合
    pageTracker._trackPageview(this.id);
    
    // 古いバージョンの場合
    urchinTracker(this.id);
  });
})

と、なります。