WordPressの記事がどのようにスクロールされながら閲覧されているのかスクロール値を保存する方法
jQuery + Redis + WordPress + Ajax
Webを閲覧する際は縦方向に上から下に下がりながらページを閲覧する。
その際、スクロールして記事を読むことになるが、ユーザーの画面スクロールはjQueryを使ってイベントを取得することが可能。jQueryで、
- スクロールイベント
- スクロール値
双方のデータを得ることが出来るため、このイベントを利用して、Ajax経由でスクロール値をサーバ側へ送信することが可能。WordPressの場合は、Ajax専用のインタフェースが用意されているので、その仕組みを利用して、スクロールデータをサーバ側へ送信する。
スクロールデータは、インメモリKVSのRedisサーバを利用すれば高速にlist化することが出来る。
事の発端
Google Analyticsでは、閲覧を開始してから直帰した場合には、滞在時間がゼロと記録される。滞在時間がゼロではあるが、ページが表示された瞬間にブラウザの戻るボタンで直帰したわけではなく、閲覧を開始してからサイト内の他のページに移動しなかった場合は、
閲覧開始ページをゼロ秒以上閲覧した状態であっても滞在時間がゼロと記録される
のである。
ページを表示した瞬間に戻るボタンで直帰するユーザーというのは基本的には存在しないはずなので、滞在時間がゼロと記録されたアクセスであっても、
その間に画面のスクロールを行いページを閲覧している
と予想できる。
実装方法
jQueryでスクロールデータを扱う
jQueryでスクロールデータを使う場合は、下のコードでスクロールイベントを使うことが可能。
$(window).scroll(function() {
// 現在のheight値を取得
var height = $(window).scrollTop();
// Ajaxリクエストのコードを記述
}
スクロールされる度に、heightに現在のスクロール値が設定されるコードになる。実際に、
consle.log(height);
として、スクロールするとスクロール値が記録されることを確認できる。
WordPressのAjaxインタフェースを利用する場合のフロント側のjQueryコードは下のようにした。WordPressテーマディレクトリのルートにjsというフォルダを作成し、
ajax_scroll.js
というファイル名で下のコードを作成する。
jQuery(document).ready(function($) {
$(window).scroll(function() {
var height = $(window).scrollTop();
// WordPress側でローカライズされたグローバル引数
var scroll_data = {
action: scroll.action,
post_id: scroll.post_id,
height: height,
};
// スクロール値が250より大きければAjaxリクエスト発生
if(height > 250) {
jQuery.ajax({
type: 'POST',
data: scroll_data,
url: scroll.ajax_url,
dataType: 'json',
success: function(response){
console.log('scroll saved:'+response.redis);
},
error: function(response){
console.log("error");
}
});
}
});
});
WordPressのAjaxインタフェース
functions.phpに下のPHPコードを貼り付ければ、WordPress側の設定は完了する。
// フロントエンドスクリプトを設定
add_action('wp_enqueue_scripts', 'enqueue_script');
// Ajaxコールバックメソッドの設定
add_action('wp_ajax_save_scroll', 'save_scroll_callback');
add_action('wp_ajax_nopriv_save_scroll', 'save_scroll_callback');
function enqueue_script($hook) {
// フロントエンドスクリプトの有効化
wp_enqueue_script('ajax-scroll',
get_stylesheet_directory_uri().'/js/ajax_scroll.js', __FILE__,
array('jquery')
);
// Ajaxリクエスト先や記事IDをフロント側で利用可能な状態にする
wp_localize_script('ajax-scroll',
'scroll',
array(
'ajax_url' => admin_url('admin-ajax.php'),
'action' => 'save_scroll',
'post_id' => get_the_ID(),
)
);
}
function save_scroll_callback() {
// Redisサーバへ接続
$redis = new Redis();
$redis->pconnect('127.0.0.1', 6379);
// スクロール値をリスト化
$r = $redis->rPush('scroll_'.$_POST['post_id'], $_POST['height']);
// json形式でレスポンス
$response = array('redis' => $r);
echo json_encode($response);
die();
}
Redisサーバの設定
Redisサーバの構築方法については、本ブログで複数記事にしたことがあるので、ブログ内に設置してある検索フォームから「Redis」などで検索して、表示された記事を参考にして頂きたいと思います。
まとめ
スクロール値を収集することが可能になれば、そのデータを利用してビジュアル化したり、アクセス解析の補助データとして利用することが可能。
アクセスの多い記事を判断した上で、それらの記事のどの部分を中心にスクロールされているか判断することが可能になります。