Google Analyticsをスマートにインストール

前回のエントリーでprototype.jsを使ったサイト名.jsをおすすめしました。
http://d.hatena.ne.jp/eichi-m/20070818

そのサイト名.jsを使ってanalyticsのjsファイルを動的に読み込ませて、html側にjavascriptを書かずにインストールをします。

まず必要な事を挙げてみます。

google analyticsのjsファイルを読み込む
ページがロードされたらurchinTracker()関数を実行する

ちなみにGoogle Analyticsのリファレンスでは</body>までの間に下記のjavascriptコードを貼付けろと書かれていますので、下記のコードを貼付けた場合と同じ事ができるようにサイト名オブジェクトにメソッドを記述します。

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
  _uacct="UA-xxxx-x";
  urchinTracker();
</script>

外部javascriptを動的にロードするメソッド

まず、html側にanalyticsに関するjavascriptを記述しないということはサイト名オブジェクトから動的にanalyticsのjsファイルを読み込めるようにする必要があります。
そこで、オブジェクトにloadJSというメソッドを作成します。

loadJS : function(url) {
    var head = document.getElementsByTagName('head')[0];
    var addTag = document.createElement('script');
    addTag.type = 'text/javascript';
    addTag.src = url;
    head.appendChild(addTag);
}

このメソッドはhtmlのheadをオブジェクトとして取得、取得したheadにscriptエレメントを追加するメソッドです。
引数に読み込むスクリプトのURLを指定します。

関数が読み込まれているかチェックするためのメソッド

次に関数が読み込まれているか（実行可能か）をチェックするためのメソッドを作成します。
これは、動的にスクリプトを読み込んだ場合において読み込みが完了する前に関数を実行してエラーを引き起こさないようにするためのものです。
このメソッドを使って読み込み完了ならば実行、読み込みが完了していなければwaitという動きを実現します。

isLoaded : function(load) {
    try {
        eval('var type = typeof(' +load+ ')');
        if(type.match(/^function$/i)) return true;
    } catch(e) {
        return false;
    }
    return false;
}

引数には関数名(string)を渡します。。
このメソッドは渡された関数名をtypeof()でチェックし、タイプがfunctionならばtrueを返しそれ以外はfalseを返します。
このメソッドを拡張することで、objectのチェックや複数の関数をチェックすることも可能です。

urchinTracker()を実行するメソッド

Analyticsのロギングを実行する関数であるurchinTracker()を実行するためのメソッドを作成します。

analytics : function() {
    if(!this.isLoaded('urchinTracker')) {
        // まだ読み込みが完了していなければ120ミリ秒後に再度試行
        setTimeout(function(){ this.analytics(); }.bind(this), 120);
        return false;
    }
    // ロギング実行
    _uacct = 'UA-xxxxxxx';
    urchinTracker();
}

まず、上で作成した関数が読み込み済みかどうかをチェックするメソッドでチェックしています。
まだ読み込みが完了していなければ、120ミリ秒待ってから再帰的に自メソッドを呼び出して再度実行を試みます。
読み込みが完了していれば、AnalyticsのIDを定義した後にurchinTracker()を実行します。

initializeでwindowが読み込まれたら自動実行する

最後にprototypeのClassで生成したオブジェクトの拡張機能initializeを使ってページをロードした際に一連のメソッドを自動実行させます。

initialize : function() {
    // 動的にファイルをロード
    this.loadJS('http://www.google-analytics.com/urchin.js');
    // windowがonloadされたらロギング実行
    Event.observe(window, 'load', function(){ this.analytics(); }.bind(this));
}

以上で完了です。
この方法を使えば、各ページのhtmlにanalyticsのjavascriptを記述することなくサイト名.jsさえ読み込めばanalyticsのロギングを実行してくれます。

最後に一連のメソッドを全部まとめておきます。

var hogeClass = Class.create();
hogeClass.prototype = {

    initialize : function() {
        this.loadJS('http://www.google-analytics.com/urchin.js');
        Event.observe(window, 'load', function(){ this.analytics(); }.bind(this));
    },

    loadJS : function(url) {
        var head = document.getElementsByTagName('head')[0];
        var addTag = document.createElement('script');
        addTag.type = 'text/javascript';
        addTag.src = url;
        head.appendChild(addTag);
    },

    isLoaded : function(load) {
        try {
            eval('var type = typeof(' +load+ ')');
            if(type.match(/^function$/i)) return true;
        } catch(e) {
            return false;
        }
        return false;
    },

    analytics : function() {
        if(!this.isLoaded('urchinTracker')) {
            setTimeout(function(){ this.analytics(); }.bind(this), 120);
            return false;
        }
        _uacct = 'UA-xxxxxxx';
        urchinTracker();
    }
}
var hoge = new hogeClass();

動的なスクリプト読み込みと読み込み完了チェックのメソッドはAnalyticsだけではなく、その他様々な用途があると思います。
htmlに書くscriptタグを少なくすることができるので、当然htmlがすっきりしてテンプレートの管理も楽になります。