アクセス解析ツールのタグチェック


ビーコン型のアクセス解析ツールは高機能で便利なのですが、
タグの挿入作業が非常に面倒です。
それに加え、データが取れているのかを検証しなくてはいけません。

カスタマイズを行っている場合は、JavaScriptが正確に動作しているのかをチェックする必要があるので、
プログラムでソースコードを舐めるだけでは不十分です。
ブラウザ上でJavaScriptを実行させてから、パケットを解析する必要があります。

タグ挿入はテキストエディタやスクリプト言語などで置換一発でできますが、
タグチェックはなかなか大変です。

■ブラウザをクローリングさせる方法
一番ラクなのは、ローカルにプロキシを立てて、ログを保存し、
ブラウザをクローリングさせる方法です。
出来上がったログをプログラムで整形すれば完成です。
私はRubyを使って、実装しています。
プロキシ(Webrickで作成)を立てる
→ IE操作(win32ole)して、クローリング。
→  ログを整形

ただし、onClickでデータを取ろうとすると、クローリングでは中々うまくとれません。
あと、httpsはデータがとれません。。。。

■HttpFoxでパケットをキャプチャ
しょうがないので、FireFoxのアドオン「HttpFox」 でパケットキャプチャをします。
FireFoxで評価対象のリンクをクリックしまくります。
iMacrosを使えば自動化できたりします)

「utm」(Google Analyticsの場合)、「2o7」(SiteCatalystの場合)などで、
フィルターを掛けると、欲しいデータのみが出てきます。

絞られたどれか一つを選んで右クリック→「Copy All Rows」で全データをクリップボードにコピーできます。

ここからが肝です。
出てきたデータを整形しなくてはいけません。
それを自動化するJavaScriptを作成しました。
これが言いたかっただけです。

SiteCatalyst用
Google Analytics用
の2種類を用意しています。

HttpFoxからコピーしたデータを上のテキストエリアにいれて、
「変換」を押せば、完了です!
エクセルにでもコピペしてください。
わかりやすいデータになっています。

ソースコードはこんな感じです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>解析用パケットデータ変換</title>
<script language="JavaScript">

<!--
var change = {
    //ここで取得したいデータを定義
    //SiteCatalyst用
    /*コメントアウトしてください。
    conf : {
        tool : "SiteCatalyst",
        varStr : ["pageName", "g", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "v1", "v2", "v3", "v4", "v5", "pev1", "pid"],
        },
    */


    //Google Analytics用
    conf : {
        tool : "GoogleAnalytics",
        varStr :  ["utmwv", "utmn", "utmhn", "utme", "utmcs", "utmsr", "utmsc", "utmul", "utmje", "utmfl", "utmdt", "utmhid", "utmr", "utmp", "utmac", "utmcc"],
        },

    str : function()    {
        var tmp = document.getElementById("input").value;
        return tmp.replace(/rn/g, "n");
    },
    makeArr : function(str){
        var tempArr = str.split("n");
        //console.log(tempArr[2]);
        var resArr = new Array;
        for (var i=0; i<tempArr.length; i++){
            resArr.push(tempArr[i].split("&"));
        }
        return resArr;
    },
    extra : function(arr){
        var exArr = new Array;
        for(var i=0; i<arr.length; i++){
            for(var j=0; j<this.conf.varStr.length; j++){
                tmpReg = new RegExp("^" + this.conf.varStr[j] + "=");
                if(arr[i].match(tmpReg)){
                    exArr[j] = arr[i].replace(tmpReg, "");
                }
            }
        }
        return exArr;
    },
    toStr : function(arr){
        var tmpStr = this.conf.varStr.join("t") + "n";
        for(var i=0; i<arr.length; i++){
            tmpStr = tmpStr + arr[i].join("t") + "n";
        }
        return tmpStr;
    },
    decode: function(str){
        if(this.conf.tool == "SiteCatalyst"){
            console.log(this.conf.varStr);
            return unescape(str);
        }
        if(this.conf.tool == "GoogleAnalytics"){
            console.log(this.conf.varStr);
            return unescape(decodeURI(str));
        }
    },

    go : function(){
        var str1 = this.str();
        var arr1 = this.makeArr(str1);
        var arr2 = new Array;
        for(var i=0; i<arr1.length; i++){
            arr2[i] = (this.extra(arr1[i]));
        }
        var formStr = this.toStr(arr2);
            console.log(this.conf.varStr);

        document.getElementById("output").value = this.decode(formStr);
        document.getElementById("output").focus();
        document.getElementById("output").select();
    }
}

var char = function(){
    document.getElementById("input").value = "";
    document.getElementById("output").value = "";
}



-->
</script>
</head>
<body>
<form id=form3>
<textarea id="input" rows="15" cols="40" onFocus="javascript:char();"></textarea>
<p>
<a href="#" id="submit" onClick="javascript:change.go();return false;">変換</a>
</p>
<textarea id="output" rows="15" cols="40"></textarea>
</form>
</body>
</html>

Google Analyticsの場合は「utme」をもう少し分解した方がわかりやすいかもしれないですね。

Leave a Reply