Salesforce Service Cloud の Einstein Bot を B2C Commerce に導入してみる

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

この記事では、Service CloudのAIを用いたチャットボットであるEinstein BotをB2C Commerceへ導入する方法を紹介します。

前提

• Einstein Bot の詳しい使い方については割愛させていただきます。詳細はヘルプやTrailheadをご覧ください。
• SFRAをベースに作成されているサイトに適用できます
• カートリッジの使い方については取り扱いません

手順概要

1. カスタム環境設定の作成
2. カートリッジの作成と有効化
3. Einstein Botの作成と埋め込み用のJavascriptコードスニペットの取得
4. B2C Commerceへの埋め込み
5. 確認

手順詳細

1. カスタム環境設定の作成

• Business Managerのマーチャントツール > サイト環境設定 > カスタムサイト環境設定グループ に遷移し、新規ボタンから「EinsteinBotSample」という属性グループを作成し、「EinsteinBotScriptSnippet」というテキストタイプの属性定義を作成する。
• 属性定義名は後ほど使うので、メモしておく

2. カートリッジの作成と有効化

• 下記の3ファイルを含むカートリッジを作成し、アップロード＆有効化してください

※ カートリッジの作成方法やアップロード方法については割愛します。詳しくはTrailhead、Infocenter、以前紹介したQIita記事 をご参照ください

ここで指定している「EinsteinBotScriptSnippet」は先ほど設定した属性定義名です。

/cartridge/scripts/hooks/einsteinBotScript.js

const Site = require('dw/system/Site');
const velocity = require('dw/template/Velocity');

const afterFooter = function () {
    const currentSite = Site.current;
    const snippet = currentSite.getCustomPreferenceValue('EinsteinBotScriptSnippet');

    if (snippet) {
        velocity.render(snippet, null);
    }
};

module.exports = {
    afterFooter: afterFooter
};

/hooks.json

{
    "hooks": [
        {
            "name": "app.template.afterFooter",
            "script": "~/cartridge/scripts/hooks/einsteinBotScript"
        }
    ]
}

/package.json

{
    "hooks": "./hooks.json"
}

3. Einstein Botの作成

• Platformへログインする

• 設定に遷移し、クイック検索から「Einstein ボット」と検索し、 Einstein ボットページに遷移する

• 新規ボタンから新しくボットを作成する
  

• ダイアログが表示される
  

• （今回は）下記のように入力していきます

  • 「標準ボット」を選択。次へ
  • 「最初から開始」を選択。次へ
  • 名前には「サンプルボット」と入力、言語は「日本語」を選択。次へ
  • 何も変更しない。次へ
  • 組み込みサービスは選択しない。次へ
  • 続行ボタンをクリック

• 完了ボタンをクリック

• （通常だったらここでEinsteinボットの動きの設定を細かく行なっていくが、割愛）

• 画面右上の有効化ボタンをクリック

• プレビューから「リッチコンテンツプレビュー」を選択
  

• 「チャットを設定」をクリック

• ダイアログが表示される

• （今回は）下記のように入力していく

  • 「Sample Einstein Bot Queue」「Sample Einstein Bot Chat Group」任意のユーザを選択
  • 優先度１に設定
  • そのまま
  • ECフロントサイトのドメインを入力「https://{}.sandbox.{}.dx.commercecloud.salesforce.com」
  • 「取引先責任者のみ」を選択
  • オフのままにしておく

• 最後にコードスニペットが表示されるのでコピーしておく
  

• 完了ボタンをクリック

4. B2C Commerceへの埋め込み

• Business Managerのマーチャントツール > サイト環境設定 > カスタムサイト環境設定グループ に遷移し、「EinsteinBotSample」を選択する。
• コピーしたコードスニペットを「EinsteinBotScriptSnippet」は貼り付け、保存ボタンをクリック
  • ※この際チャットの見た目をコードを修正することで可能です。詳しくはヘルプをご覧ください。
    

5. 確認

フロントサイトに遷移してチャットが表示されるか確認。