$.ajax と Google Analytics をシームレスに統合する jQuery プラグイン jQuery-ajaxGA
jQuery を使った Ajax ウェブアプリに、シームレスに統合可能な Google Analytics jQuery プラグイン、jQuery-ajaxGA をgithub にて公開いたしました。
jQuery-ajaxGA の目的
この目的のセクションですが長文乙なので下の方に3行でまとめてます。読むの面倒な方はすっ飛ばしてください。テラ親切プログwww
ポックンの作ったウェブサービスに、凸ただしオトコの娘に限ると←だがそれがいいというのがあります。これらは元々、※ただしイケメンに限るというネットに一時代を築いたウェブサービスのパクリとして立ち上げたものです。パクリ元の雰囲気を極力再現するため jQuery をメインに使ったアプリケーション構成となっています。ちなみに※ただしイケメンに限るは Twitter 的デザイン（もっと読むボタンがページ下部にある）を周到していますので、ポックンのパクリサイトも Twitter に似たような感じになってると思いますw
さて、jQuery ユーザーの皆様はよくご存知だと思いますが、Twitter のように jQuery を利用して動的にコンテンツの読み込みを行う場合、Google Analytics のようなアクセス解析サービスはそのままでは使用できません。例えば本家の Twitter も Google Analytics を利用するために、自前のライブラリの中で googleAnalytics という関数を用意して Google Analytics へアクセスを記録してます。
で、先日 Twitter 向けのグリモンを書いてた際に Twitter が Google Analytics を使ってるあたりのコードを見まして、ポックンのパクリサイト×2でも Ajax リクエストを Google Analytics に記録したいと思ったのです。
ただどちらのサイトも作ってから結構日が経ってるので中身をあまり詳しく覚えていませんし、サイトの構成上 JavaScript の部分が結構重要な部分を占めているので、「できるだけコードを触らず手っ取り早く組み込める方法は無いの？」とか思いながら jQuery プラグインディレクトリを物色していたのですが、無さそうだったので自分で作ったのが jQuery-ajaxGA だったりします。
つまり jQuery-ajaxGA の目的はこういうことです。
jQuery.ajax の呼び出しを Google Analytics に
記録するためのライブラリを提供する。
※ただし簡単に組み込めること
jQuery-ajaxGA を使うのがどんだけ〜☆簡単か
たまには @IKKOStyle のことも思い出してあげてください…と思ったのですが、IKKOStyle のつぶやきを見て絶望したので忘れちゃって良いような気がします。ツイッター芸能人新世紀は @kazuyo_k と @kohmi に任せておけば良いようですww
まあオカマの話はおいといて、jQuery-ajaxGA がどれだけ簡単に組み込めるかご説明します。
まず jQuery と Google Analytics を使用しているウェブアプリの場合、元からこのようなコードが HTML に入っていると思います。
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
で、jQuery-ajaxGA に置き換えるとこんな感じ。ga.js の読み込みと pageTracker._trackPageview の呼び出しは、$.ajaxGA.init 内で行われます。
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.ajaxga.min.js">
<script type="text/javascript">
$.ajaxGA.init('UA-XXXXXXX-X', true);
</script>
</head>
</html>
このコードに置き換えるだけで、すべての $.ajax の呼び出しが Google Analytics に記録されるようになります。
後は以下のように、ウェブアプリ中で普通に $.ajax を呼び出すと、すべて Google Analytics に記録されます。
$.ajax({
type: 'GET',
url: 'http://example.com/rpc',
success: function(res) {
// ...
}
});
Google Analytics にアクセスを記録するために、別の関数を呼び出したりする必要はまったくありません。
簡単じゃね？
$.ajax の呼び出しを変更せずに Google Analytics への記録が可能になる仕組み
jQuery-ajaxGA では jQuery.extend を使って jQuery.ajax を置き換えます。置き換えられた jQuery.ajax では元の jQuery.ajax の呼び出しとともに Google Analytics に記録するようになります。
また $.ajax だけでなく、最終的に $.ajax を呼び出す $.get や $.post 等の呼び出しも、$.ajax が置き換えれたことにより、毎回 Google Analytics へ記録されるようになります。
Google Analytics どのように記録されるか
$.ajax の呼び出しは、すべて Google Analytics のイベントとして記録されます。記録されたイベントは、サイドバーメニューの [コンテンツ]→[イベントのトラッキング] から参照できます。
デフォルトでは、カテゴリが jQuery.ajax、アクションが HTTP メソッド（GET/POST 等）、ラベルが $.ajax への呼び出しに使用した URL、でイベントを記録します。
記録方法は、オプションや $.ajax の呼び出し方で変更することもできます。詳しくは マニュアル をご覧ください。
おまけ機能: ga.js のキャッシュ
Google Analytics の自動トラッキングをするためにライブラリ中で pageTracker オブジェクトを直接扱う必要があるので、ga.js の読み込みを xmlHttpRequest 経由で行うようにしています。その際ついでなので ga.js をキャッシュするようにしてます。キャッシュにより、Google が提供する ga.js を読み込むための HTML スニペットを使用する場合と比べ、ページのレンダリングが若干高速になるかもしれません。
機能的には ga.js のキャッシュはライブラリ本来の目的と関係ないのですが、他の Google Analytics 関係の jQuery プラグインではほとんど実装されており、キャッシュするためだけにわざわざ別のプラグインを使うのも面倒だったので実装しました。
ということで、jQuery を使ってて Ajax リクエストを Google Analytics に記録したい方は、ぜひ jQuery-ajaxGA をご利用ください！
[...] $.ajax と Google Analytics をシームレスに統合する jQuery プラグイン jQuery-ajaxGA « ゆっくり…して…イってネ！ （Google Analytics でシームレスにAjaxを記録できるjQueryプラグイン） [...]
WOW just what I was searching for. Camе heree Ƅy searching foг weight
loss
Αlso viszit my web-site … Cellan Raspberry Ketone
sDPLLmEqgMkiywskYd 7159
Thanks for sharing your thoughts on Prolong.
Ɍegards
What’s սρ, of coursе this piece of writing iѕ genuinely gooԁ and I have
learned lot of things from it concerning blogging. tɦanks.
mƴ weblog :: Lumagenex (lumagenexcream.net)