[JS]スクリプト初心者でも簡単！ユーザーの訪問状況ごとにコンテンツを変更するスクリプト -Aware.js

サイトに初めて来たユーザーには使い方を表示、リピーターには更新されたコンテンツを目立つように表示、などのようにユーザーの状況に応じてコンテンツをカスタマイズしたり、レイアウト変更ができるjQueryのプラグインを紹介します。
「ここまで読みましたね」マークをつけることもできます。

Aware.js

Aware.js -GitHub

• Aware.jsのデモ
• Aware.jsの使い方

Aware.jsのデモ

デモは2種類あり、ユーザーの訪問状況、時間帯で異なるコンテンツを表示します。
まずは、訪問状況のデモから。

デモページ：通常の表示

通常はこのような表示です。
初見、今日初はデモページ上部のリンクをクリックしてください。

デモページ：初めてサイトに訪れた時の表示

レイアウトががらっと変わっています。
※初見でレイアウトを変える必要はありませんが、まぁデモの動作が分かりやすくでしょうね。

デモページ：リピーターだけど今日初めての表示

レイアウトは通常時と同じで、「New」アイコンがついています。

Aware.jsではユーザーが来訪した時間ごとに異なるコンテンツを表示することもできます。

デモページ：9時にアクセスした時の表示

朝っぽいカラーです。

デモページ：21時にアクセスした時の表示

こちらは夜っぽいカラーで。

Aware.jsの使い方

Aware.jsの仕組みはスクリプトのユーザーの状況を判断し、状況に対応したclassを生成し、スタイルシートでユーザーの状況に合わせたコンテンツを配置します。

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="http://xoxco.com/js/jquery.min.js"></script>
<script src="aware.js"></script>

Step 2: HTMLとCSS

ページの作成は通常通りHTML+CSSでOKです。
ユーザーの状況によって変える箇所を用意してください。

<span class="first-visit">初見のユーザー</span>
<span class="first-visit-of-day">リピーターだけど今日初のユーザー</span>
<span class="repeat-visitor">リピーター</span>

Step 3: JavaScript

jQueryのセレクタで変化させる箇所を指定し、スクリプトを実行します。

	<script>
		$(function() {
			$().aware();;
		});
	</script>

また、リピーター用に「前回ここまで読みました」マークをつけることもできます。

「前回ここまで読みました」マーク

これはshkmarkと呼ばれる機能で、下記のように実装します。

$('.post').aware();
$('.post').shkmark();

// this would result in a div with class .bookmark being added:
// <li class="shkmark">You started reading here 5 minutes ago</li>

shkmarkはデフォルトではli要素を使用しますが、変更することもできます。

$(.post').shkmark({
    element: 'div',
    className: 'bookmark'
});