[js]サーバーログ型ツールでもイベントトラッキングがしたい


ビーコン型ツールでは当たり前のイベントトラッキングですが、サーバーログ型でやろうとすると中々難しかったりします。
そこで、ちょっとだけ簡単にイベントトラッキングをできるようにJSを書いてみました。
ものすごいニッチなニーズだとは思いますが。。。

作戦としては単純で、
・GAの真似をして4階層でイベントを定義
・URLパラメータに変換
・透明gif画像をパラメータ付きで呼び出す
(・解析ツール側で頑張って解析)
です。

 

使い方

1.まずはビーコン画像をサーバーにアップします。
1×1 pixelのgifがいいと思います。
wikipediaとかにあったりします。
http://en.wikipedia.org/wiki/File:Transparent.gif

2.次にJSファイルのURLの箇所をビーコン画像をおいたパスに修正します。

3.HTMLからJSファイルを呼び出してください。

4.「_evTrac.track([category,action,label,value])」で、パラメータ付きのビーコン画像を呼び出すようにしています(valueのみ省略可です)。

aタグのクリック回数を取得したい場合は、aタグにonClick属性を追加して下記のようにしてみてください。

<a onClick="javascript:_evTrac.track(['clcik_data','click','click01']);" href="/test.thml">Aタグ</a>

外部サイトへのリンクを一括設定で取得したい場合は、jQueryを使ってこんな感じで書けばいいと思います。

$(function(){
  $("a").click(function(){
    var href = ($(this).attr("href")).replace(/http($)?:///, "")
    _evTrac.track(["outbound",href,location.pathname]);
  });
})

 

 

ソースコード(coffee-script版)

ソースはcoffee-scriptで書いたので、coffee-scriptの方のソースコードを載せておきます。
JS版は、github(gist)に置いてます。
https://gist.github.com/2156661

coffee-script版

 

 

注意

たいていのサーバーログ型解析ツールでは、gif画像の解析は行わないように設定されています。
フィルター設定で、ビーコン画像だけ解析対象にするようにうまく設定してください。