1. はじめに
最終更新日: 2021 年 8 月 23 日
ビジネス メッセージによるエージェントの Live Transfer
ビジネス メッセージの人間のエージェント転送機能を使用すると、エージェントは bot として会話を開始し、会話中に人間のエージェント（人間の担当者）に切り替えることができます。bot は営業時間などの一般的な質問を扱い、人間のエージェントはユーザーのコンテキストにアクセスしやすい、カスタマイズされたエクスペリエンスを提供できます。これら 2 つのエクスペリエンス間の移行がシームレスになれば、ユーザーは質問に対する回答を迅速かつ正確に得ることができ、結果としてリターン エンゲージメント率と顧客満足度が向上します。
この Codelab では、ライブ対応のエージェント転送機能を最大限に活用する方法を説明します。
作成するアプリの概要
この Codelab では、エージェントのライブ転送イベントを送受信できる Webhook を作成します。スターター コードで提供される基本的な UI を使用して、作成したものをテストします。
学習内容
- 会話の状態を保存、管理する方法。
- ビジネス メッセージを使用して人間のエージェント転送イベントを送信する方法。
- エージェントとして会話に参加するための Webhook と基本 UI を設定する方法。
- Business Messages API を使用するためのベスト プラクティス。
この Codelab では、Business Message API を使用して Live Agent 転送を実装することに重点を置いています。各ステージのスターター コードを読み上げることはできますが、実装する必要があるのはビジネス メッセージに関連するコードのみです。
必要なもの
- ビジネス メッセージ エージェント（サービス アカウント キーを含む）。エージェントを作成するには、エージェントの作成ガイドに沿って作成します。
- エージェントの GCP プロジェクトにリンクされている有効な Cloud Datastore 構成。この設定は、Cloud Datastore クイックスタートを使用して行うことができます。Cloud Datastore の使用方法を知る必要はありません。
- Google Cloud SDK と Node.js（バージョン 10 以降）がインストールされているパソコン。
- ユーザー エクスペリエンスをテストするための Android デバイス（バージョン 5 以降）または iOS デバイス。
- ウェブ アプリケーションのプログラミング経験少量の JavaScript コードを記述しますが、記述内容のデバッグが必要になることもあります。
2. エコーボットを作成する
このステップでは、「Echo bot」という基本的な bot 担当者をデプロイします。この bot はユーザー メッセージを受け取り、Cloud Datastore の会話スレッドに記録してから、同じ内容で応答してユーザーのメッセージを「エコー」します。基本的な bot とロギング インフラストラクチャを用意したら、それらを追加して後のステップで完全なライブ エージェント転送の実装を作成できます。
スターター コードを取得する
ターミナルで次のコマンドを使用して、プロジェクトの作業ディレクトリに Live Agent Transfer のスターター コードのクローンを作成します。
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 に記録します。
エージェントを設定してください
Business Communications デベロッパー コンソールの [アカウント設定] ページに移動し、デプロイしたアプリケーションの URL に Webhook を設定します。例: https://PROJECT_ID.appspot.com/callback/
次に、[エージェント情報] ページで、メインとサブのインタラクション タイプをそれぞれボットと人間に設定します。
エコーボットとの会話
Play Console でエージェントを開きます。エージェントの詳細を確認できる [Overview]（概要）ページが表示されます。モバイル テストデバイスと一致するエージェントのテスト URL をコピーします。モバイル デバイスでこの URL を使用して、エージェントの会話サーフェスを起動します。
いくつかのメッセージを送信してエージェントと対話します。会話の画面はユーザーが話した内容をコピーするだけであり、ユーザー エクスペリエンスはあまり役に立ちません。実在する人に話しかける方法さえあればいいのに！
3. 会話に参加する
それでは、ライブ対応のエージェントの視点から会話を見てみましょう。ライブ対応のエージェントは、参加する前に会話についていくつかの情報（会話 ID など）を把握しておく必要があります。また、お客様がライブ対応のエージェントとの通話をリクエストしているかを確認することも有用です。このステップでは、基本的な CRM（顧客管理）ページでこの情報を表示し、ライブ対応のエージェントとして会話に参加します。
このステップのスターター コードでは、エージェントの進行中の会話スレッドをすべてリストする基本的な CRM が追加されます。その CRM を見て、人間のエージェントによる確認が必要な会話を確認しましょう。
step-2 ディレクトリに移動し、前の手順で行ったようにアプリを再度デプロイします。
アプリをデプロイすると、ターゲット URL が表示されます。ブラウザでこの URL に移動し、前の手順で始めた会話スレッドを含むリストを表示します。エコー bot がこの会話でエージェントを代表して機能しているため、会話の状態は現在「bot 管理」になっています。
[チャットに参加] ボタンが表示されますが、まだ何も起こりません。また、ユーザーがライブ対応のエージェントと話すことを希望しているかどうかを、このインターフェースから判断することはできません。
ビジネス メッセージは、ユーザーがライブ対応のエージェントとの会話を希望するタイミングを示す、ライブ対応のエージェント リクエスト イベントを提供します。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 に戻ると、会話スレッドに「Live agent requested」というメッセージが表示されるはずです。このユーザーは人間によるサポートを必要としています。ボタンを機能させるには、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 と agent を設定する必要があります。 |
詳しくは、create メソッドのリファレンス ページまたはイベント リファレンス ページをご覧ください。
実装が完了したら、アプリを再デプロイし、[Join chat] ボタンをクリックします。[会話に参加しました] ダイアログが表示され、チャット ステータスが [チャット] に変わります。モバイル デバイスで会話を表示すると、人間のエージェントが参加したというメモがチャットに表示されます。
これで完了です。次のステップでは、人間のエージェントがユーザーとやり取りできるようにする方法を説明します。
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 ではすでに、このメソッドを使用して echo bot からレスポンスを送信しています。このメソッドは、まず受信メッセージ データを会話の Cloud Datastore オブジェクトに保存します。その後、レスポンス メッセージを送信します。作成されたメッセージ オブジェクト（特に代表的なタイプ）を詳しく見てみましょう。
次に、/sendMessage エンドポイントを自分で実装します。ほとんどの処理には、既存の storeAndSendResponse メソッドを使用できます。重要なのは、正しい代表者を設定することです。
これがうまく機能したら、アプリを再デプロイし、CRM での会話に戻ります。これで、自分のメッセージがチャットの履歴に表示されるようになりました。エージェントのメッセージはモバイル テスト デバイスに表示されます。
先に進む前に、新しいエンドポイントの仕組みを理解しておいてください。次のステップでは、会話から退出するために独自のエンドポイントを追加します。
5. 会話から退出する
ユーザーの質問に対応した後で、会話から退出して、ユーザーにもう一度 bot と話しかけてもよいでしょう。ビジネス メッセージでは、この変更は 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 から直接メッセージを送信することで、ユーザーの混乱が減り、エクスペリエンスが向上します。
これで bot が処理を行っているので、人間のエージェントは別の会話に自由に参加できます。好きなだけサンプルコードと CRM を試してみてください。ビジネスのライブ対応のエージェント転送エクスペリエンスについて、さまざまなアイデアをテストして、自分の結果を確認します。
6. まとめ
これで、Live Agent Transfer の Codelab は完了です。
エージェントのライブ転送を開始から終了まで処理できるエージェントを作成できました。また、Cloud Datastore との会話の状態を追跡する方法も学びました。
人間のエージェントによる転送では、一般的なリクエストを自分の bot に任せつつ、人間のエージェントはより複雑な問い合わせに対応できます。カスタマイズされた便利な新しい体験でユーザーの満足度が高まるため、リピーターが増え、ビジネスを友人におすすめする可能性も高まります。
次のステップ
以下の Codelab をご覧ください。
参考資料
- 人間のエージェントから人間のエージェントへの引き継ぎガイドで、人間のエージェントへの転送の基礎を確認してください。
- Dialogflow ガイドを使用して、echobot を FAQ bot にアップグレードします。