初めての待合室の始め方

このガイドでは、CrowdHandlerの主な機能をご紹介し、初めての「待合室」を作成して、その待合室をサイトに連携させる方法をご説明します。

初回ログイン

管理パネルに初めてログインすると、次のような画面が表示されます:

CrowdHandlerでは現在、お客様のドメインを経由するトラフィックが確認されていないため、ページが静まり返っています。アカウントは開設したばかりで、まだウェブサイトにコードをインストールしておらず、ドメイン内のすべてのURLを保護するには「待機室」が必要です。

「ウェイティングルーム」自体は、CrowdHandlerがお客様に代わってホストするウェブページです。ウェイティングルームにアクセスした訪問者は、最終的にお客様のウェブサイトにリダイレクトされます。訪問者をどのようにお客様のページへ誘導するかについては、以下をご覧ください。

待合室を作成する

「部屋を追加」ボタンをクリックすると、「部屋を追加」画面に移動します。

さあ、「ルームを作成」ボタンをクリックしてください! ダッシュボードに戻ります。

待合室をご覧ください

新しい「Waiting Room」がダッシュボードに表示されます。ドメイン内のすべてのURLを保護する設定は完了しており、現在有効になっています。信じられないですか?「Waiting Room」のリンクをクリックすると、新しいタブで「Waiting Room」が開きます。

待合室に訪れたのはあなたが初めてです(まあ、まだできたばかりですから)、次のような画面が表示されるはずです:

待合室の初期状態

あなたが1番なのは、この「待合室」経由でウェブサイトにアクセスしようとしているユーザーがあなただけだからです。ただし、かなり長い間待たされることになるでしょう。というのも、ドメインの設定時に、イングリッスレートを0に設定したからです。私たちはあなたにこの待合室を体験してほしかったのですが、もしレートをもう少し高く設定していたら、あなたはすぐに通過できてしまっていたでしょう。

ダッシュボードをご覧ください

管理パネルのダッシュボードに戻ってください。1分ほどで、次のような画面が表示されるはずです:

タンブルウィードはもう出ません。ラインの一番上にあるその点は、待機中のあなたです。ラインの一番下にある赤い点はゼロの位置にあり、アクティブなユーザーはおらず、待機中のユーザーのみがいることを示しています。

さあ、その列をスムーズに動かしましょう!

その待機中のユーザーをアクティブなユーザーに変えましょう!さあ、レートを0より大きい値に設定してみてください。レートのスライダーを10まで上げてください。

さて、待合室のタブに戻ってみると、1分もかからずに自分のウェブサイトにリダイレクトされていることが確認できるはずです。

待合室への誘導機能のテストが成功した

ダッシュボードにアクセスして、1分も待たずに、グラフが次のように更新されるのが確認できるはずです:

現在、待機中のユーザーはいません。アクティブなユーザーは1人(あなたです!)です。

このレート設定により、1分間にサイトへのアクセスを許可するユーザー数が制御されます。

レートとキューの理解

ここで少し立ち止まって、「レート」とは何か、そしてCrowdHandlerにおけるキューの仕組みについて考えてみましょう。ここで覚えておくべき重要な点は次の通りです:

自分が対応できるペースを設定しておけば、待合室は必要な時にのみ作動し、必要ない時は作動しません。

弊社では、ユーザーがサイトにアクセスするたびにその数をカウントし、1分あたりのアクセス数を集計しています。アクセス数は1分あたり1件という低い数値から、ご利用のプランでサポートされている上限値までさまざまです。CrowdHandlerをご利用のお客様の中には、自社のシステムがどの程度のアクセス数に対応できるか把握していない方も多くいらっしゃいますが、弊社ではリアルタイムでその容量を算出する自動調整機能を備えています。

  • ユーザー数が設定した基準値を下回っている間は、そのユーザーを審査なしで通過させます。
  • ユーザー数が設定された上限を超えた時点で、ユーザーを待機室へリダイレクトし始めます。
  • その後、その料金で再びあなたのサイトへアクセスできるようになります。

以上です!これが金利と待合室の関係です。また、これが長期的にどのように展開していくかを知っておくことも重要です:

  • サイトへのアクセスを試みるユーザー数が、設定されたレートを一貫して上回っている場合、それらのユーザーは時間の経過とともに長くなる待ち行列に加わることになります。
  • サイトへのアクセスを試みるユーザー数が設定したレートを下回ると、待ち行列は緩和され、最終的に待機室が解除されます。

