2010/11/26

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

二つ試したがどちらも撃沈、一つ目はjQueryを使った方式。クリックの動作に問題はないが、SafariとChromeで計測ができていない(ビーコンが飛んでいない)模様(IEとFFではOK)。何故だろう。 分かる方はアドバイス頂ければと。

背景:
Google Analyticsの非同期ga.jsコードで外部へのリンクのクリック計測をする場合に次のような記述を行う。
<a onclick="javascript:_gaq.push(['_trackPageview', '/click/example']);" href="http://example.com/">Example</a>

しかし外部リンクが多くなると、いちいち設定するのが面倒になるので、簡略化できないかということ。

方法:
jQueryを使った方法にトライしてみた。具体的には下記ページの一番下の記述を参考にして作成した。
http://metaboy.blog23.fc2.com/blog-entry-1345.html

これはa href クリックを把握し、相対パスで書かれている内部ページでなく、httpあるいはhttpsから始まるURLが指定されている場合に、外部リンクとして認識し、下記プログラムを発動して、バーチャルページビューとしてカウントする方法と解釈できる。
_gaq.push(['_trackPageview', '/click/example'])

結果:
Ineternet Explorer 7.0  クリックアクションは正常。ビーコン飛ぶ。データは正常。
Firefox 3.6.6  クリックアクションは正常。ビーコン飛ぶ。データは正常。
Chrome 7.0  クリックアクションは正常。ビーコン飛ばない。
Safari 5.0  クリックアクションは正常。ビーコン飛ばない。

計測コード:
実際に使った計測コードは以下の通りで、</head>直前にまとめて記述している。 まずはjQueryのプログラムを読み込み、続けてGAの非同期コード、該当プログラムの順に実装した。 ちなみに_gaq []の[]直前にはパイプが二つ並ぶが、このブログでは省略されてしまっている。

<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-*******-1']);
_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>


関連リンク:(寄せられた意見などから追記、ありがとうございました)
http://analytics.ryow.net/2010/11/26-232618.php
http://www.cms-ia.info/news/automate-exit-link-tracking-with-jquery/
http://t32k.com/a.html

1 件のコメント:

衣袋 宏美(いぶくろ ひろみ) さんのコメント...

自己レスだが、
3方式を自サイトに移植して確認作業を行った。

http://xfusion.jp/t32k.html
http://xfusion.jp/ryownet.html
http://xfusion.jp/shimizu.html

清水さん方式、ryownetさん方式でも自分の環境のChrome 7.0とSafari 5.0ではクリック時にビーコンが飛ばないということをFiddlerなどで確認。

追加確認したOpera 10.6では全て正常に動作する。

t32kさんのデモサイトはSafariでクリック時にビーコンが飛んでない(Chromeでは飛ぶ)。t32kさんの確認動作とこちらでは違いがあるが。
http://t32k.com/a.html

なぜ自分の環境でダメなのかが不明だが、恐らく記述自体は問題ないのだろう。