WEBサイトの閲覧者数をリアルタイムで表示させる(Firebase / Javascript)

これもまた掲題の通りなのですが。。
先日クライアントからの依頼で、掲題の対応を行いました。
「このサイトを今〇人が見ています」ってやつですね。
GoogleAnalyticsで表示されていますが、
これをサイト内で表示させたいということ。
常に多くのユーザーがアクセスしているサイトであれば、
賑わいを可視化するのに非常に良い手法だと思います。

最初は

を発見し、「おっ!jqueryで簡単にできそうだな!」
と思っていたのですが、試してみると上手くいかず。。
「1」としか表示されない。。。

まあ確かに、セッションの保持をし続けないと
リアルタイムの閲覧者数は集計できないですから、
jqueryだと難しそうですよね。

ということで、その後いろいろ検索しても一切情報が出てこなかったのですが、
英語の情報も含めて根気強く調査してみると。。

ありました!!!

なるほどー。
Firebaseを使って、セッション数を保持しておくのですね。

Firebaseについては、上記の記事が分かりやすいですね。
根気強く調べていると、世界中の誰かが助けてくれる。。。
インターネットって素晴らしいですね。
しかし、最近はこの手のチュートリアルも
すべてyoutubeでアップされるんですね。。

やることとしては

・FirebaseのRealtimeDatabaseを使い、ipアドレスごとのviewセッションを保持する場所を作る
・ipify APIを使い、各ユーザーのIPアドレスをjsonで取得する
・上記を合わせて、各ユーザーのセッション数を表示させるjavascriptを書く

って感じですね。

早速実装してみます。
Firebaseの設定は、上記動画が分かりやすいので割愛します。
英語の動画ですが、画面の通り進めていけば大丈夫だと思います。

ただ、動画ですと、コードを写していくのがしんどいのと、
上記の動画の通りだと、数値が延々と積みあがっていってしまいますので、
IPアドレスだけでなく、timestampを保持させるようにして、
一定期間(今回は10分)経ったtimestampを保持しているIPアドレスについては
削除するように調整しました。(ちょっと自分でも何言ってるか分かりませんが笑)

下記に記載しておきます。
★のところは、各アカウントによって変わるので適宜変更ください。

こんな感じです。
上記コードが入っているところが、閲覧者数としてカウントされます。

あとは、閲覧者を表示したいところに

こんな感じにすれば、リアルタイム閲覧者数が表示させます。
一応、下記にデモをアップしましたので、見てみてください。

上記のような感じで閲覧者数が表示されます。
どなたかの参考になれば幸いです。
それでは。

役に立った 5

役に立ったボタン設置してみました。是非押していってくださいm(__)m(2020年4月17日設置)

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。