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


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


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


## 前提

* Einstein Bot の詳しい使い方については割愛させていただきます。詳細は[ヘルプ](https://help.salesforce.com/s/articleView?id=sf.bots_service_intro.htm&type=5)や[Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/service_bots_basics)をご覧ください。
* SFRAをベースに作成されているサイトに適用できます
* カートリッジの使い方については取り扱いません



## 手順概要

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





## 手順詳細

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



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


![スクリーンショット 2022-07-22 15.36.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c4e76589-52cc-e43d-1c0f-ce677aa20e5e.png)

![スクリーンショット 2022-07-22 15.39.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/386b8ce3-8833-d2d2-d302-98824ce53936.png)




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

* 下記の3ファイルを含むカートリッジを作成し、アップロード＆有効化してください
:::note warn
※ カートリッジの作成方法やアップロード方法については割愛します。詳しくは[Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/b2c-cartridges)、[Infocenter](https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/content/b2c_commerce/topics/site_development/b2c_cartridges.html?resultof=%22%63%61%72%74%72%69%64%67%65%22%20)、[以前紹介したQIita記事](https://qiita.com/syunyama/items/21c71ac9c49b332e126d#1-%E3%82%AB%E3%83%BC%E3%83%88%E3%83%AA%E3%83%83%E3%82%B8%E3%81%AE%E4%BD%9C%E6%88%90) をご参照ください
:::

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

```js:/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
};
```



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




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


![スクリーンショット 2022-07-22 16.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/6853f20e-ab56-81d9-e3dc-f10766660d55.png)





### 3. Einstein Botの作成

* Platformへログインする
* 設定に遷移し、クイック検索から「Einstein ボット」と検索し、 Einstein ボットページに遷移する
* 新規ボタンから新しくボットを作成する
![スクリーンショット 2022-07-22 14.52.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/2daf64f5-d8ad-14d8-22f9-8b7494f4b6ee.png)

* ダイアログが表示される
![スクリーンショット 2022-07-22 14.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/0794c8e0-e844-630b-86e9-6d92751fc4a3.png)

* （今回は）下記のように入力していきます
    * 「標準ボット」を選択。次へ
    * 「最初から開始」を選択。次へ
    * 名前には「サンプルボット」と入力、言語は「日本語」を選択。次へ
    * 何も変更しない。次へ
    * 組み込みサービスは選択しない。次へ
    * 続行ボタンをクリック
* 完了ボタンをクリック
* （通常だったらここでEinsteinボットの動きの設定を細かく行なっていくが、割愛）
* 画面右上の有効化ボタンをクリック
* プレビューから「リッチコンテンツプレビュー」を選択
![スクリーンショット 2022-07-22 14.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e0f0b5b3-07d1-111c-ebbc-f810b6427beb.png)
* 「チャットを設定」をクリック
* ダイアログが表示される
* （今回は）下記のように入力していく
    * 「Sample Einstein Bot Queue」「Sample Einstein Bot Chat Group」任意のユーザを選択
    * 優先度１に設定
    * そのまま
    * ECフロントサイトのドメインを入力「[https://{}.sandbox.{}.dx.commercecloud.salesforce.com](https://zzjs-021.sandbox.us02.dx.commercecloud.salesforce.com/)」
    * 「取引先責任者のみ」を選択
    * オフのままにしておく
* 最後にコードスニペットが表示されるのでコピーしておく
![スクリーンショット 2022-07-22 15.07.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/5cd0fbed-5f2c-1c1d-5986-85ee22050690.png)
* 完了ボタンをクリック



### 4. B2C Commerceへの埋め込み

* Business Managerの**マーチャントツール > サイト環境設定 > カスタムサイト環境設定グループ**  に遷移し、「EinsteinBotSample」を選択する。
* コピーしたコードスニペットを「EinsteinBotScriptSnippet」は貼り付け、保存ボタンをクリック
    * ※この際チャットの見た目をコードを修正することで可能です。詳しくは[ヘルプ](https://help.salesforce.com/s/articleView?id=sf.snapins_chat_parameters.htm&type=5)をご覧ください。
![スクリーンショット 2022-07-22 15.11.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/d2905253-1ce0-318e-c351-68821370d599.png)





### 5. 確認

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

![スクリーンショット 2022-07-22 15.13.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/1c66feab-d9d2-ee2c-2219-261cc87d6bad.png)