Pjaxとは?
Pjaxとは、ごく単純化して言うと、Ajaxでコンテンツの一部だけ変更しているはずなのに、URLまでちゃんと変わっているっていうものです。
詳しくは↓で説明されています。
[JavaScript][pjax]pjax こそが pushState + Ajax の本命
Pjaxの何が嬉しいかというと、大きく2つあります。
1つは「戻る」ボタンが利用できることです。
Ajaxでページ内遷移を繰り返しているときに、戻るボタンを押してしまうと、ページごと戻ってしまいます。Pjaxを利用すると、Ajaxのアクションレベルで戻るボタンを使って戻ることができます。
2つ目は、ソーシャル関連ツールの利用しやすさです。Ajaxでページ内の一部を変更した状態のままイイネ!を押したり、はてブしたりしようとしても、URL単位で登録されてしまうので、うまくできません。Pjaxを利用すると、URLまで変更されるので、ソーシャル対応がしやすくなります。
Pjaxサイトの構築
ということで、Pjaxでテストサイトを簡単に作ってみました。
http://vivid-mist-690.heroku.com/
グローバルナビの「navi 2」~「navi 5」までのリンクがPjaxリクエスト用のリンクです。
例えば、「navi 2」をクリックすると、ボディ部がAjaxで変化すると思います。URLを見てみると、「http://vivid-mist-690.heroku.com/:data2」に変わっています。戻るボタンを押すと、元にいたページに戻ることができます。
サーバーはsinatra+herokuで構築しています。無駄にHTML5で構築しています。Pjaxの処理には、pjax用のjQueryプラグイン: jquery-pjaxを利用しています。
HTMLは↓のサイトのものをHaml化して利用させていただきました。
ありがとうございます。
http://www.finefinefine.jp/web/kiji545/
ソースコードはgithubに保存しています。
https://github.com/yosimox/pjax_test
ちなみにIEでは動きません。最新のOperaかFirefoxかChromeを利用してみてください。
Pjaxサイトのログ解析
通常、Ajaxのログ解析を行う場合は、Ajaxアクションに対して、カスタムイベントを発生させることでトラックします。
Google Analyticsの場合、aタグのオンクリックイベントに以下のようなコードをバインドします。
_gaq.push([‘_trackEvent’, ‘foo’, ‘hoge’, ‘bar]’);
Ajaxではカスタムイベントでデータを取得することが普通ですが、Pjaxの場合はイベントよりも通常のページとしてカウントする方が良いと思います。というのも、
・IE等、Pjaxが利用できないブラウザがあり、その場合は通常のページリクエストとなる。
・URLが変わるので、ページが変わると捉えた方が望ましい。
逆にページとして、カウントしたくないような小さなページ内変化はPjaxリクエストをせず、通常のAjaxイベントとして処理させるべきだと思います。
GAを利用する場合、実装はさほど難しくありません。というのも、jQueryプラグイン「jquery-pjax」に既にGAのサポートがされているからです。単純にPjaxリクエストが成功した時の、コールバック関数の中で、_gaq.push([‘_trackPageview’]);を動作させています。(161行目)
もし、カスタム変数を設定したいのであれば、その前あたりに書いておけばOKです。
どうせ、jQueryを使っているんだし、外部リンククリックの取得も合わせて設定してしまいましょう。
一つ注意する必要があるのは、Pjaxで変化した中身のリンククリックも対象としたい場合、通常の下記のような方法ではうまくバインドできません。
something();
});
解決策としては、jquery-pjaxのコールバック関数の中にclickイベントをバインドするか、”click”の代わりに”live”を利用するかです。liveの方が楽にできると思います。
かなり簡単にですが、こんな感じで書いてみました。
$("a").live("click", function(e){
var linkUrl = $(this).attr("href");
var internalDomain = location.host;
//console.log(linkUrl);
if((linkUrl.match(/^https?/))&&(!linkUrl.match(internalDomain))){
var evData = {
"category" : "outerLink",
"action" : document.URL,
"label" : linkUrl
}
_gaq.push(['_trackEvent', evData.category, evData.action, evData.label]);
}
});
});
サンプルサイトのボディ部にYahoo!と書かれているリンクがあると思います。このリンクをクリックすると、トラックイベントが発生して、GAにデータが送信されます。内部リンクは送信しないようにセットしています。
グローバルナビ(navi 2など)をクリックして、ボディ部を変更しても外部リンククリックの取得は正常に行われていると思います。
Pjaxサイトの分析サイドからの利点
Pjaxの一番の利点はユーザーエクスペリエンスの向上ですが、分析サイドでも利点はありそうです。特に、URLが完全に「一意」であるため、
「ユーザーの関心の高さ」と「PVの多さ」
がほぼ一致するということが大きいです。(もちろんナビゲーションの問題もありますが)。通常のAjaxではクリック単位でイベントを計測することになるので、他のページとの比較が難しくなります。また、通常のページビューとしてカウントできることで、ページ遷移を追うことがより容易になります(ページ遷移についてはGAよりもSiteCatalystの方でメリットが大きそう)。
IEはIE9でも対応していないというPjaxの酷い欠点もありますが、対応していなければ通常のページリクエストになるだけで、分析サイドからはあまり関係がないのかなと思います。ある程度大きな規模のサイトでPjaxを使っているのはgitHubくらいしか知らないですけど、今後Pjaxはかなり熱いんじゃないでしょうか。