Real Time Usersはウェブサイトの閲覧者数をリアルタイムに表示できるJavaScriptライブラリで、複雑な設定をすることなくコードを読み込むだけで使えるので、WordPressやShopifyなどの幅広い環境で使うことができます。
ECサイトのセールページや不動産の物件ページなど、「今まさに誰かが見ている！」というユーザーの気持ちを掻き立てるには効果的かもしれませんね！
サンプル
サンプルを見てみましょう。
See the Pen
リアルタイムユーザー by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.
今まさに閲覧しているユーザー数が表示されています。
表示されるのは60秒以内にアクセスしたブラウザの数になるので、複数のブラウザを立ち上げたりリロードを繰り返すと純粋に数が増えます。
HTML
HTMLはこんな感じです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<span class="realtimeuserscounter"></span>
<script src="./js/realtimeusers.js"></script>
</body>
</html>
</body>の直上にrealtimeusers.jsをあらかじめ読み込んでおきます。
ダウンロードは下記からどうぞ。
class=”realtimeuserscounter”
リアルタイムのユーザー数を表示させたい場所にrealtimeuserscounterのclassを付けた要素を配してください。その場所に数字が表示されます。
CSS
CSSはSCSSを使っています。
.realtimeuserscounter {
display: flex;
gap: 1rem;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
border: 2px solid #303030;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.5rem 2rem;
border-radius: 0.5rem;
&:before {
content: "REALTIME USERS";
white-space: nowrap;
}
}
&:before
サンプルではbeforeの疑似要素に「REALTIME USERS」というテキストを表示していますが、現実的には下記のようにするのが分かりやすくて良いですね。
<div class="realtime-container">
<span class="realtime-title">REALTIME USERS</span>
<span class="realtimeuserscounter"></span>
</div>
JavaScript
JavaScriptを直接編集することはないかと思いますが、アクセス数を表示するまでの間に「LOADING…」と表示されている箇所は変更することが可能です。
realtimeusers.jsを開き、20行目あたりにある下記の箇所を適宜変更してください。
var inner = '<div class="realtimeuserscounter__num">LOADING...</div>';
なお、realtimeuserscounter__numというclass名はユーザー数を表示するのに使っているので変更してはいけませんよー！
これでページが読み込まれる → 数字が表示されるまでの間の代替テキストが変更できます。
ダウンロードは下記からどうぞ。
