20.7チャットボットをFacebook Messengerに接続する

FB_Messenger_logo

この演習では、Facebookデスクトップサイトを使用してChatbotをFacebook Messengerに接続するので、Facebookアカウントにアクセスする必要があります。

20.7.1 Facebookページの作成

facebookアカウントにログインしたら、画面の右上にある​+​アイコンを選択します。

FB_Plus_btn

これにより、様々なオプションを含む​作成​ドロップダウンが表示されます。

FB_Homepage

ページ​を選択します。

FB_Create_Page_btn

これで、ページ名、カテゴリ、説明など、ページ情報の入力を開始するオプションが表示されます。 これらのフィールドは、必要に応じてに入力してください。ただし、この例では、次のように使用しています。

要求された情報 説明 回答の例
ページ名 ldap-fb-page idejong-fb-page
カテゴリ[業種] 業種 小売会社
説明 ページの説明 チャットボットテスト用のfacebookページ

FB_CreatePage_PageDetails

完了したら、「ページを作成」をクリックします。

FB_CreatePage_btn.png

これで、左側のオプションにプロファイル画像とカバー写真を追加するオプションが与えられます。 自由に実行できますが、これはオプションです。

FB_CreatePage_PageDetails_addImgs

ページの詳細が表示されたら、「保存」をクリックします。

FB_Save_btn

これで、完成したFacebookページが表示されます。 必要に応じて、新しいFacebookページの更新と編集を続行してください。ただし、このチュートリアルの目的で、チャットボットの設定に進みます。

20.7.2 Facebookページ内での高度なメッセージの設定

新しく作成したFacebookページのホームページに、画面の左側にオプションのリストが表示されます。

FB_ManagePage_Nav

オプションの下部にある「ページ設定」を選択します。

FB_Pagesetting_btn

ここでは、必要に応じてFacebookページの設定に多くの時間を費やすことができますが、このチュートリアルでは、チャットボットの設定に進みます。

FB_Pagesetting_Nav

詳細メッセージ」を選択します。

FB_AdvancedMessaging_btn

一般的な設定 > 接続されたアプリ​までスクロールします。 アプリが接続されていません。 ここでは、Stackchat UIとチャットボットを接続すると、Stackchatが表示されます。

FB_GeneralSettings_ConnectedApps

20.7.3 StackchatをFacebook Messengerに接続

facebookページが作成されたので、ページに送信されるメッセージを管理するStackchat権限を付与する必要があります。 Stackchat StudioでLuma Botを起動し、ボットメニューから​Integrations​ボタンをクリックします。

Stackchat_Integration_FB

右上の「統合を追加」ボタンをクリックし、「Facebook Messenger」を選択します。

Stackchat_Integration_FB

Facebook権限を管理」ボタンをクリックします。

Stackchat_Integration_FB

facebookログインモーダルが表示されます。 表示されない場合、ブラウザーがモーダルポップアップをブロックしている可能性があります。 警告があるかどうかを確認し、Stackchatがポップアップを起動する権限を与えます。 facebookアカウントにログインします。

Stackchat_Integration_FB

Chatbotに接続するすべてのページを選択します。 Stackchatは、これらのページを記憶し、リストから選択するオプションを提供します。 ページを選択したら、「次へ」ボタンを押します。

Stackchat_Integration_FB

これらの権限は変更しません。 「完了」ボタンを押し、「OK」ボタンを押すだけです。

Stackchat_Integration_FB

モーダルが閉じ、Chatbotを接続するFacebookページを選択できるようになります。

Stackchat_Integration_FB

統合を追加」ボタンを押すと、完了です。

20.7.4統合のテスト

デモを開始するには、Facebookにログインし、前の手順で作成したFacebookページに移動します。 このチュートリアルでは、Luma Retailデモページを使用します。

Facebook_LumaRetail_HP

このページの管理者なので、「訪問者として表示」ボタンを押します。

Facebook_LumaRetail_viewasVisitor

これにより、ビューが変更され、ページが顧客の場合と同じように表示されます

Facebook_LumaRetail_HP_cv

右上にある「メッセージを送信」ボタンを押します

Facebook_LumaRetail_sendMessage

これは、Stackchatが動力を持つchatbotを開きます。 チャットボットを初めて開くと、「開始」を選択すると、Luma Retailに公開情報が表示されます

Facebook_LumaRetail_ChatBot_welcomeAnon

開始」を選択します。

Facebook_LumaRetail_ChatBot_getstarted_btn

Chatbotが開始されると、ようこそメッセージが表示されます。 前の節でWeb Messengerで行ったように、「アイデアが必要です」の流れを順を追って、会話が正しく表示されるかをテストします。

Facebook_LumaRetail_ChatBot_initiate2

次に、Luma Botがポリシーへのリンクを共有し、同意を求めます。 はい​をクリックして続行します。

Facebook_LumaRetail_ChatBot_optin

Web Messengerのテスト中に使用したデモ電子メールか、FacebookがLumaのファーストタッチポイントだった場合のエクスペリエンスの様子を確認する新しい電子メールを送信します。

Facebook_LumaRetail_ChatBot_email-submit2

Luma Botは、製品のカルーセルを表示します。 商品を閲覧する際は、心アイコンをクリックして、好みの商品を好みます。 俺は常にパラシュートパンツを…

Facebook_LumaRetail_ChatBot_productLike

メモ

ホットチップ! 次のコマンドは、チャットボットに対して秘密に「baked in」されました。

  • /debug — チャットボットが現在接続されているAEPインスタンスを確認します。
  • /reset — 最初から会話を再開できます。

したがって、いつでも統合を確認したり、会話をリセットしたりできます。 Studio UIやCDMLエディターで、これらのキーワード設定が見つかるかどうかを確認してください。これらの設定は、正規表現を使用して設定されます。

Cora Parasute Pantsの製品を「気に入った」ので、Eメールの受信トレイをチェックして、Exersice 20.4にジャーニーがトリガーし、正常に配信されたことを確認できます。

JO Eメールが配信されました

次に、「会話」をオンサイトで継続する方法を見てみましょう。 次に、LumaボットとのFacebook MessengerチャットがLuma小売との最初のやり取りであったと仮定します。FacebookでLumaボットとやり取りした後、初めてWebサイトの訪問者がどのようなエクスペリエンスを得るかを見てみましょう。 匿名モード​で、LumaのWebサイトに移動します。 これは新しい匿名ウィンドウなので、通常どおりldap、ブランド(Luma)を設定する必要があります。 新しい匿名Luma Webサイトを開いたら、X線パネルをチェックして、新しいユーザー(プロファイル属性やエクスペリエンスイベントなし)であることを確認します。

web_incog-xray.png

LOGIN/REGISTER​ページに移動し、Facebook Messengerのチャットで使用したのと同じメールでサインアップします。 サインインしたら、ホームページに戻り、X線パネルを開きます。 これで、エクスペリエンスイベントの下にFacebookのインタラクションが表示されます。

web_xray-fb-interaction

WebサイトとWeb Messengerが最初のFacebookインタラクションを認識したので、「会話」を続け、必要に応じて次のインタラクションをパーソナライズできます。 情報を持たない匿名体験とは対照的に、ソーシャルチャネルからの会話を拡張しただけです。

これで作業は完了です。これで、Facebookの統合が完了し、Facebook MessengerとWeb Messengerでテストが完了しました。

次に、別のソーシャルチャネルWeChat…を簡単に見てみましょう。

次の手順:20.8 WeChat統合のテスト

モジュール20に戻る

すべてのモジュールに戻る

このページ