オペレータがお客さまがどのページを直前まで見ていたのか把握できる - Dynamics 365 Customer Service と Power Apps Portal - 

# この記事で伝えたいこと
オペレータが、お客さまがどのページを直前まで見て、連絡したのか把握できる 
- Dynamics 365 Customer Service と Power Apps ポータルを組み合わせて実現可能（標準機能）- 

どういったシーンで便利か？
　→　チャットボット会話後に、人につないだあとに繰返し説明したくない。
　→　オペレータ側でお客さまが直前まで見ていたページを把握できる。

利用シーン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3d0ee4f7-7847-1718-4239-50465678611b.png)

↑赤枠のリンクをクリックすると
直前まで見ていたポータルのサイトがわかる！↓ポータルイメージ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/a429eaeb-f4ad-7908-ba9e-61fa64495bf5.png)



# 設定手順

## 1. 会話の概要で顧客のアクションのセルフサービス設定を有効にする。

https://docs.microsoft.com/ja-jp/dynamics365/customer-service/enable-self-service-settings?tabs=customerserviceadmincenter


## 2.Power Apps Portalのチャットウジェットにhtmlを設定する。
### 2.1 Power Apps ポータル管理アプリを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/811e8994-3a35-8009-d00c-3e773a20e07b.png)


### 2.2 チャットウジェットに以下htmlを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f2bbd333-7187-09b7-bea8-d7d5b5ee8958.png)

```html:Chat Widget Code.html
<script id="Test">
        //チャットがロードされた際にSelfServiceタブ作成をするための初期化
        window.addEventListener("lcw:ready", function TestLee() {
            var SelfService;
            var selfServiceString = sessionStorage.getItem("SelfService");
            if (selfServiceString == null) {
                SelfService = [];
            }
            else {
                SelfService = JSON.parse(selfServiceString);
                if (SelfService.length == 4) {
                    SelfService.pop();
                }
            }

            // ここからナビゲーションの設定（Tabの中からの内容）
            var title = $('h1')[0];
            var innerHTML = title.innerHTML;
            var navigation = {
                "msdyn_displaytitle": "Page visited",
                "msdyn_url": window.location.href,
                "msdyn_starttime": new Date().toISOString(),
                "msdyn_type": "192350000",
                "msdyn_displaytitle": "Phrase searched",
                "msdyn_url": window.location.href,
                "msdyn_starttime": new Date().toISOString(),
                "msdyn_type": "192350001",
                "msdyn_displaytitle": "Knowledge article viewed",
                "msdyn_url": window.location.href,
                "msdyn_starttime": new Date().toISOString(),
                "msdyn_type": "192350002"            
            }            
            SelfService.unshift(navigation);
            sessionStorage.setItem("SelfService", JSON.stringify(SelfService));

            // イベントハンドラ 戻り値は TestLee関数にセット
            if (Microsoft.Omnichannel) {
                var occontext = Microsoft.Omnichannel.LiveChatWidget.SDK.getContextProvider();
                Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function TestLee() {
                    var selfServiceTracked = sessionStorage.getItem("SelfService");
                    var ocSelfService = JSON.parse(selfServiceTracked);
                    return {
                        'SelfService': { 'value': JSON.stringify(ocSelfService) }
                    };
                });
            }
        });    
        //bodyからはチャットWidgetのロード
    </script>

    // Dynamics 365 Customer Serviceのチャット作成時に生成したコードをそのまま張り付ける。サンプル記載です。
    <script id="Microsoft_Omnichannel_LCWidget" src="https://oc-cdn-public-apj.azureedge.net/livechatwidget/scripts/LiveChatBootstrapper.js" data-app-id="cadXXXX4-62d9-4472-a497-04e60a9a03bd" data-lcw-version="prod" data-org-id="XXXXXXXX-cXXX-XXX-a1bb-8d78fe1c46cc" data-org-url="https://XXXXXXX-crm.omnichannelengagementhub.com"></script>

```

## 参考Docs
・会話の概要で顧客のアクションのセルフサービス設定を有効にする。

https://docs.microsoft.com/ja-jp/dynamics365/customer-service/enable-self-service-settings?tabs=customerserviceadmincenter


・サンプルソース 

https://docs.microsoft.com/ja-jp/dynamics365/customer-service/developer/reference/methods/setcontextprovider#pass-customers-self-service-as-context