Live Agent Transfer

1. はじめに

最終更新日: 2021 年 8 月 23 日

ビジネス メッセージでのライブ エージェントへの転送

Business Messages のライブ エージェント転送機能を使用すると、エージェントはボットとして会話を開始し、会話の途中でライブ エージェント（人間の担当者）に切り替えることができます。bot は営業時間などの一般的な質問に対応し、ライブ エージェントはユーザーのコンテキストにアクセスして、カスタマイズされたエクスペリエンスを提供できます。この 2 つのエクスペリエンス間の移行がシームレスに行われると、ユーザーは質問に迅速かつ正確に回答を得ることができ、リターン エンゲージメント率の向上と顧客満足度の向上につながります。

この Codelab では、ライブ エージェント転送機能を最大限に活用する方法について説明します。

作成するアプリの概要

この Codelab では、ライブ エージェント転送イベントを送受信できるエージェントの Webhook を作成します。スターター コードで提供される基本的な UI を使用して、作成したものをテストします。

注: この Codelab の受講者は、すでにパートナーとして登録されており、サポートチームから承認を得ていることを前提としています。まだ登録されていない場合は、ビジネス メッセージに登録し、承認を得たうえでこの Codelab を開始してください。

学習内容

• 会話の状態を保存して管理する方法。
• Business Messages を使用してライブエージェント転送イベントを送信する方法。
• エージェントとして会話に参加するための Webhook と基本的な UI を設定する方法。
• Business Messages API の使用に関するベスト プラクティス。

この Codelab では、ビジネス メッセージ API を使用してライブ エージェント転送を実装する方法について説明します。各ステージのスターター コードを確認できますが、実装する必要があるのは Business Messages に関連するコードのみです。

必要なもの

• ビジネス メッセージ エージェント（サービス アカウント キーを含む）。エージェントを作成するには、エージェントの作成ガイドをご覧ください。
• エージェントの GCP プロジェクトにリンクされた Cloud Datastore の構成。この設定には、Cloud Datastore クイックスタートを使用できます。Cloud Datastore の使用方法を知る必要はありません。
• Google Cloud SDK と Node.js（バージョン 10 以降）がインストールされているコンピュータ。
• ユーザー エクスペリエンスをテストするための Android デバイス（バージョン 5 以降）または iOS デバイス。
• ウェブ アプリケーション プログラミングの経験。少量の JavaScript コードを記述し、記述したコードのデバッグが必要になる場合があります。

2. エコーボットを作成する

このステップでは、「エコー bot」と呼ばれる基本的な bot 代表をデプロイします。この bot は、ユーザーのメッセージを受け取り、Cloud Datastore の会話スレッドに記録してから、同じコンテンツで応答してユーザーのメッセージを「エコー」します。基本的なボットとロギング インフラストラクチャが完成したら、後の手順でそれらを基にライブ エージェント転送の実装を完成させることができます。

スターター コードを取得する

ターミナルで、次のコマンドを使用して、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

ヒント: サービスキーの設定やダウンロードについてサポートが必要な場合は、サービス アカウントの管理に関する Google Cloud ガイドをご覧ください。

スターター コードをデプロイする

ターミナルで、サンプルの 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/）。

ヒント: ウェブフックの設定方法について復習が必要な場合は、ビジネス メッセージのセットアップ ガイドのWebhook を設定するセクションをご覧ください。

次に、[Agent information] ページで、メインのインタラクション タイプと予備のインタラクション タイプをそれぞれ [Bot] と [Human] に設定します。

エコー bot との会話

デベロッパー コンソールでエージェントを開きます。[概要] ページが表示され、エージェントの詳細を確認できます。モバイル テストデバイスに一致するエージェント テスト URL をコピーします。モバイル デバイスでこの URL を使用して、エージェントの会話サーフェスを起動します。

いくつかのメッセージを送信して、エージェントとやり取りします。会話型サーフェスは、ユーザーが発言した内容のみをコピーするため、ユーザー エクスペリエンスはあまり向上しません。実際に誰かと話す方法があればいいのに。

3. 会話に参加する

では、ライブ エージェントの視点から会話を見てみましょう。ライブ エージェントは、会話に参加する前に、会話 ID など、会話に関するいくつかの情報を把握しておく必要があります。ユーザーがライブ エージェントとの会話をリクエストしたかどうかを把握することも役立ちます。このステップでは、基本的な CRM（顧客管理）ページを使用してこの情報を確認し、ライブ エージェントとして会話に参加します。

このステップのスターター コードでは、エージェントの進行中の会話スレッドをすべて一覧表示する基本的な CRM を追加します。その CRM を見て、ライブ エージェントの注意が必要な会話を確認しましょう。

step-2 ディレクトリに移動し、前の手順と同じようにアプリを再度デプロイします。

アプリをデプロイすると、ターゲット URL が表示されます。ブラウザでこの URL に移動すると、前の手順で開始した会話スレッドを含むリストが表示されます。この会話ではエコーボットがエージェントの代表として機能しているため、会話の状態は現在「Bot-managed」です。

[チャットに参加] ボタンが表示されますが、まだ何も起こりません。また、このインターフェースでは、ユーザーがライブ対応のエージェントと話したいかどうかを判断することもできません。

ビジネス メッセージには、ユーザーがライブ対応のエージェントと話したいときに通知するライブ対応のエージェントのリクエスト イベントが用意されています。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 ディレクトリが含まれています。これらのディレクトリには、特定のステップの完全な実装を含むアプリ全体のコピーが含まれています。

実装を完了してアプリを再デプロイしたら、モバイル デバイスの会話のオーバーフロー メニューを使用して、人間のエージェントをリクエストします。

ヒント: オーバーフロー メニューに [Message a live agent] オプションが表示されない場合は、ビジネス メッセージ コンソールでエージェントに人間とのやり取りタイプが設定されていることを確認してください。

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 イベントを投稿する必要があります。

リクエスト ペイロードを作成するには、次の表に示すフィールドを設定する必要があります。

フィールド名	ヒント
parent	'conversations/{conversationId}' に設定します。
eventId	イベントのランダムな ID を生成します。
auth	提供された initCredentials メソッドを使用します。
resource	これがイベントの本文です。eventType と representative を設定する必要があります。

create メソッドのリファレンス ページまたはイベントのリファレンス ページをご覧ください。

実装が完了したら、アプリを再デプロイして [チャットに参加] ボタンをクリックします。[Joined conversation]（会話に参加しました）ダイアログが表示され、チャットのステータスが [Live 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 は、このメソッドを使用してエコーボットからレスポンスを送信します。このメソッドは、まず会話の 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 をご覧ください。

• オンラインで購入して店舗で受け取る（パート 1）
• オンラインで購入して店舗で受け取る（パート 2）

参考資料

• bot からライブ対応のエージェントへの引き継ぎガイドで、ライブ対応のエージェントへの引き継ぎの基本を確認します。
• Dialogflow ガイドに沿って、エコーボットを FAQ ボットにアップグレードします。

リファレンス ドキュメント

• メソッド: conversations.events.create
• メソッド: conversations.messages.create
• リソース: Event
• 代表