分岐 OmniScript を設計および作成する

学習の目的

この単元を完了すると、次のことができるようになります。

• 分岐を OmniScript に作成する。
• 条件付き分岐を OmniScript に追加する。
• 要素プロパティを使用して OmniScript の UI と UX を変更する。
• OmniScript JSON を操作および検査する。

始める前に

このモジュールを受講する前に、「OmniScripts」 (OmniScript) モジュールを完了することをお勧めします。ここで説明する概念は、そのモジュールで学習したことに基づいています。 

ガイド付きインタラクションに分岐を作成する

簡単におさらいをしておくと、OmniScript では複雑なコーディングをすることなく、ビジネスパス全体にわたって、ガイド付きのユーザーパスをカスタマイズして簡単に作成できます。これらはユーザーインタラクションの要件を満たし、シームレスで充実したカスタマーエクスペリエンスを提供する素晴らしいソリューションです。 

ガイド付きインタラクションが最大の効果を発揮できるのは、ややこしくなくて明解かつ直接的なパスが、プロセス全体にわたってエンドユーザーに提示される場合です。OmniScript の分岐は、まさにそれを実現する方法の 1 つです。このモジュールでは、簡単な例を元に、OmniScript の分岐の全容を学習します。 

OmniScript の分岐を作成するには、いくつかの方法があります。たとえば、顧客の年齢に応じて 2 種類の分岐がある OmniScript のように、条件に基づいて OmniScript で特定のステップを表示する分岐を作成できます。顧客が 18 歳未満の場合、分岐で許可されるのは、取引先責任者情報の編集のみです。18 歳以上の場合、分岐では、取引先責任者情報の編集と、新しいサービスプランの選択、お得な提案の受領を許可します。 

また、ユーザーがチェックボックスをオンにしたときに OmniScript で特定の項目を表示するといったように、条件に基づいて項目のブロックを表示する分岐を作成できます。たとえば、エンドユーザーが請求先住所を更新しているときに郵送先住所も更新するというチェックボックスを選択すると、郵送先住所の項目を表示します。 

では、モジュールの OmniScript の分岐の例を詳しく確認しましょう。 

カスタマーサービスエージェントが取引先の主取引先責任者情報を変更する場合のインタラクションを設計します。 

「カスタマーサービスエージェントとして、ガイド付きインタラクションでは、既存の主取引先責任者の情報を更新するか、別の既存の取引先責任者を簡単に検索して主取引先責任者を変更する (情報の編集にも対応) か、新しい取引先責任者を作成して主取引先責任者として割り当てるかという選択ができるようにしたいです。」

サービスエージェントに対して、このインタラクションは次のように表示されます。

OmniScripts が必要とするのは、次の要素です。 

• 2 個以上のデータソース (OmniStudio Integration Procedure の使用がベストプラクティス)
• 入力を表示する 1 つ以上の Step
• インタラクション終了時にエンドユーザーを誘導する Navigate Action。

現在の OmniScript のサンプルをもう少し複雑にするには、2 つの要件があります。

• エージェントが望むオプションを表示し、選択できるようにするページ (エージェントが一度に選択するオプションは 1 つのみ)。
• 次に、エージェントが選択したオプションに応じて表示される項目のグループを参照できる 2 番目のページ。

これらの 2 つの要件を満たすには、どの OmniScript 要素が役立つか確認しましょう。 

最初の要件については、ラジオボタンを Inputs 要素として使用します。チェックボックスと異なり、エージェントが一度に選択できるラジオボタンは 1 つのみです。これにより、エンドユーザーが間違って複数のオプションを選択しないようにします。 

2 つ目の要件については、個々の要素に適用された [Conditional View (条件付きビュー)] を使用すると、エージェントが選択したラジオボタンに応じて項目のグループが表示されます。この OmniScript では、1 つ目の Step で選択肢を提示し、2 つ目の Step に 3 種類の Block を含めることにします。これにより、それぞれの Block で異なる項目を構成できます。 

分岐 1: 主取引先責任者を更新

例を見てみましょう。Update (更新) 分岐である分岐 1 には、3 つの項目があります。2 つには現在の主取引先責任者の姓と名が表示され、もう 1 つではその取引先責任者のメールアドレスを更新できます。

分岐 2: 主取引先責任者を変更

Change (変更) 分岐である分岐 2 には、新しい主取引先責任者を検索して選択できる項目が表示されます。検索は、取引先にリンクされた既存の取引先責任者に制限されます。

分岐 3: 新しい主取引先責任者を作成

Create (作成) 分岐である分岐 3 には、新しい取引先責任者を作成して、それを新しい主取引先責任者にするために必要な最小限の項目が 3 つ表示されます。

