Google Analyticsのトラッキングコードを見直してみる

Unobtrusive Google Analytics Integration – Refract

「Google Analytics（のトラッキングコード）をさりげなく改良する方法」というエントリーをメモ。

今やどのWebサイトも当たり前のように利用している Google Analytics 。このGoogle Analyticsを機能させるには、HTMLソースの</body>タグ直前にトラッキングコードを挿入しなければなりませんが、新しいトラッキングコード（ga.js）は結構ソース量が多く、以下のようなものです。

2008/11/21追記：このページのソースコードをそのままコピー&ペーストしないでください！ トラッキングコードにはプロファイルごとにサイトを識別するためのウェブプロパティID（UA-xxxxxxx-x）が記述されていますので、下記に紹介したソースの UA-xxxxxxx-x の部分については、Google Analyticsの管理画面で各自専用のIDを確認し、それを使用してください。ちなみにGoogle Analyticsのトラッキングコードはいつの間にかこの記事の内容のものから変更された模様です。新しいトラッキングコードはga.jsが読めなかった時のことまで考慮されているようです。

<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._initData();
pageTracker._trackPageview();
</script>

単純にこれだけ長いソースをHTMLファイルひとつひとつに埋め込むのは嫌だというのもあるし、他にもJavaScriptライブラリを使用していて、</body>タグの直前にはトラッキングコードを挿入できない場合もあるかもしれない。

そこでトラッキングコードを外部JavaScriptライブラリにして読み込んでしまおう、というのが Unobtrusive Google Analytics Integration に紹介されているソースコードで、以下のようなものです。

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

function startAnalytics() {
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._initData();
pageTracker._trackPageview();
}

if (window.addEventListener) {
window.addEventListener('load', startAnalytics, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', startAnalytics);
}

後は、HTMLのヘッダに

<script src="/js/analytics.js" type="text/javascript" 
charset="utf-8"></script>

などとして、このJavaScriptファイルを読み込んであげればいい。

ポイントとなるのは、 onloadイベントのハンドラでHTMLソース中にトラッキングコードを呼び出している 点。JavaScript側でHTMLにJavaScriptのコードを追加してトラッキングコードを実行させるようにしているため、 JavaScriptが読めない場合もエラーが起きない ような仕組みになっています。

なぜ、わざわざそのような処理をしてあげるのかというと、ユーザによってはGoogle Analyticsのトラッキングコードを実行しないように制御していることも考えられるから。

Webサイトのオーナーにとっては、使いこなせないぐらい盛りだくさんの情報を教えてくれるGoogle Analyticsだけれども、いつ・どこから・どんな環境の人間がアクセスしているのかをこっそり集計されるのは閲覧するユーザ側にとってはあまりいい気がしないものかもしれません。

Google Analyticsをブロックする方法として、例えばFirefoxなら Ad blocker などのアドオンがあるし、プロキシを設定するなどの方法も考えられます。あるいは単純にクライアントのhostsファイルを書き換えてgoogle-analytics.comを探せないようにしてしまうこともできる。 実際にGoogle AdSenseのような広告やGoogle Analyticsを嫌って、これらをブロックしてしまっている人はWeb業界には多いようです。

ところが、Google Analyticsのトラッキングコードはこういった人たちのことを考えて作られているはずはなく、HTML中に記述されているため、トラッキングコードが読めなかったときにはJavaScriptエラーが起こってしまいます。JavaScriptのデバッグツールなどを利用している開発者にとっては、Google Analyticsが読み込めないたびに、いちいちJavaScriptエラー警告が表示されてしまう。しかし、上記のGoogle Analyticsのトラッキングコード改良版はJavaScriptが読めない場合は動作しないので、こうしたエラーも表示されません。

シンプルで美しいやり方なので、ぜひ参考にしたいです。当サイトも早速この方法を取り入れてみました。Google Analyticsはきちんと機能しているようです。