ちげーし。折れ案件でバンバンつかってるし。わかってるし。アレだろアレ。(滝汗)
前に人に説明する用に調べたやつをまとめるだけだし。(滝汗)
概要
サンプルもあって解りやすくまとめてくださっている
web帳 | pjax (pushState + Ajax) jquery plugin 使用方法 などなど :
図解があってみやすくてありがたい
pjaxできれいなURL+非同期画面遷移! by Utage Blog :
http://utage.headwaters.co.jp/blog/?p=1165
注意点
documentにバインドしましょうというお話
pjax導入にあたっての注意点 – ytch’s diary :
pjaxもとうぜんajaxの時と同じようにSNSボタンは再度呼ばないとだめ
WordPressでPjaxの実装と、よくあるトラブルの解決方法 | naoyu.net :
http://naoyu.net/jquery/wp-pjax/
対応環境に注意が必要です
モバイルは〜Android4.01が非対応だったり挙動が不安定だったりします。
PCはIEが10からです。
Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#search=pushstate
イベントについて
イベントいろいろ
defunkt版pjaxの説明 | Cubix
http://chibinowa.net/notebook/js/pjax-fragment.html/defunkt.html#effect
ブラウザ遷移について
pjax:popstateでpjaxロードされた内容に合わせてゴニョゴニョしようとしたら
完了してないときに呼ばれててはまりそうになった。
その場合はendが呼ばれた時にフラグチェックするように変更したらうまくいった。
[html]
var popstateFlag = false;
// ブラウザバックの時にフラグを立てる
$(document).on(‘pjax:popstate’, function(e) {
console.log(e.state);
console.log(e.direction);
popstateFlag = true;
});
// pjax処理が終わったらフラグを確認してファンクション叩く
$(document).on(‘pjax:end’, function(e) {
if(popstateFlag === true){
pjaxPopstateFunk();
}
});
[/html]
アナリティクスについて
javascript – jQuery pjax and google analytics – Stack Overflow
http://stackoverflow.com/questions/9527965/jquery-pjax-and-google-analytics
これに書いている通り、pjax通信完了時にページビューをカウントさせます
テストした結果、
1)ページ埋め込みのみ
→初期にロードされたページのみの計測
2)PJAX通信終了時にpageview計測用タグを呼び出し
→呼び出されたページを計測
[html]
$(document).on(‘pjax:end’, function() {
ga(‘set’, ‘location’, window.location.href);
ga(‘send’, ‘pageview’);
});
[/html]
なので
1)2)を併用すれば大丈夫そうです。
コメントを残す