1. はじめに
最終更新日: 2022 年 5 月 11 日
ビジネス メッセージへようこそ
この Codelab では、ビジネス メッセージとの統合の概要について説明します。ビジネス メッセージを使用すると、Google 検索およびマップを介して、お客様が管理しているビジネスとユーザーがつながることができます。たとえば、ビジネス メッセージと直接統合したいと考えている企業、独立系ソフトウェア ベンダーで仕事をしている企業向けのメッセージ ソリューションを構築している企業、あるいはビジネス メッセージを偶然見つけてプラットフォームに手を加えたいという場合もあるでしょう。
どのような目的にしても、この Codelab は最初の方として最適です。このセクションを終えると、ユーザーが操作できる最初のデジタル エージェントが作成されます。もう少し洗練してビジネス メッセージを公開する準備が整うと、数百万人のユーザーにリーチできる可能性があります。
優れたデジタル エージェントの特徴
ビジネス メッセージは会話サーフェスで、モバイル デバイス上でアプリのようなエクスペリエンスを提供します。ユーザーは追加のアプリをインストールしなくても、ビジネスとつながることができます。デジタル エージェントは、ユーザーがやり取りするためのロジックです。ロジックは、クラウドまたはインフラストラクチャにデプロイされたウェブ アプリケーションによって管理されます。ユーザーにどのように対応するかは、あなた次第です。優れたエージェントは、期待値を設定してお客様の関心を維持し、ユーザーのニーズをサポートする機能を提供するためのコンテキストを提供します。
作成するアプリの概要
この Codelab では、Bonjour Meal という架空の会社のビジネス メッセージでデジタル エージェントを作成します。このデジタル エージェントは、「閉店時間はいつですか？」や「オンラインで購入できますか？」などの簡単な質問に答えます。
この Codelab では、ユーザーがデジタル エージェントを通じて商品を購入し、決済代行業者を案内して集金し、架空の商品の店舗受け取りのスケジュールを設定します。
この Codelab では、アプリで次のことをできるようにします。
- 候補ワードで質問に回答する
- デジタル エージェントが回答できる質問をするようお客様をご案内する
- 豊富な会話機能を提供し、ユーザーの会話への参加を維持する
学習内容
- Google Cloud Platform 上の App Engine にウェブ アプリケーションをデプロイする方法また、ngrok を使用してローカル アプリケーションを一般公開でテストすることもできます。
- ウェブ アプリケーション Webhook を使用してユーザーからのメッセージを受信するようにビジネス メッセージ アカウントを設定する方法
- Business Messages API を使用して、カード、カルーセル、会話の候補などのリッチ機能を送信する方法
- ビジネス メッセージによるメッセージの送信方法
この Codelab は、初めてのデジタル エージェントの作成に焦点を当てています。
必要なもの
- 無料の Business Communications デベロッパー アカウントに登録する
- 手順については、デベロッパー サイトをご覧ください。
- バージョン 5 以降を搭載した Android デバイス、または Google マップ アプリがインストールされた iOS デバイス
- ウェブ アプリケーション プログラミングの経験
- インターネット接続
2. 設定方法
API を有効にする
この Codelab では Django アプリケーションを使用するため、Cloud Build API を使用してアプリケーションを App Engine にデプロイします。ngrok を使用している場合は、Cloud Build API を有効にする必要はありません。
Cloud Build API を有効にするには:
- Google Cloud コンソールで Cloud Build API を開きます。
- [有効にする] をクリックします。
サービス アカウントを作成する
Business Communications API と Business Messages API にアクセスするには、サービス アカウントを作成する必要があります。Business Communications デベロッパー コンソールでサービス アカウントの作成に関するドキュメントの手順に沿って操作します。
Django Python EchoBot スターター コードをデプロイする
ターミナルで、次のコマンドを使用して、Django Echo Bot サンプルのクローンをプロジェクトの作業ディレクトリに作成します。
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
サービス アカウント用に作成された JSON 認証情報ファイルをサンプルのリソース フォルダにコピーし、認証情報の名前を「bm-agent-service-account-credentials.json」に変更します。
bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json
ターミナルで、サンプルのステップ 1 ディレクトリに移動します。
ターミナルで次のコマンドを実行して、サンプルをデプロイします。
$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
- PROJECT_ID は、API への登録に使用したプロジェクトのプロジェクト ID です。
最後のコマンドの出力に記載されている、デプロイしたアプリケーションの URL をメモします。
Deployed service [default] to [https://PROJECT_ID.appspot.com]
デプロイしたスターター コードには、ビジネス メッセージからメッセージを受信する Webhook を備えたウェブ アプリケーションが含まれています。このアプリケーションはユーザーにメッセージをエコーバックし、会話サーフェスで利用できる豊富な機能を紹介できます。
Webook を構成する
サービスがデプロイされたので、このアプリケーションの URL を使用して、Business Communications デベロッパー コンソールの [Account settings] ページで Webhook URL を設定します。
Webhook URL は、アプリケーションの URL に「/callback/」を加えたものです。たとえば、https://PROJECT_ID.appspot.com/callback/ のようになります。
Business Communications Console のアカウント設定ページに移動します。右上のナビゲーション バーの下に、GCP プロジェクト名が表示されます。プルダウンが表示された場合は、GCP プロジェクトを選択します。
技術担当者の詳細を入力し、デプロイしたアプリケーションの Webhook URL を使用して Webhook を更新します。
GCP プロジェクトの参照の横にある [保存] をクリックします。
3. 最初のエージェントの作成
Business Communications デベロッパー コンソールを使用する
Business Communications Console で、左上のロゴをクリックしてコンソール ダッシュボードに戻り、[Create agent] をクリックします。エージェントの作成と同時にブランドを作成します。[Agent type]（エージェントの種類）で [Business Messages]（ビジネス メッセージ）を選択し、[Partner information]（パートナー情報）が正しいことを確認します。
[ブランド] に、作成するブランドの名前を入力します。ブランドは取り扱っているビジネスであり、消費者はエージェントと会話できます。[エージェント名] で、ビジネス メッセージの会話でユーザーに表示するものを指定します。架空の Bonjour Meal に関しては、Bonjour Rail は Bonjour Meal レストランを運営する鉄道会社です。ブランドに「Bonjour Rail」、エージェントとして「Bonjour Meal」を指定します。
エージェントは、ブランドを表す会話エンティティです。
[Create agent] をクリックして、コンソールで処理を行います。このリクエストは数秒で、ブランドとエージェントを作成するいくつかのリクエストを Business Communications API に送信します。Business Communications API を直接使用して、エージェントとブランドを作成できます。ドキュメントで、curl リクエストがどのようにコンソールと同じことを行うかをご確認ください。
初めて会話するときは
作成したエージェントを開くと、[Overview] ページが表示され、エージェントの詳細を確認できます。エージェント テスト URL を確認します。これらの URL は、デバイスの会話サーフェスを呼び出すために使用されます。
いずれかのチップをクリックすると、テスト URL をコピーできます。もちろん、テストに使用するデバイスのテスト URL をコピーします。コピーしたメッセージを任意の方法でデバイスに送信してください。
モバイル デバイスでリンクをタップすると、エージェントのテスト URL が事前入力されたビジネス メッセージ エージェント ランチャーが開きます。
[Launch] をタップして、エージェントの会話サーフェスを起動します。
エージェントと対話して、何ができるのかを体感してください。ほとんどの場合、会話サーフェスではメッセージがエコーのみされるはずです。「Hello, World!」のようなメッセージを送信すると、エージェントから同じメッセージが返されます。
デプロイされたアプリケーションには、ビジネス メッセージで利用できる豊富な機能を示すためのロジックも含まれています。
- 「card」を送信すると、リッチカードが呼び出されます。
- 「チップ」を送信すると、候補ワードが呼び出されます
- 「カルーセル」を送信すると、リッチカードのカルーセルが呼び出されます。
これで完了です。これは、エージェントの皆さんとの最初の会話です。
それぞれの豊富な機能を使用して、エージェントとやり取りする人物により適切なコンテキストを提供できます。リッチカードの画像 アセットを送信してアイデアをより効果的に伝えたり、候補ワードを使用して会話をガイドしたりできます。
ウェルカム メッセージの更新と会話チップの使用
デベロッパー コンソールで少し練習して、エージェントのウェルカム メッセージを編集し、候補ワードを活用してユーザーのコミュニケーションを支援してみましょう。
エージェントの [Overview]（概要）ページに移動して [Agent information]（エージェント情報）を選択します。ウェルカム メッセージと会話の冒頭部分までスクロールします。
ウェルカム メッセージ（黄色の入力フィールド）を次のように更新します。
Bonjour Meal スターター エージェントへようこそ。お客様のメッセージをエコーし、プラットフォームでサポートされている豊富な機能の一部をご紹介します。ぜひお試しください。
上の画像の紫色のボックスに表示されている [+ 会話のきっかけを追加] をクリックして、候補ワード、カルーセル、カードを呼び出す会話のきっかけを追加します。追加する会話開始条件には、テキスト コンポーネントと postbackData コンポーネントが必要です。ユーザーに表示されるのはテキストであり、postBack のデータはエージェントの Webhook に送信されるものです。Webhook は、ポストバック データを解析し、適切なレスポンスをユーザーに送信します。
変更後、コンソールの [エージェント情報] は次のようになります。
コンソールの右側に、エージェントがどのように表示されるかを示すプレビューが表示されます。ウェルカム メッセージに、先ほど変更した内容とその下にある候補チップが反映されていることに注目してください。
これは、ユーザー エクスペリエンスがどのようなものになるかを把握するための優れたツールです。これは、エージェントを作成し、サポートするユーザー ジャーニーを計画する際に使用できます。
残念ながら、以前のデータはビジネス メッセージ インフラストラクチャ内にキャッシュされているため、これらの変更が会話にすぐに反映されることはありません。キャッシュは約 2 時間ごとに消去されるので、明日からお試しいただけます。
ここでは、内部の仕組みについて説明します。
4. スターター コードを分析する
ソースコードの概要
デプロイしたスターター コードは、ユーザーにエコー メッセージを送り、リッチカード、カルーセル、または候補ワードを表示できます。ソースコードを深く掘り下げて、その仕組みを理解しましょう。その後、何を変える必要があるかを把握します。
スターター コードは Django プロジェクトです。この Codelab シリーズの後半では、Google Datastore を使用してショッピング カートや関連する会話などのデータを保持します。Django を使ったことがなくても、心配ありません。使い方はとても簡単です。この Codelab を修了すると、その仕組みを理解できます。
大まかに言うと、Django は URL をビューにルーティングし、ビューロジックによって、ブラウザでレンダリングされるテンプレートが生成されます。プロジェクトの urls.py を見てみましょう。
bm-django-echo-bot/bmcodelab/urls.py [31 ～ 37 行目]
from django.urls import include, path
import bopis.views as bopis_views
urlpatterns = [
path('', bopis_views.landing_placeholder),
path('callback/', bopis_views.callback),
]
ここでは 2 つのルートが定義されているため、この 2 つの URL が認識された場合、Django はロジックを実行できます。プロジェクトの URL が https://PROJECT_ID.appspot.com/ の場合、プロジェクトで認識されるルートは次のようになります。
- https://PROJECT_ID.appspot.com/
- https://PROJECT_ID.appspot.com/callback/
どちらの URL ルートも、bopis/views.py の bopis_views を参照しています。このファイルの内容を見てみましょう。まず、bopis_views.landing_placeholder について理解しましょう。
bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [302 ～ 309 行目]
...
def landing_placeholder(request):
return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
<br/><br/>
To message your Bonjour Meal agent, go to the Developer Console and retrieve
the Test URLs for the agent you have created as described in the codelab
<a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...
このロジックは、ウェブサーバーがプロジェクトのルートを指すウェブ リクエストを受け取ると、ウェブサーバーによって実行されます。ここでは、特別なことは何も起こりません。単純に、HTML を含む HTTPResponse を、リクエストを作成したブラウザに返します。そう、プロジェクトのルート URL を開くことはできます。ただし、この Codelab に戻るため、それ以上の作業は必要ありません。
もう 1 つの URL は、同じ bopis/views.py の callback という関数にルーティングされます。この関数を見てみましょう。
bm-django-echo-bot/bopis/views.py [60 ～ 101 行目]
...
def callback(request):
"""
Callback URL. Processes messages sent from user.
"""
if request.method == "POST":
request_data = request.body.decode('utf8').replace("'", '"')
request_body = json.loads(request_data)
print('request_body: %s', request_body)
# Extract the conversation id and message text
conversation_id = request_body.get('conversationId')
print('conversation_id: %s', conversation_id)
# Check that the message and text body exist
if 'message' in request_body and 'text' in request_body['message']:
message = request_body['message']['text']
print('message: %s', message)
route_message(message, conversation_id)
elif 'suggestionResponse' in request_body:
message = request_body['suggestionResponse']['postbackData']
print('message: %s', message)
route_message(message, conversation_id)
elif 'userStatus' in request_body:
if 'isTyping' in request_body['userStatus']:
print('User is typing')
elif 'requestedLiveAgent' in request_body['userStatus']:
print('User requested transfer to live agent')
return HttpResponse("Response.")
elif request.method == "GET":
return HttpResponse("This webhook expects a POST request.")
...
このロジックでは、リクエスト本文の message または suggestionResponse を解析し、その情報を route_message という関数に渡します。メッセージの受信を確認するため、HttpResponse をビジネス メッセージ インフラストラクチャに返します。
これは重要な機能です。このロジックは、エージェントと対話するユーザーからメッセージを受信するウェブ アプリケーションの Webhook です。Webhook を拡張して、Dialogflow などの自動化ツールにメッセージを送信してユーザーの発話内容を理解し、その推論からレスポンスを生成できます。ユーザーがライブ対応のエージェントとつながれるように、メッセージを転送することもできます。次の図を参照してください。
ビジネス メッセージは、メッセージの内容を JSON ペイロードとして Webhook に送信します。この Webhook でライブ対応のエージェントまたは bot として応答するロジックにルーティングされます。この例ではルーティング メカニズムは route_message です。まぁとにかく見てください
bm-django-echo-bot/bopis/views.py [105 ～ 122 行目]
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
else:
echo_message(message, conversation_id)
...
このロジックでは、ユーザーが受信したメッセージの調査を開始します。まず、メッセージはすべての文字を下げることで正規化されます。正規化後、メッセージがファイルの先頭で定義された定数のいずれかに該当するかどうかを確認します。
bm-django-echo-bot/bopis/views.py [40 ～ 42 行目]
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...
つまり、このボットは、この Codelab の前のステップで会話開始条件の postback_data に配置した文字列のいずれかを含むメッセージを解析します。これらの文字列がいずれも表示されない場合は、単に echo_message という関数にメッセージを渡します。これは、メッセージをエコーするものと想像できます。
メッセージの送信
ここまでで、ウェブ アプリケーションがメッセージをどのように受信するかについてご理解いただけたかと思います。すべて Webhook が行います。
では、ビジネス メッセージを使用してユーザーにメッセージを送信する仕組みはどのようになっているのでしょうか。
インフラストラクチャがユーザーに応答したら、そのレスポンスを Business Messages API に送信します。これにより、ユーザーにメッセージが配信されます。
Business Messages API には、Python、Node.js、Java のライブラリが用意されています。REST API も用意しています。REST API を使用すると、インフラストラクチャが Google のライブラリで使用できる言語で書かれていない場合に直接リクエストできます。cURL を使用して特定の会話 ID にメッセージを送信する方法については、メッセージの送信をご覧ください。
この Codelab では、Bonjour Meal のスターター コードにすでに統合されている Python クライアント ライブラリを使用します。このライブラリは、GCP プロジェクトの App Engine にデプロイされているか、ngrok を介してローカルで実行されています。
echo_message 関数を確認し、API を使用してビジネス メッセージにメッセージを送信する方法について説明します。
bm-django-echo-bot/bopis/views.py [199 ～ 212 行目]
...
def echo_message(message, conversation_id):
'''
Sends the message received from the user back to the user.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message)
send_message(message_obj, conversation_id)
...
この関数では、echo_message 関数に渡されたメッセージ変数を使用して BusinessMessagesMessage がインスタンス化されます。インスタンス化されると、オブジェクトは会話 ID とともに send_message に渡されます。
bm-django-echo-bot/bopis/views.py [214 ～ 236 行目]
...
def send_message(message, conversation_id):
'''
Posts a message to the Business Messages API, first sending
a typing indicator event and sending a stop typing event after
the message has been sent.
Args:
message (obj): The message object payload to send to the user.
conversation_id (str): The unique id for this user and agent.
'''
credentials = ServiceAccountCredentials.from_json_keyfile_name(
SERVICE_ACCOUNT_LOCATION,
scopes=['https://www.googleapis.com/auth/businessmessages'])
client = bm_client.BusinessmessagesV1(credentials=credentials)
# Create the message request
create_request = BusinessmessagesConversationsMessagesCreateRequest(
businessMessagesMessage=message,
parent='conversations/' + conversation_id)
bm_client.BusinessmessagesV1.ConversationsMessagesService(
client=client).Create(request=create_request)
...
send_message 関数は、サービス アカウントの認証情報を使用して、この会話にメッセージを送信できることの確認、ビジネス メッセージ クライアントのインスタンス化、指定された conversation ID へのメッセージの送信リクエストの作成を行います。
リッチ機能でもこの send_message 関数を使用しますが、作成するメッセージはリッチカード、カルーセル、候補ワードに固有のものです。リッチカードやカルーセルにはグラフィック アセットが含まれることがありますが、候補ワードには postback_data が含まれ、コールバック ロジックで適切に解析できるようになります。
メッセージの送信方法を確認したところで、サンプルがリッチカード、カルーセル、候補ワードをどのように送信するかを調べます。次のセクションでは、ソースコードを変更して、前述のリッチな機能の一部を使用してメッセージを送信します。
準備ができたら、Bonjour Meal エージェントをカスタマイズしてみましょう。
5. エージェントのカスタマイズ
ここまでの Codelab に沿って作業を進めれば、美しいエージェントが表示されるはずです。
それほど美しくはなかったものの、一部がむきだしに見えて、当社のビジネスを適切に表現しているとは言えません。幸い、エージェントをサポートするコードに関する基礎知識はあります。また、エージェントを任意の方法でカスタマイズするために必要なツールも用意されています。
この Codelab の残りの部分では、次のようにエージェントを拡張します。
- 実際のロゴを含める
- ウェルカム メッセージの改善
- 営業時間に関する情報を提供する
- まもなくオンラインで商品を購入できるようになることをユーザーに伝える
- 会話を円滑に進めるための会話形式の候補ワードの使用
Google では Business Communications Console を利用してロゴやウェルカム メッセージを更新していきますが、Business Communications API を直接使用してロゴを更新することもできます。次に、営業時間に関する情報を提供する適切なメッセージを送信するようにソースコードを更新する必要があります。Bonjour Meal はまもなくオンライン ショッピング機能を提供する予定です。完了したら Business Communications コンソールに戻り、会話型の候補ワードを作成して、デジタル エージェントがサポートするハッピーパス エクスペリエンスに会話を誘導します。
ロゴを含める
Business Communications Console でエージェントを選択し、[Agent information]（エージェント情報）に移動します。以下で黄色で示されているビジネスのロゴを更新します。
[アップロード] をクリックすると、アップロードする画像を選択したり、URL からインポートしたりできるようになります。
ドキュメントのロゴデザイン ガイドラインをお読みになり、独自のロゴを使用する際のおすすめの方法をご確認ください。
この Codelab の冒頭でクローンを作成したソースコードにあるロゴをアップロードしましょう。これはリポジトリの ./assets/ ディレクトリにあり、ファイル名は「bonjour_meal-logo.png」です。ウェブブラウザのモーダルにファイルをドラッグすると、画質や切り抜きを調整するための簡単な編集ツールが表示されます。画像の解像度を調整して、画像が 50 KB 以下になるように切り抜きます。画像に問題がなければ、青い円のチェックマークをクリックして確定し、モーダルの下部にある [選択] をクリックします。
最後に、[Agent information]（エージェント情報）ページの右上にある [Save]（保存）をクリックします。エージェント情報は Google のサーバー内にキャッシュされ、変更後 2 時間以内に表示されるようになるため、デバイスに反映されるまでにしばらく時間がかかります。
ウェルカム メッセージを更新する
ウェルカム メッセージの更新は、この Codelab ですでに実施しました。今度は Bonjour Meal のユーザー ジャーニーにより適したウェルカム メッセージを設定します。
Business Communications Console でエージェントを選択し、[Agent information]（エージェント情報）に移動します。[ウェルカム メッセージ] 入力フィールドが表示されるまで下にスクロールします。ここでメッセージを更新できます。
これから会話のきっかけを追加するので、ウェルカム メッセージでそれらを参照できます。入力フィールドを次のテキストに置き換えます。
「Bonjour Meal へようこそ。アシスタントは、「Bonjour Meal」に関するご質問をお手伝いします。次の方法をいくつかお試しください。」
最後に、[Agent information]（エージェント情報）ページの右上にある [Save]（保存）をクリックします。繰り返しになりますが、迅速な処理を可能にするキャッシュ メカニズムによって、この変更が反映されるまでしばらく時間がかかります。
営業時間に関する情報を提供する
この情報をユーザーに表示するため、Business Messages API を使用してユーザーにカスタム メッセージを送信します。
メッセージは views.py の route_message 関数で解析されます。この関数は最初に文字列を正規化し、正規化されたメッセージがハードコードされたパラメータのいずれかと一致するかどうかのチェックを開始します。わかりやすくするために、正規化されたメッセージが新しい定数と等しいかどうかを確認する条件を追加しましょう。この定数は CMD_BUSINESS_HOURS_INQUIRY と呼び、値「business-hours-inquiry」を含みます。条件が true と評価されると、send_message_with_business_hours という関数が呼び出されます。
route_message 関数は次のようになります。
bm-django-echo-bot/bopis/views.py
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
else:
echo_message(message, conversation_id)
...
コードを機能させるには、さらに 2 つの変更を加える必要があります。1 つ目は、CMD_BUSINESS_HOURS_INQUIRY を他の定数と一緒に定義する、2 つ目は実際に関数 send_message_with_business_hours を定義し、Business Messages API を使用してメッセージを送信する、です。
まず、他の定数宣言を使用して、ファイルの先頭に定数を定義しましょう。
bm-django-echo-bot/bopis/views.py
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...
次に、send_message_with_business_hours を定義します。この関数は、適切な Python 構文に従って、ファイル内の任意の場所に定義できます。この関数は echo_message と同様にメッセージを送信するだけなので、テンプレートとして使用してこの関数を定義できます。
bm-django-echo-bot/bopis/views.py
...
def send_message_with_business_hours(conversation_id):
message = '''Thanks for contacting us! The hours for the store are:\n
MON 8am - 8pm\n
TUE 8am - 8pm\n
WED 8am - 8pm\n
THU 8am - 8pm\n
FRI 8am - 8pm\n
SAT 8am - 8pm\n
SUN 8am - 8pm
'''
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message)
send_message(message_obj, conversation_id)
...
これにより、bot は、ユーザーが「business-hours-inquiry」というメッセージを送信したときに、その営業時間の情報を返すことができます。次のようになります。
ソースコードを GCP にデプロイすると、変更内容がすぐに表示されます。エージェント情報がキャッシュに保存される方法と同じ方法で、ウェブ アプリケーションを Google Cloud Platform のキャッシュに保存することはないため、このエクスペリエンスをすぐにテストできます。
ソースの変更には多少の勢いがありますが、ユーザーがオンライン ショッピングについて問い合わせることができるように、もう 1 つ変更してみましょう。デジタル エージェントから、この機能はまだ利用できないという返信があります。その場合は、しばらくしてからもう一度ご確認ください。
オンライン ショッピングがまもなく利用可能になることをユーザーに伝える
同様に、ユーザーに営業時間を通知する場合と同様の変更を加えます。今回は、情報を魅力的な画像とともにリッチカードに配置しましょう。
正規化されたメッセージを解析し、値が「online-shopping-inquiry」に設定されている CMD_ONLINE_SHOPPING_INQUIRY という定数の条件を確認します。条件が true の場合に send_online_shopping_info_message が呼び出されます。
bm-django-echo-bot/bopis/views.py
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
else:
echo_message(message, conversation_id)
...
次に、send_online_shopping_info_message を定義します。このメッセージを画像付きのリッチカードで送信するため、send_rich_card 関数をコピーして、send_online_shopping_info_message を定義するテンプレートとして使用しましょう。
まず、代替テキストを更新して、適切なメッセージが表示されるようにします。代替テキストは、なんらかの理由でデバイスがリッチカードを受信できない場合に使用されます。次に、BusinessMessagesRichCard を更新して、関連するタイトル、説明、提案、メディア フィールドを含めます。関数は次のようになります。
bm-django-echo-bot/bopis/views.py
...
def send_online_shopping_info_message(conversation_id):
fallback_text = ('Online shopping will be available soon!')
rich_card = BusinessMessagesRichCard(
standaloneCard=BusinessMessagesStandaloneCard(
cardContent=BusinessMessagesCardContent(
title='Online shopping info!',
description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
suggestions=[],
media=BusinessMessagesMedia(
height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
contentInfo=BusinessMessagesContentInfo(
fileUrl=SAMPLE_IMAGES[4],
forceRefresh=False
))
)))
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
richCard=rich_card,
fallback=fallback_text)
send_message(message_obj, conversation_id)
...
おめでとうございます！オンライン ショッピングに関するユーザーからの問い合わせに、デジタル エージェントが対応できるようになりました。現時点では、デジタル エージェントはまだオンライン ショッピングをサポートしていないため、この機能が近日提供予定であることを知らせるメッセージをユーザーに表示します。ユーザーがオンライン ショッピングについて問い合わせてきた場合、デジタル エージェントはこのようになります。
前の変更と同様に、ngrok を使用している場合でも、GCP App Engine にコードをデプロイするとすぐに、ユーザーに営業時間について問い合わせることができます。
次のパートでは、会話のきっかけと候補ワードを使用して、会話をハッピーパスに導きます。
チップを使って会話をガイド
ソースコードにいくつか変更を加え、更新したデジタル エージェントがデプロイされましたが、「business-hours-inquiry」や「online-shopping-info」と入力していくことは決してありません。会話の開始時に、ユーザーに嬉しいウェルカム メッセージが表示されるだけでなく、会話のきっかけも提示されるように、会話の冒頭部分を更新しましょう。
Business Communications Console にアクセスして、エージェントの [Agent information] ページにアクセスします。以前に「チップ」、「カード」、「カルーセル」の会話のきっかけを定義しました。これらはまだ機能しますが、私たちのビジネス機能とはもはや関係ありません。これらの高度な機能を引き続き表示する場合や、デジタル エージェントが「Bonjour Meal」ビジネスに特化した会話のきっかけとなるよう、これらの高度な機能を表示したままにすることもできます。
新しい会話のきっかけを 2 つ作成します。最初のリクエストでは、text に「What are your business hours?」、ポストバック データを「business-hours-inquiry」に設定します。2 番目の会話のきっかけとして、text を「Can I makepurchase here?」に設定し、Postback data を「online-shopping-info」に設定します。
結果は次のスクリーンショットの構成になります。
Business Communications Console で行ったその他の変更と同様に、モバイル デバイスで行った変更を確認できるようになるまでには、しばらく時間がかかります。
会話のきっかけを説明したところで、次に、会話が始まった後にユーザーを幸せなパスに導く方法も必要です。メッセージの送信後に、コンテキストに基づいてチップを使用して、デジタル エージェントが行える他の機能にユーザーを案内できます。ユーザーが営業時間やオンライン ショッピングについて問い合わせたときに、エージェントと他のことをするよう提案するメッセージを送信します。
関数の最後に以下を追加します。
bm-django-echo-bot/bopis/views.py
...
def send_online_shopping_info_message(conversation_id):
...
# at the end of the function, send a message with suggestions
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='Let us know how else we can help you:',
fallback='Please let us know how else we can help you.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Business hours',
postbackData='business-hours-inquiry')
),
])
send_message(message_obj, conversation_id)
...
# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
# at the end of the function, send a message with suggestions
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='Let us know how else we can help you:',
fallback='Please let us know how else we can help you.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Can I purchase online?',
postbackData='online-shopping-inquiry')
),
])
send_message(message_obj, conversation_id)
...
こちらのドキュメントに記載されているように、BusinessMessagesSuggestion 内のテキスト フィールドは 25 文字以内に制限されています。
会話のきっかけが新しくなり、候補ワードの戦略的使用について、予想されるユーザー エクスペリエンスのスクリーンショットを次に示します。
6. 完了
以上で、初めてのビジネス メッセージ デジタル エージェントの作成が完了しました。
ビジネス メッセージにデジタル エージェントをサポートするウェブ アプリケーションをデプロイし、Business Communications Console を使用してエージェントを変更し、ソースコードを変更してデジタル エージェントとのユーザー エクスペリエンスを形成しました。
これで、インタラクティブなビジネス メッセージ機能の構築に必要な主な手順がわかりました。また、これからの学習の中でも、その可能性が大きく広がります。エージェントを拡張して、在庫検索をサポートしたり、ユーザーの興味 / 関心を追跡するためにショッピング カートを導入したりできます。カルーセルを使用してメニュー上のアイテムを表示し、候補を使用してユーザーが興味を持つアイテムを選択できるようにします。
実際の様子
優れた会話エクスペリエンスを構築するにはどうすればよいですか？
優れたエージェントは、ユーザーに状況に応じた情報を提供しつつ、会話を通じて機能を提供できるため、ユーザーは電話や対面で通常行うようにビジネスと関わり、対話できます。仕事をしたいビジネスとの会話に、次のトピックが当てはまる場合を考えてみましょう。
背景情報を提示し、期待値を伝える
コンテキストの提供とは、ユーザーをどのように支援できるかを明示的に示すことから、ユーザーが共感できるペルソナを身に付けてデジタル エージェントを紹介することまで、どのようなものでもかまいません。ビジネス メッセージで効果的に会話しているエージェントは、会話の相手を象徴したアバターでユーザーに表示します。
期待値の設定は、構築するユーザー エクスペリエンスによって異なります。たとえば、エージェントが在庫検索をサポートしている場合は、回答する前に、可用性が低い可能性があることをまずユーザーに知らせます。
ユーザーに機能を提供する
消費者は常に企業とつながっています。ビジネス メッセージは、注文ステータスの確認のような問い合わせから商品の在庫確認まで、複雑なユーザー インタラクションに対応できます。多くのユーザーは、疑問の答えを得るためにお店やサービスに電話で問い合わせをしています。たとえ電話でも、その企業のウェブサイトで答えが見つかるとしても、その結果、特に年末年始商戦期には、電話問い合わせ量に対応するために多くのリソースを費やさなければならなくなります。
ユーザー エンゲージメントを維持する
会話のタッチポイントを提供して、ユーザーを会話に引き込む。メッセージとメッセージの間に入力インジケーターを表示して、ユーザーの回答を処理していることをユーザーに知らせることができます。
入力時のインジケーター、候補ワード、リッチカード、カルーセルなどの充実した機能を使用して、ハッピーパスのユーザー エクスペリエンスを通じてユーザーをガイドし、アイテムのメニューから注文するなどの特定のタスクを完了できるようにします。目標は、企業の電話回線への通話トラフィックを減らすことです。
会話では、ユーザーに機能を提供することが不可欠です。ユーザーがメッセージ機能を使ってビジネスと連絡を取り合うユーザーは、疑問点に対する迅速な回答を期待しています。理想的ではない状況では、デジタル エージェントが会話を円滑に進めることができず、ユーザー エクスペリエンスの低下につながる可能性があります。幸いなことに、これを回避する方法があります。たとえば、ライブ対応のエージェントに会話を転送するなど、これについては今後の Codelab で説明します。
次のステップ
準備ができたら、ビジネス メッセージで実現できるより複雑な操作について、以下のトピックをご覧ください。