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>

の直上にrealtimeusers.jsをあらかじめ読み込んでおきます。

ダウンロードは下記からどうぞ。

イロイロデザインラボラトリ

https://iroirodesignlab.com/wp-content/themes/iroirodesignlab/blog/realtimeusers.zip

realtimeusers.zip

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名はユーザー数を表示するのに使っているので変更してはいけませんよー！

これでページが読み込まれる → 数字が表示されるまでの間の代替テキストが変更できます。

ダウンロードは下記からどうぞ。

イロイロデザインラボラトリ

https://iroirodesignlab.com/wp-content/themes/iroirodesignlab/blog/realtimeusers.zip

realtimeusers.zip