JavaScriptの統合：インストール
CrowdHandlerのJavaScript統合機能は、ウェブサイトに待合室を追加するための最も迅速かつ簡単な方法ですが、いくつかの制限があります。その詳細については以下に説明していますので、JavaScript統合機能の設定を行う前に必ずお読みください。
CrowdHandlerAPI スクリプトをサイトに追加するには、2つの方法があります。
HTMLやテンプレートにアクセスできる場合は、スクリプトを手動で追加することができます。
もしそうしない場合、あるいは手を汚したくない場合は、Google タグ マネージャーを使ってスクリプトを追加することができます。
パブリックAPIキーの取得
いずれの場合も、パブリックAPIキーが必要になります。
パブリックAPIキーを取得するには、 https://admin.crowdhandler.com にアクセスし、「アカウント」ページに移動してください。
[アカウントナビゲーション]内の「API」をクリックしてください アカウントのナビゲーションをクリックしてください。
画面の上部に、パブリックAPIキーが表示されます。
クリップボードをクリックしてパブリックAPIキーをコピーするか、コードを選択してコピーすることができます。
スクリプトを手動で追加する
保護したいすべてのページの「head」セクションに、以下のスクリプトタグを挿入してください。
Replace <ch-public-key> with your Public API key.
<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=<ch-public-key>"></script>
例：パブリックAPIキーが「123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123」の場合、スクリプトタグは次のようになります。
<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123"></script>
注：このスクリプトはできるだけ早く実行することが重要ですので、他のすべてのスクリプトタグよりも前に挿入することをお勧めします。
Google タグ マネージャーの使用
Google タグマネージャー は、ウェブサイトにHTMLやJavaScriptのスニペットを簡単に追加できるタグ管理システムです。弊社では、コードを編集することなく、お客様のサイトでCrowdHandlerの利用を開始できるよう、専用のGTMタグテンプレートを作成しました。
このタグをサイトに追加すると、CrowdHandlerが適用され、当社がユーザー群の処理を行うことができます。このタグは一度追加するだけで済みます。
Important: Before you start, please make sure that Google Tag Manager is set up correctly on your website, according to the Google Tag Manager installation guide. Specifically, make sure that the <script> element of your Google Tag Manager container appears early on in the <head> section of your site and the <noscript> element appears at the beginning of the <body> section.
Google タグ マネージャーを使用して、ウェブサイトにCrowdHandlerを導入する方法は以下の通りです：
1. テンプレートをダウンロードする
この記事の最後にテンプレートがあります。これをパソコンにダウンロードしておいてください。後ほど必要になります。
2. Google タグ マネージャーで新しいテンプレートを作成する
Google タグマネージャーのメニューで [テンプレート] をクリックします
次に、「タグテンプレート」パネルから「新規」を選択します。
3. タグテンプレートをインポートする
Google タグ マネージャーのインターフェースの右上にあるドットをクリックしてメニューを表示し、「インポート」を選択します。
次に、ダウンロードした「template.tpl」ファイルの場所へ移動し、インポートしてください。
「保存」をクリックして、エディタを閉じます。
これで、タグテンプレートが「タグテンプレート」メニューに表示されるはずです。
4. タグテンプレートを追加する
次に、Google タグ マネージャーのメニューから[タグ]を選択し、[新規] をクリックします。
「タグ設定パネル」をクリックし、新しいCrowdHandler JavaScriptテンプレートを選択してください。表示されるまで画面を下にスクロールする必要がある場合があります。
5. CrowdHandler に接続する
サイトをCrowdHandlerに接続するには、 パブリックAPIキーを指定する必要があります。
タグテンプレートの「パブリックAPIキー」欄に貼り付けてください。
このタグはできるだけ早く発火させることが重要ですので、詳細設定を開き、「タグの発火優先度」を高い数値に設定してください。
「トリガー」セクションで、同セクションをクリックし、プラス（+）記号をクリックして新しいトリガーを作成します。
トリガーが本番環境のドメインとプロトコルでのみ発動するように制限する必要があります（ステージング環境や開発環境でテストを行うことを明示的に意図している場合は除きます。その場合は、CrowdHandler上でそれらのドメインが設定されていることを確認する必要があります）。そのため、トリガータイプとして「ページビュー」を選択し、条件として「このトリガーは 特定のページビューで 発動する」を選び、使用ケースに最適な条件を作成してください。
たとえば、「ドメインが以下で始まる」という条件を作成します。 https://my-domain.com という条件を作成すると、トリガーがhttps://my-domain.com でのみ発動するように制限できます。
トリガーに名前を付けて、「保存」ボタンをクリックしてください。
次に、タグの名前を入力して、「保存」ボタンをクリックしてください。
「送信」ボタンをクリックし、次の画面で「公開」を選択して、変更内容を公開してください。
これで完了です！CrowdHandlerスクリプトがサイトに追加されました。これで、私たちは混雑に対応し、あなたは販売に集中できます！