hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

Pjaxってなんじゃっくす

ちげーし。折れ案件でバンバンつかってるし。わかってるし。アレだろアレ。(滝汗)
前に人に説明する用に調べたやつをまとめるだけだし。(滝汗)

概要

サンプルもあって解りやすくまとめてくださっている
web帳 | pjax (pushState + Ajax) jquery plugin 使用方法 などなど :

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)を併用すれば大丈夫そうです。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください