先日書いた記事「 Google Analyticsでクリック数を計測するスクリプト 」で、 どこへのリンクがクリックされたのか のログを onclick イベントで拾うコードを書きました。ちゃんと動いていたんですが、Tweetボタンやmixiボタンが動作しなくなっていたので修正しました。
動かなくなった理由は onclick を上書きしていたからです。普通のaタグはonclickがnullなので、書いたコードで問題なかったんですが、Tweetボタンやmixiボタンは href="javascript:void(0);" でリンクを無効にして、onclickで作動していたからです。そのスクリプトを消してしまっていたから、ボタンを押しても動作しませんでした。正確に言えばボタンを押すと、違う動きになった。つまりGoogle Analytics用のデータ作成に使われるようになったということです。
そこで、 addEventListener 或いは attachEvent を使って、アクションを「上書き」ではなく「追加」したんですが、それではログが記録されていないことに気がつきました。
Google Analyticsのイベント トラッキングはonclickでなくては計測されない
確認するために丸一日、下のコードで置いておきました。その結果計測されたイベントはゼロです。ただ、そのコードはすでに消してしまっていたので、下のコードは記憶を元に書いています。元のソースでは_gaq.pushのところをalertに変えてテストしましたが、意図どおりに動いていました。
<script type="text/javascript">
<!--
var add_ga=function(elem){
type=(-1==elem.href.indexOf('/ayzfqir5/')&&elem.href.match(/^https?\:\/\//))?'Out':'In';
_gaq.push(['_trackEvent',type+'bound Link','click',elem.href]);
};
set_event=(function(){
if(document.addEventListener){
return function(elem,func){
elem.addEventListener('click',func,false);
};
}
if(document.attachEvent){
return function(elem,func){
elem.attachEvent('onclick',func);
};
}
return null;
})();
if('function'==typeof set_event){
a=document.querySelectorAll('a');
for(var i=0;i<a.length;i++){
set_event(a[i],(function(elem){
return function(){add_ga(elem);};
})(a[i]));
}
}
delete set_event;
// -->
</script>
対処として、上のコードを次のものに変更したところ、addEventListenerのfirefoxでもattachEventのIEでも計測されるようになりました。滅多に押されないところを自分でクリックして記録されているかどうかを見たのですが、偶然誰かが他のブラウザでクリックしていないのなら addEventListener でも attachEvent でも記録されているのだと思います。
<script type="text/javascript">
<!--
var add_ga=function(elem){
type=(-1==elem.href.indexOf('/ayzfqir5/')&&elem.href.match(/^https?\:\/\//))?'Out':'In';
_gaq.push(['_trackEvent',type+'bound Link','click',elem.href]);
};
set_event=(function(){
if(document.addEventListener){
return function(elem){
if(null!==elem.onclick){
elem.addEventListener('click',elem.onclick,false);
}
elem.onclick=function(){add_ga(elem);};
};
}
if(document.attachEvent){
return function(elem){
if(null!==elem.onclick){
elem.attachEvent('onclick',elem.onclick);
}
elem.onclick=function(){add_ga(elem);};
};
}
return null;
})();
if('function'==typeof set_event){
a=document.querySelectorAll('a');
for(var i=0;i<a.length;i++){
set_event(a[i]);
}
}
delete set_event;
// -->
</script>
元々のonclickの内容を elem.addEventListener('click',elem.onclick,false); か elem.attachEvent('onclick',elem.onclick); という形でコピーしてから、 elem.onclick=function(){add_ga(elem);}; で新しいonclickに _gaq.push する関数を上書きするという内容です。正直、これで動くか心配だったんですが、出来るんですね。
結論として、 addEventListener や attachEvent ではダメで、onclickでなくてはイベントは計測されないようです。
ただ、検索してみるとaddEventListenerでうまくいっていると言う記事がたくさんあったのですが、他の方は動いてるんでしょうか？
