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名はユーザー数を表示するのに使っているので変更してはいけませんよー!
これでページが読み込まれる → 数字が表示されるまでの間の代替テキストが変更できます。
ダウンロードは下記からどうぞ。