CrowdHandler にトラフィックを送信する

つまり、「ウェイティングルーム」は訪問者を一時的に保留し、制御された方法でウェブサイトへ誘導してくれることがわかりました。素晴らしいですね! では、これがどのようにサイトを保護するのでしょうか? 実は、サイトへのトラフィックが許容範囲を超えた場合、訪問者をウェブサイトから「ウェイティングルーム」へリダイレクトする必要があります。そうすることで、CrowdHandlerが訪問者を一時的に保留し、制御された方法でサイトへ誘導することができるのです。

CrowdHandler へトラフィックをリダイレクトするには、いくつかの方法があります:

訪問者を「待合室」に誘導するためのいずれかの連携機能を追加するまでは、トラフィックは「待合室」に送られません。

それでは、実装方法を選択しましょう。

この簡単なセットアップでは、JavaScript を選択します。

サイトに JavaScript を追加する方法は、サイトの構成によって異なります。JavaScript のインストール方法については専用のガイドをご用意しています。そちらを必ずよくご確認ください。ダッシュボードには、ウェブページに貼り付ける準備が整った JavaScript のスニペットが表示されます。その内容は、次のようなものになります:

<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=12533683a055c52b09e383c50a3e5c65b6a33ba17629af3166d6dedd647020a6"></script>

クリップボードのアイコンをクリックすると、スクリプトタグをコピーできます。

コードやマークアップを編集する場合は、そのスクリプトを他のスクリプトタグよりも前に配置するようにしてください。

HTML 内の JS スニペットの推奨配置位置

ウェブビルダー(SquareSpaceなどのサービス)をご利用の場合は、コントロールパネルやエディタ内で「コード挿入」や「カスタムHTML」といったオプションを探してください。そのオプションがある場合は、スクリプトをヘッダーに配置し、他のスクリプトよりも先に配置するようにしてください。

SquareSpaceなどのWebビルダーにおけるコードインジェクションの例

さて、コードが正しくインストールされているか確認するために、自分のウェブサイトに戻って、いくつかのページをクリックして回ってみました。ダッシュボードに戻ると、次のような表示になっています:

JSのインストール後のダッシュボードの初期画面

このグラフは、あなたが待合室を出た時刻を示しています。

ヒント 4:JavaScript による統合は迅速かつ便利で、多くのお客様の要件を満たします。しかし、完全に安全であるとは言い切れません。そのため、運用が軌道に乗ったら、サーバーサイド API ベースの統合を検討することをお勧めします。あるいは、セキュリティと利便性の観点から、DNS ベース、CDN ベース(CloudflareCloudFront)、またはWordPress との統合を検討してください。

待合室のメッセージを変更する

訪問者がCrowdHandlerの待合室にリダイレクトされると、何が起きたのか、現在どこにいるのかを知りたがるでしょう。待合室の設定を編集することで、状況に関する詳細情報を提供することができます。ダッシュボードから、編集アイコンを選択してください:

待合室の編集ボタン

ここでは、待合室の名前やメッセージを変更することができます:

各フィールドの機能に関する詳細は、ヘルプ記事「待合室の編集」をご覧ください。また、テンプレートをカスタマイズするオプション(有料プランのみ)や、独自のロゴを追加するオプション(すべてのプラン)もあります。これらについては、こちらの記事「テンプレートの追加」をご覧ください。

これが正常に動作したかどうかを確認するには:

  1. ダッシュボードで流入レートを0に戻す
  2. 新しいシークレット/プライベートタブを開き、そこから私のサイトにアクセスしてください。(待合室に直接アクセスすることもできますが、そうすれば、正しく待合室に誘導されているか確認することもできます。)

ルーム名が更新され、現在は以下のカスタムメッセージが表示されています:

待合室のカスタマイズに成功しましたヒント 5:すでに「待合室」を経由したことがある場合は、シークレットモードまたはプライベートセッションでテストを行うか、別の端末でテストを行う必要があります

まとめ

このガイドでは、以下の内容について解説しました:

  • 最初の待合室
  • レート設定を活用して、待合室から自社ウェブサイトへのリダイレクトを制御する方法
  • この統合機能により、トラフィックが「待合室」にどのように誘導されるか
  • 訪問者に有益な情報を提供するために、待合室をカスタマイズする方法

この製品についてさらに理解を深めるために、以下の手順を試してみてください:

  1. JavaScriptの統合
  2. 待合室の編集
  3. キューの仕組み
  4. API連携の基礎