新しく設計された OmniScript には、1 つの Step に複数の Block がありますが、ユーザー入力に基づく Block は 1 つしか表示されません (ユーザーが選択するラジオボタン)。では、このように分岐させるには、OmniScript を実際にどのように設定するのでしょうか? [Conditional View (条件付きビュー)] で、ラジオボタンを対応する Block にリンクします。[Conditional View (条件付きビュー)] でラジオボタンと Block 要素をペアリングして、ユーザー入力に応じた 1 つの Block を表示して、他の Block を非表示にます。エンドユーザーに一度に表示される Block は 1 つのみです。これにより、実施するタスク (更新、変更、または新規主取引先責任者の作成) に関連する項目しか表示されなくなるため、非常にユーザーにわかりやすいページとなります。

次に、どのようにすれば、要素のプロパティがよりよいユーザーインターフェース (UI) とユーザーエクスペリエンス (UX) を実現するために役立つのかを確認します。

要素プロパティを使用して OmniScript の UI と UX を変更する

Web ページのデザインが悪いせいで、タスクに時間がかかったりタスクの実施が難しかったりして、それによりオンラインインタラクションを途中でやめた経験はありませんか? よいインタラクションには、優れた UI と UX が必要です。幸い、要素のプロパティを使用して、OmniScript の UI と UX を簡単に改善できます。 

たとえば、主取引先責任者のメール項目を OmniScript に表示する場合に、エンドユーザーがこの項目を空のままにできないようにしたいとしましょう。このような場合は、チェックボックスをクリックするだけで、その項目が必須項目になります。この簡単な要素プロパティの調整で、シームレスなカスタマーエクスペリエンスを実現できます。 

他にも、標準的な要素プロパティで簡単に調整できる UI 設定があります。 

• 項目の長さの動的なコントロールの調整 (ページにおける相対的な長さ)。
• 項目を参照のみにする (エンドユーザーはその項目を編集できない)。
• バックエンドでは必要だけれども、エンドユーザーには意味をなさない項目の非表示。
• ヘルプテキストのツールチップの提示 (エンドユーザーが項目にカーソルを合わせると、その項目が何のためにあるのかがわかるようになる)。

OmniScript の Step 要素には、調整可能な独自の UI 設定があります。

• UI にすでにある情報を補完する、明解かつ簡潔な手順を作成する。
• UI で表示されるステップリストである Step Chart (ステップ図) をカスタマイズする。

これで、UI と UX を改善できる要素プロパティの調整方法を学習しました。ほかにも紹介することはあります。  たとえば、ページ上に 3 つの Block (Update (更新)、Change (変更)、Create (作成)) を用意し、エンドユーザーの入力に応じて、一度に 1 つだけ表示させたいとします。どのような解決策があるでしょうか? 

条件付き分岐を OmniScript に追加する

条件付き分岐を入力すると、  最初の Step にラジオボタンを追加できるようになります。プロパティを設定する際に、2 つ目の Step の各 Block を異なるラジオボタンや選択肢にリンクします。これで、エンドユーザーの入力に基づき、3 つの Block が一度に 1 つずつ表示されます。

この仕組みを確認しましょう。OmniScript では、ほぼすべての要素で条件付きビューを定義できます。前述のとおり、ラジオボタン要素を設定する際に、この条件付きビューを介して、各選択肢をページ上の Block にリンクします。これが条件付き分岐の概要です。 

これが完了したら、データ要素を追加して、データを取り込みます。また、このデータが OmniScript に転送され、そこから送信されていることを、JavaScript オブジェクト表記 (JSON) を検査して確認することも重要です。

OmniScript JSON を操作および検査する

例に戻りましょう。サービスエージェントが主取引先責任者を更新、変更、作成するときに役立つ条件付き分岐を使用して、OmniScript を設計しました。次は、データを取り込むデータ要素を追加し、データが OmniScript に転送され、そこから送信されていることを、JavaScript オブジェクト表記 (JSON) を検査して確認します。

Integration Procedure Action 要素のようなデータと連携する要素を追加する場合、次のプロパティを使用して複雑なデータマッピングやデータ操作を実施します。 

Step を設定してデータを OmniScript に取り込む要素を追加したら、[Preview (プレビュー)] を使用して分岐が予想どおり動作することを確認します。[Preview (プレビュー)] では、OmniScript のプレビューを確認し、JSON を検査して、[Action Debugger (アクションデバッガー)] を使用して、データが OmniScript とデータツールの間で送受信されることを確認できます。 

この分岐機能はかなり優れていると思いませんか? 次の単元では、Type Ahead Block を追加して、[Change Primary Contact (主取引先責任者を変更)] 分岐を作成する方法を学習します。

リソース

• Trailhead: OmniScript