Google Analyticsをダウンロードカウンターとして利用する方法

何らかのファイルをダウンロードできるようにしたとき、どれくらいダウンロードされたかって気になりますよね?

CGIなどで作られたフリーのダウンロードカウンターは結構出回ってて、ちょっと検索すればすぐ出てきます。

だけど、使い勝手がいまいちだったり、FTPソフトでダウンロードカウンターのスクリプトをアップロードしてパーミッションを変更して・・・みたいな作業が面倒だったり、あるいは様々なスクリプトを使ってて、それぞれに管理画面があって、結局全部使いこなせなかったりと、まぁ色々ありますよね。

そこで、今回はアクセス解析の定番にもなっているGoogle Analyticsをダウンロードカウンターとして使ってみようって話しです。

きっかけは、先日「シンプルな(X)HTMLのCSSレイアウトサンプル15種」っていう、Web制作関連のサイトにありがちなページを作って、ファイルを一括ダウンロードできるようにしたんです。

それで、ダウンロード数を把握したいなって思って、色々調べたら、Google Analyticsでそれっぽいことができると分かったんです。

まずは、前提としてGoogle Analyticsを利用していること、そして、今現在の最新のトラッキングコードを使用していることが条件です。以下のようなトラッキングコードがhead要素内に配置されていればOKです。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '*************']);
  _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);
  })();
</script>

やり方はGoogle Analyticsの管理画面のどこに結果を反映させるかで、2通りの方法があるようです。

まず1つ目は通常のアクセス解析に反映させる方法です。

<a href="ダウンロードファイルのURL" onClick="javascript:_gaq.push(['_trackPageview', 'ダウンロードファイルのURL']);">ダウンロードファイルの名称</a>

通常のダウンロードリンクに上記のonClickイベントを追加するだけです。これで、ダウンロードファイルがあたかも通常のHTMLファイルであるかのようにアクセス解析に反映されます。これを「バーチャルページビュー」って呼ぶみたいです。

続いて2つ目は「イベントのトラッキング」に反映させる方法です。

<a href="ダウンロードファイルのURL" onClick="_gaq.push(['_trackEvent', 'カテゴリ', 'アクション', 'ラベル']);" >ダウンロードファイルの名称</a>

これもダウンロードリンクにonClickイベントを追加するんですが、こちらはカテゴリ・アクション・ラベルの3つを設定します(カテゴリとアクションは必須でラベルは任意)。

簡単に説明すると、なんていう分類(カテゴリ)のなんていう物(ラベル)がどうされた(アクション)ときトラッキングするのかを決める訳です。具体的な例を挙げると以下のような感じです。

<a href="ダウンロードファイルのURL" onClick="_gaq.push(['_trackEvent', 'File', 'Download', 'ダウンロードファイルの名称']);" >ダウンロードファイルの名称</a>

この「イベントのトラッキング」はダウンロード数を計測する以外にも色々と応用できそうです。例えば継続的に集計したいアンケートであれば、

<ul>
<li><a href="「アンケートにご協力ありがとうございます」のページのURL" onClick="_gaq.push(['_trackEvent', 'IEに関するアンケート', 'IEに肯定的', 'IEは素晴らしい']);" >IEは素晴らしい</a></li>
<li><a href="「アンケートにご協力ありがとうございます」のページのURL" onClick="_gaq.push(['_trackEvent', 'IEに関するアンケート', 'IEに否定的', 'IEは駄目だね']);" >IEは駄目だね</a></li>
</ul>

みたいな感じかな?話しは少しそれちゃいましたが、これでアクセス解析と共にダウンロード数を計測することができます。