ニガくて難しいアクセス解析を、たっぷりのミルクでふわふわの贅沢ラテ的な仕上がりに

jQueryを使って自動的に外部リンクをトラックする

via. onClickなしで外部リンクを計測したいのだが、jQuery方式でうまくいかない。

@hibukuroツイートを見かけて試してみました。まぁ、ここでやってることは別段問題ではないのでコードそのものには言及しませーん。上記リンクでコードが間違ってるわけでもなさそうなので。

ちなみにこちらが紹介されてたコード。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-******']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
//ここまでは共通というかそのまんま
 
<script type="text/javascript"> 
$(function(){
$('a').click(function(){
var url = $(this).attr('href');
if( (url.match(/^http(s?):\/\//) ) && (url.indexOf(window.location.host) == -1)) {
_gaq.push(['_trackPageview', '/click/' + encodeURI($(this).text())]);
}
});
});
</script> 

僕がやるとしたらこんな感じか?まぁ、同じか。


<script type="text/javascript">
$(document).ready(function(){
  $("a[href^=http]").click(function(){
    var url = $(this).attr('href');
    if( url.indexOf(location.hostname)<0){
      var text = $(this).text();
      _gaq.push(
        ['_trackPageview', '/click/' + encodeURI(text)]
      );
    }
  });
});
</script>

まあ、別に、どっちでも大丈夫ですね。

trackPageviewに日本語を送る場合のエンコード方法

なぜこんなことをブログに書く気になったかというと、バーチャルページビューの出し方が秀逸だなと思ったからです。
/click/リンク文字列」にすることで、リンク先URLじゃなくてアンカーテキストそのものをトラックするという考え方って素敵やん。
普通、「click/link01」とか「click/link02」とかリンク番号をつけてバーチャルページビューにするんですが、jQueryのtext()を使う発想はなかったです。
※リンクが画像の場合は空文字になっちゃいますが...

試してみた

注意点は1つ。送るテキストをjavascriptでエンコードすること。

エンコード方法は「encodeURI」(上で使ってるやつ)と「encodeURIComponent」ていうのがあって、encodeURIComponentだと「/」「;」「+」「-」とかも全部エンコードします。setCustomVarだとencodeURIComponentを使わないと文字化けするんですが、trackPageviewはもうちょっとユルそうです。

やってみたのが↓の画像。
「ヤフー-/+;」というアンカーテキストに対して、エンコードしないものと、encodeURIしたもの、encodeURIComponentしたものの3パターンで試してみました。
前提として、HTMLページの文字コードはUTF-8です。

すべてのブラウザでencodeしてもしなくても結果が同じという驚愕の実験になりました。
でもページがShift-JISだったときのことを考えるとencodeしたほうがいいのは確かなんですが、どうやらencodeURIでも、encodeURIComponentでもどちらでもOKというのが今日の結論のようです。

Home > 04.中級メニュー > jQueryを使って自動的に外部リンクをトラックする

このページの上へ