この Codelab について
1. はじめに
最終更新日: 2021 年 8 月 23 日
ビジネス メッセージでのリアルタイム エージェント転送
Business Messages のライブ対応エージェントへの転送機能を使用すると、エージェントはボットとして会話を開始し、会話の途中でライブ対応エージェント（人間の担当者）に切り替えることができます。ボットは営業時間などの一般的な質問に対応し、ライブ対応エージェントはユーザーのコンテキストにアクセスしてカスタマイズされたエクスペリエンスを提供できます。これらの 2 つのエクスペリエンスの切り替えがシームレスであれば、ユーザーは質問に迅速かつ正確に回答を得ることができ、再エンゲージメント率の向上と顧客満足度の向上につながります。
この Codelab では、リアルタイム エージェント転送機能を最大限に活用する方法を学びます。
作成するアプリの概要
この Codelab では、エージェントがリアルタイムで転送イベントを送受信できる Webhook を作成します。スターター コードで提供される基本的な UI を使用して、作成した内容をテストします。
学習内容
- 会話の状態を保存して管理する方法。
- ビジネス メッセージを使用して、エージェント間のリアルタイムの転送イベントを送信する方法。
- エージェントとして会話に参加するための Webhook と基本的な UI を設定する方法。
- Business Messages API の使用に関するベスト プラクティス。
この Codelab では、Business Message API を使用してリアルタイム エージェント転送を実装することに焦点を当てます。各ステージのスターター コードを確認できますが、実装する必要があるのはビジネス メッセージに関連するコードのみです。
必要なもの
- ビジネス メッセージ エージェント（サービス アカウント キーを含む）。エージェントを作成するには、エージェントを作成するガイドをご覧ください。
- エージェントの GCP プロジェクトにリンクされた、動作する Cloud Datastore 構成。Cloud Datastore のクイックスタートを使用して設定できます。Cloud Datastore の使用方法を知っている必要はありません。
- Google Cloud SDK と Node.js（バージョン 10 以降）がインストールされたコンピュータ。
- ユーザー エクスペリエンスをテストするための Android デバイス（バージョン 5 以降）または iOS デバイス。
- ウェブ アプリケーション プログラミングの経験。少量の JavaScript コードを記述し、記述したコードをデバッグする必要がある場合があります。
2. エコーボットを作成する
このステップでは、「エコーボット」と呼ばれる基本的なボット レプリカをデプロイします。この bot は、ユーザーのメッセージを受け取り、Cloud Datastore の会話スレッドにログに記録し、同じコンテンツで応答してユーザーのメッセージを「エコーバック」します。基本的なボットとロギング インフラストラクチャを構築したら、後続のステップで、それに追加して完全なライブ エージェント転送を実装できます。
スターター コードを取得する
ターミナルで、次のコマンドを使用して、リアルタイム エージェント転送のスターター コードのクローンをプロジェクトの作業ディレクトリに作成します。
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
スターター コードを理解する
この Codelab で使用する開始用コードの構造を見てみましょう。
step-1 ディレクトリに移動して、その内容を表示します。次の要素が含まれています。
- bin: このディレクトリには、サーバーをセットアップして構成する www 開始スクリプトが含まれています。
- libs: このディレクトリには
datastore_util.jsが含まれています。ここには、Cloud Datastore への読み取りと書き込みを行うための便利なメソッドが含まれています。このファイルの仕組みを理解する必要はありません。利用可能なメソッドとその機能のみをメモします。 - resources: サービス アカウント キーが
credentials.jsonというファイルとして含まれています。 - routes:
index.jsファイルには、Webhook とそのすべてのヘルパー メソッドが含まれています。これは、これから作業して追加するメインのファイルです。 - views: このディレクトリには、UI 要素の EJS テンプレート ファイルが含まれています。後でさらにファイルを追加します。
- app.js、app.yaml、package.json: これらのファイルは、アプリケーションとその依存関係を構成します。
デプロイする前に、GCP サービス アカウント キーをダウンロードし、JSON 認証情報ファイルをサンプルコードの各リソース ディレクトリにコピーします。この操作は、Codelab のすべてのステップで行う必要があります。
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
スターター コードをデプロイする
ターミナルで、サンプルの step-1 ディレクトリに移動します。次に、API への登録に使用したプロジェクト ID を設定して、Google Cloud プロジェクトを使用するように gcloud ツールを設定します。
gcloud config set project <PROJECT_ID>
アプリケーションをデプロイするには、次のコマンドを実行します。
gcloud app deploy
最後のコマンドの出力に記載されている、デプロイしたアプリケーションの URL をメモします。
Deployed service [default] to [https://PROJECT_ID.appspot.com]
デプロイしたスターター コードには、ビジネス メッセージからメッセージを受信するための Webhook を持つウェブ アプリケーションが含まれています。アプリケーションはメッセージをユーザーにエコーバックし、メッセージ スレッドを Cloud Datastore にログに記録します。
エージェントを設定してください
ビジネス コミュニケーション デベロッパー コンソールの [アカウント設定] ページに移動し、デプロイされたアプリケーションの URL に Webhook を設定します。例: https://PROJECT_ID.appspot.com/callback/。
次に、[エージェント情報] ページで、メインのインタラクション タイプとセカンダリのインタラクション タイプをそれぞれ「bot」と「human」に設定します。
Echo bot との会話
デベロッパー コンソールでエージェントを開きます。[概要] ページが表示されます。ここで、エージェントの詳細を確認できます。モバイル テストデバイスと一致するエージェント テスト URL をコピーします。モバイル デバイスでこの URL を使用して、エージェントの会話型サーフェスを起動します。
エージェントにメッセージを送信してやり取りします。会話サーフェスは、ユーザーが言ったことをコピーするだけなので、あまり便利なユーザー エクスペリエンスではありません。実際に人と話せる方法があればいいのに。
3. 会話に参加する
では、人間のエージェントの視点から会話を見てみましょう。ライブ エージェントは、会話に参加する前に、会話 ID など、会話に関するいくつかの情報を把握する必要があります。ユーザーがエージェントとのリアルタイムの会話をリクエストしたかどうかも確認しておくと便利です。このステップでは、基本的な CRM（顧客管理）ページを使用してこの情報を表示し、ライブ エージェントとして会話に参加します。
このステップのスターター コードでは、エージェントが現在進行中のすべての会話スレッドを一覧表示する基本的な CRM を追加します。CRM で、ライブ対応エージェントの注意を必要とする会話を確認しましょう。
step-2 ディレクトリに移動し、前の手順と同じようにアプリを再度デプロイします。
アプリをデプロイすると、ターゲット URL が表示されます。ブラウザでこの URL に移動すると、前の手順で開始した会話スレッドを含むリスティングが表示されます。この会話ではエコーボットがエージェントの代理として機能しているため、会話のステータスは現在「ボット管理」になっています。
[チャットに参加] ボタンは表示されますが、まだ機能しません。また、このインターフェースからは、お客様が人間のエージェントと話したいかどうかもわかりません。
ビジネス メッセージには、ユーザーが人間のエージェントと話したいときに通知する人間のエージェント リクエスト イベントがあります。その状態をトラッキングして UI に表示する必要があります。
index.js のコールバック メソッドを見てみましょう。TODO コメントは、人間のエージェントに対するユーザーのリクエストをキャッチしてスレッドの状態を更新する必要がある場所を示します。
step-2/routes/index.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
libs/datastore_utils.js のメソッドを使用して、現在の会話スレッドを読み込み、その状態を QUEUED_THREAD_STATE に更新する必要があります。
対処方法がわからない場合は、解決策をご覧ください。スターター コードには、コードを記述する必要がある各ステップの下に solutions ディレクトリが含まれています。これらのディレクトリには、特定のステップの完全な実装を含むアプリ全体のコピーが含まれています。
実装を完了してアプリを再デプロイしたら、モバイル デバイスの会話のオーバーフロー メニューを使用して、リアルタイム エージェントをリクエストします。
CRM に戻ると、会話スレッドに「リアルタイム エージェントがリクエストされました」というメモが表示されます。このユーザーには人間によるサポートが必要です。ボタンを機能させるには、joinConversation エンドポイントを実装する必要があります。
/joinConversation のスタブ化されたメソッドで、他の TODO コメントを見つけます。
step-2/routes/index.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
スレッドの状態を再度更新する必要があります。今回は LIVE_AGENT_THREAD_STATE にします。また、Business Messages API の conversations.events.create メソッドを使用して REPRESENTATIVE_JOINED イベントを投稿する必要があります。
リクエスト ペイロードを作成するには、次の表に示すフィールドを設定する必要があります。
フィールド名 | ヒント |
| これを「conversations/{conversationId}」に設定します。 |
| イベントに独自のランダム ID を生成します。 |
| 提供された |
| これはイベント本文そのものです。eventType と代表者を設定する必要があります。 |
詳しくは、create メソッドのリファレンス ページまたはイベントのリファレンス ページをご覧ください。
実装が完了したら、アプリを再デプロイし、[チャットに参加] ボタンをクリックします。[会話に参加しました] ダイアログが表示され、チャットのステータスが [チャット中] に変わります。モバイル デバイスで会話を見ると、チャットにライブ エージェントが参加したことを示すメモが表示されます。
これで、次のステップでは、人間のエージェントがユーザーと会話する方法について説明します。
4. ライブ対応エージェントとしてメッセージの送信
会話に参加したら、リアルタイム エージェントとしてメッセージを送信します。
step-3 ディレクトリに移動してアプリを再デプロイします。CRM で、前の手順のスレッドをクリックします。基本的なチャット インターフェースが表示されます。ここで、ユーザーのメッセージがリアルタイムで表示されます。
ただし、エージェントとしてメッセージを送信することはまだ実装されていません。この手順で完了する必要があります。
routes/index.js ファイルを開き、新しく追加された 3 つのエンドポイントを確認します。
/messages:messages.ejsビュー ファイルを取得してブラウザにレンダリングします。インデックスから会話スレッドをクリックすると、次のいずれかのページに移動します。/retrieveMessages: スレッドのメッセージ コンテンツを取得し、会話内のすべてのメッセージのフォーマットされたリストを返します。メッセージ ページでは、このエンドポイントが定期的に呼び出され、最新のメッセージが表示されます。/sendMessage: リアルタイム エージェントからユーザーにメッセージを送信します。メッセージ ページでは、[送信] をクリックするとこの関数が呼び出されます。現在は実装されていません。
既存の storeAndSendResponse メソッドを見てみましょう。
step-3/routes/index.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
Webhook はすでにこのメソッドを使用して、エコーボットからレスポンスを送信しています。このメソッドは、まず受信したメッセージ データを会話の Cloud Datastore オブジェクトに保存します。その後、レスポンス メッセージを送信します。作成されるメッセージ オブジェクト、特に代表タイプをよく確認します。
次に、/sendMessage エンドポイントを実装します。ここでは、既存の storeAndSendResponse メソッドを使用して、ほとんどの作業を行うことができます。重要なのは、正しい担当者を設定することです。
これが機能したら、アプリを再デプロイし、CRM の会話に戻ります。メッセージがチャット履歴に表示されます。エージェントのメッセージは、モバイル テストデバイスにも表示されます。
次に進む前に、新しいエンドポイントの仕組みを理解してください。次のステップでは、会話から離脱するための独自のエンドポイントを追加します。
5. 会話から退出する
ユーザーの質問に回答したら、会話を終了して、ユーザーがボットと再度会話できるようにすることもできます。ビジネス メッセージでは、この変更は REPRESENTATIVE_LEFT イベントによって通知されます。
step-4 ディレクトリに移動し、アプリを再デプロイして、会話スレッドに戻ります。スレッドの下部に [会話を閉じて退出] リンクが表示されるようになりました。leaveConversation エンドポイントが実装されていないため、このリンクはまだ機能しません。
index.js ファイルを確認します。新しい leaveConversation エンドポイントを作成するよう指示する TODO コメントがあります。
step-4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
これを実装するには、これまでの Codelab で学んだことをすべて組み合わせる必要があります。このエンドポイントは、次のことを行う必要があります。
- スレッドを
BOT_THREAD_STATEに更新します。 REPRESENTATIVE_LEFTイベントを送信します。- 会話でメッセージを送信して、エコーボットと話していることをユーザーに伝えます。
storeAndSendResponseメソッドを使用します。担当者がBOTに戻ったことを確認してください。
最後のステップでは、ユーザーに会話のステータスを明確に伝えます。エージェントがチャットを離れると、ユーザーにイベントが表示されますが、エコーボットと再び話していることをユーザーが認識するとは限りません。bot から直接メッセージを送信することで、ユーザーの混乱を減らし、エクスペリエンスを向上させることができます。
ボットが対応しているため、エージェントは別の会話に参加できます。サンプルコードと CRM を自由に試してみてください。ビジネスのリアルタイム エージェント転送機能について、さまざまなアイデアをテストして、どのような結果になるかを確認します。
6. まとめ
リアルタイム エージェントへの転送の Codelab を完了しました。
ライブ エージェントの転送を最初から最後まで処理できるエージェントを作成しました。また、Cloud Datastore を使用して会話の状態を追跡する方法についても学びました。
ライブエージェントへの転送では、一般的なリクエストはボットに任せ、ライブエージェントはより複雑なお問い合わせに対応できます。ユーザーは、カスタマイズされた新しい便利なエクスペリエンスに満足し、再訪したり、友人におすすめしたりする可能性が高くなります。
次のステップ
以下の Codelab をご覧ください。
参考資料
- bot からライブ対応のエージェントへの引き継ぎガイドで、ライブ対応のエージェントへの転送の基本を確認する。
- Dialogflow ガイドで、エコーボットをよくある質問ボットにアップグレードします。