現在表示中:

前提条件

AEM Forms リファレンスサイトのセットアップおよび設定」を参照してリファレンスサイトをセットアップします。

We.Finance リファレンスサイトのシナリオ

金融業界をリードする We.Finance 社は、幅広い顧客プロフィール要件に合わせてパーソナライズされた包括的な金融ソリューションを提供しています。クレジットカード、住宅ローンおよび住宅保険のサービスを提供しています。

同社の目標は、同組織の優先するデバイス上で既存の顧客や見込み客に働きかけ、各サービスのメリットを説明し、これらのサービスへの登録を促進することです。さらに同社は、アドオンのカードなど、顧客が興味を抱きそうな金融商品を宣伝していきたいと考えています。

We.Finance 社のユースケースの詳細なチュートリアルをお読みいただき、金融機関が目標を達成するのに AEM Forms がどのように貢献しているかご確認ください。

クレジットカードの申し込みのチュートリアル

We.Finance 社のクレジットカード申し込みのシナリオでは、以下の人物が登場します。

  • Sarah Rose(We.Finance 社の顧客)
  • Gloria Rios(We.Finance 社のクレジットカードおよび住宅ローンの責任者)

以下の解説図は、クレジットカードの申し込みのワークフローを図式化したものです。

workflow_aem-cc

リファレンスサイトの詳細なシナリオをお読みいただき、We.Finance 社が目標を達成するのに AEM Forms がどのように貢献しているかご確認ください。

Sarah は We.Finance 社からニュースレターを受信し、クレジットカードを申し込む

Sarah Rose は We.Finance 社の既存の顧客です。Sarah は We.Finance 社から新しいクレジットカードのキャンペーンについてのニュースレターを受信します。Sarah はそのキャンペーンに興味を持ち、クレジットカードを申し込むことに決めます。Sarah はニュースレターに表示されている「Apply Now」ボタンをクリックします。これにより、We.Finance 社のポータルサイトにあるクレジットカード申込フォームが表示されます。 

marketing-email

仕組み

Sarah に送信されたニュースレターは、特定の電子メール ID への電子メールをトリガーするカスタム実装です。電子メールに記載された「今すぐ申し込む」ボタンはクレジットカードの申込フォームにリンクされます。これはパブリッシュインスタンス上のアダプティブフォームです。 

実際の動作確認

次の URL を開くと、ニュースレターの電子メールがトリガーされます。[emailID] を有効な電子メールアカウントに置き換え、ニュースレターを受信します。ニュースレターを開き、「Apply Now」をクリックして、クレジットカードの申込フォームに移動します。

http://[authorServer]:[authorPort]/content/campaigns/we-finance/start.html?app=cc&email=[emailID]&givenName=Sarah&familyName=Rose

Sarah がキャンペーンに関心を抱き、申し込みを決意

Sarah はクレジットカードを申し込むことを決め、電子メールに表示された「Apply Now」ボタンをクリックします。We.Finance 社のポータルサイトにあるクレジットカードの申込フォームが表示されます。申込フォームはカードレイアウトを使用してセクションごとに構成されています。

Sarah は利用可能なオプションからクレジットカードを選択して、「Continue」をクリックします。

cc-application-form-desktop

個人情報のページで社会保険番号を入力すると、使用している資格情報でログインするようにプロンプトが表示されます。

login-ssn

Sarah は We.Finance 社の既存の顧客です。Sarah が We.Finance 社のアカウントの資格情報でログインすると、個人情報の詳細がフォームに自動で入力されます。Sarah が申込フォームの入力を続けていると、出席しなければならない会議のリマインドのポップアップが表示されました。そこで、彼女は申込フォームの「Save my progress」をクリックします。このボタンをクリックすると、その時点までに入力されたすべての情報が保存されます。さらに、ダイアログポップアップが表示され、途中まで入力していたドラフトの内容を後で完成するために申込フォームへのリンクを電子メールで受け取ることを希望するかどうか尋ねられます。

Sarah は「Send mail」をクリックします。彼女はクレジットカードの申込フォームを再開するためのリンクが表示された電子メールを受け取ります。

resume

Sarah がモバイルデバイスからクレジットカードの申込フォームにアクセスした場合、申込フォームはモバイルデバイス用に最適化されて表示されます。このビューでは、申込フォームは一度に 1 つずつのセクションでレンダリングされます。そのため、Sarah は申込フォームを移動するたびに、順を追って情報の表示および入力を行うことができます。

モバイルデバイスでのクレジットカード申込フォームの記入

仕組み

Apply Now」ボタンから、Sarah は直接クレジットカードの申込フォームにアクセスできます。申込フォームはアダプティブフォームです。これは http://[host]:[Port]/editor.html/content/forms/af/we-finance/cc-app.html で、オーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

  • XSD スキーマに基づいている。
  • スタイル設定は We Finance Theme A を使用し、レイアウトは We.Finance テンプレートを使用して構築されている。また、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されています。モバイルデバイスでフォームを開いている場合は、プログレッシブモバイルレイアウトが表示されます。テンプレートは http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance で、テーマは http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-a/jcr:content で確認できます。
  • フォームデータモデルサービスを呼び出すためのアダプティブフォームルールが含まれ、ログインしたユーザーのユーザー詳細を事前入力する。また、サービスを呼び出す際は、フォームに入力した社会保険番号や電子メールアドレスにより、情報が事前入力されます。フォームデータモデルとそのサービスは、http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm で確認できます。
  • さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。
  • 署名ステップコンポーネントを使用して、入力が完了したフォームを表示し、フォーム上で電子署名を行うことができる。
  • 「Save my progress」ボタンをクリックすると、ユーザーに対して一意の ID が生成され、AEM リポジトリのノード内に一部入力済みの申込フォームが下書きとして保存される。また、同じアクションによって、申込フォームの下書きを含むノードへのリンクを電子メールで送信する許可を求めるダイアログが表示されます。確認ダイアログの「Send mail」ボタンをクリックすると、下書きを含むノードへのリンクを持つ電子メールが自動送信されます。
  • AEM ワークフローを起動する送信アクションを使用して、クレジットカードの承認ワークフローをトリガーする。このフォームで使用されているワークフローは、http://[host]:[Port]/cf#/etc/workflow/models/we-finance-credit-card-workflow.html で確認できます。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

また、クレジットカード申し込みのアダプティブフォームで使用した機能の詳細については、次のドキュメントを参照してください。

実際の動作確認

Sarah Rose でログインし、クレジットカードの申込フォームで「Apply now」ボタンをクリックします。詳細を一部入力し、様々なアダプティブフォームコンポーネントを確認して「Save my progress」をクリックすると、途中まで入力した下書きの申込フォームにリンクする「Resume」ボタンが表示された電子メールを受信します。申込フォームで電子メール ID を指定し、電子メールを受け取ることを確認します。

We.Finance のテーマは、次の場所で確認できます。

http://<host>:<AuthorPort>/editor.html/content/dam/formsanddocuments-themes/we-Finance/we-Finance-Theme-A/jcr:content

We.Finance のテンプレートは、次の場所で確認できます。

http://<host>:<AuthorPort>/editor.html/conf/we-finance/settings/wcm/templates/we-finance-template/structure.html

Sarah が申込書の入力を再開し、送信

Sarah は会議から戻り、We.Finance 社からの電子メールを見つけます。電子メールに表示された「Resume」ボタンをクリックすると、入力が途中のクレジットカードの申込フォームにアクセスできます。先ほど記入した情報はすでに入力された状態で表示されます。Sarah は申込フォームの残りの項目に記入し、申し込みに署名して送信します。

resume

この方法以外にも、We.Finance 社のホームページにある「My Forms」から、下書きした申込フォームにアクセスできます。

portal-drafts

仕組み

電子メールの「Resume」ボタンは、申込書の下書きを含むノードへリダイレクトします。

実際の動作確認

申込フォームの入力時に指定した電子メール ID で、申込フォームの下書きへのリンクが表示された電子メールを受信します。先へ進み、申込フォームの中の残りのセクションに必要な情報を入力し、送信します。

We.Finance 社が申込書を受信および承認

Sarah によって送信されたクレジットカード申込書を、We.Finance 社が受信します。タスクは Gloria Rios に割り当てられます。Gloria は AEM インボックスでタスクを確認し、これを承認します。

inbox

仕組み

Sarah がクレジットカードの申込フォームにすべて記入して送信すると、Forms ワークフローがトリガーされ、Gloria の AEM インボックスにタスクが作成されます。

OSGi 上の AEM Forms によって Forms 中心のワークフローが提供され、アダプティブフォームに基づいたワークフローを構築できます。これらのワークフローをレビューや承認、ビジネスプロセスフローに使用して、ドキュメントサービスを開始したり、Adobe Sign 署名ワークフローと統合したりすることができます。詳しくは、「OSGi 上の Forms 中心のワークフロー」を参照してください。

次の画像では、クレジットカード申込書を処理してその PDF 出力を生成する AEM ワークフローを図式化して説明しています。

forms-workflow

実際の動作確認

AEM インボックスには http://<hostname>:<AuthorPort>/aem/inbox からアクセスできます。Gloria Rios のユーザー名とパスワード(grios/password)を使用して AEM インボックスにログインし、クレジットカードの申し込みを承認します。Forms 中心のワークフロータスクで AEM インボックスを使用する方法について詳しくは、「AEM インボックスでの Forms アプリケーションとタスクの管理」を参照してください。

inbox

申し込みを承認すると、Sarah は電子メールでウェルカムキットを受け取ります。 

Sarah がウェルカムキットを受信し、アドオンカードに適用

Sarah のクレジットカード申し込みが承認されると、彼女はウェルカムキットへのリンクを含む電子メールを受信します。ウェルカムキットには彼女のクレジットカードアカウントの詳細情報が記載されています。ウェルカムキットには他にカルーセルスライド式のウィンドウも含まれており、そこでは Sarah 向けにカスタマイズされたプロモーションキャンペーン情報が表示されます。スクロールダウンすると、埋め込みフォームからアドオンカードへの申し込みができるようになっています。Sarah はただちにウェルカムキットの中から必要事項を入力し、アドオンカードの申し込みを行います。アドオンカード申込の確認ダイアログが表示されます。

welcome-kit

ウェルカムキットは Sarah に合わせてパーソナライズされており、彼女に関わる情報を表示します。ウェルカムキットの PDF バージョンをダウンロードするオプションを彼女に提供します。画面下の矢印ボタンにより、Sarah は画面をスクロールダウンし、ウェルカムキットの他のセクションを次々に閲覧できます。

benefits

ウェルカムキットにはもうひとつの申込フォームが含まれています。Sarah がこれに入力して送信すると、We.Finance 社のポータルサイトを訪れることなく、ウェルカムキットの中からアドオンカードの申し込みを行うことができます。

addon-card

仕組み

ウェルカムキットは、cq-we-finance-content-pkg.zip パッケージに含まれるアダプティブドキュメントです。ウェルカムキットの中のプロモーションキャンペーン情報は、Adobe Target サーバーから配信されます。キャンペーン情報は個別の顧客セグメントを対象としてカスタマイズされます。ウェルカムキットは、前もって設定された Adobe Target サーバーから、プラチナカードの女性利用客の閲覧者セグメントのためのキャンペーン情報を取得します。

デスクトップバージョンのウェルカムキットの中でクレジットカードのメリットを表示するインタラクティブカードは、ドキュメントフラグメントのデフォルトカードレイアウトを使用して作成されたカスタムレイアウトです。

アドオンカード申込フォームは、ウェルカムキットのアダプティブドキュメントの中に埋め込まれたアダプティブフォームです。

実際の動作確認

前の手順で受信した電子メールの中の「Resume」ボタンをクリックします。申込書の下書きが開きます。各項目に詳細を入力し、申込書を送信します。するとウェルカムキットを受信するので、その内容を確認します。

次の URL でもウェルカムキットが表示されます。

http:// <host>:<port>/content/forms/af/we-finance/credit-card-welcome-kit.html?wcmmode=disabled

作成者インスタンスと発行インスタンスでアクセスできます。 

Sarah がクレジットカード明細を受信

Sarah は、クレジットカードの使用開始後に、自らのクレジットカード明細を含む別の電子メールを We.Finance 社から受信します。以下の画像では、クレジットカード明細へのリンクを含む電子メールのモバイルバージョンを紹介しています。

statement-email

Sarah は「View Statement」(明細を表示)ボタンをクリックし、クレジットカード明細を確認します。この明細はインタラクティブステートメントであり、様々な要素から構成されています。

  • 明細概要
  • 支払細目レポート
  • 支払分析のグラフィック表示
  • 明細の中から支払合計額の支払方法を選択するオプション
  • 支払受領書のダウンロード
クレジットカード明細の別の部分

Sarah は、最近のクレジットカードの使用状況を知るために、わざわざ電子メールからポータルサイトまたは検索へ進む必要がありません。任意の明細から「View Latest Statement」(最近の明細を表示)ボタンをクリックするだけで、最近の明細を開くことができます。

細目が記載された明細はレスポンシブテーブルとしてレイアウトされており、明細の中で一部または全額を支払う選択を行うことができるようになっています。

詳細明細

Sarah は明細の中から支払い期限にさしかかっている支払いを行い、支払受領書を即座にダウンロードすることを選択します。ただし、「Download Receipt」(受領書のダウンロード)ボタンで支払受領書をダウンロードすることはできません。「Download Receipt」(受領書のダウンロード)ボタンはデモ目的で設置されています。このボタンを使用して受領書をダウンロードする機能を有効にするためのコードを追加できます。 

仕組み

クレジットカード明細はアダプティブドキュメントです。明細中の支払細目一覧はレスポンシブテーブルです。支払分析用のグラフィック表示は、カスタムグラフコンポーネントです。このコンポーネントでは、支払細目一覧のデータに基づいて円グラフを生成します。

実際の動作確認

インタラクティブなクレジットカード明細を確認するには、次の URL を参照します。

http://<hostname>:<port>/content/forms/af/we-finance/account-statement.html?wcmmode=disabled

作成者インスタンスと発行インスタンスでアクセスできます。 

We.Finance 社がクレジットカード申込フォームのパフォーマンスを分析

We.Finance 社は、時折、自社のクレジットカード申し込みを見直して、顧客が直面しうる問題についてチェックします。同社はこの分析を使用して、クレジットカード申込フォームの中で必要な変更について、情報に基づいた判断を行います。その目的は、ユーザーエクスペリエンスを強化し、申込希望者がフォームを途中で破棄する割合を低減し、カードの乗り換えをしやすくすることにあります。同社は、分析のために AEM Forms を Adobe Analytics と統合しています。以下の画像では、同社の Analytics ダッシュボードを紹介しています。

Analytics ダッシュボードの見方について詳しくは、「AEM Forms の分析レポートの確認方法と詳細」を参照してください。

cc-analytics

仕組み

クレジットカード申込フォームのパフォーマンス指標は、Adobe Analytics を使用して追跡されます。Adobe Analytics の設定とレポートの表示について詳しくは、「フォームおよびドキュメント用の Analytics の設定」を参照してください。

実際の動作確認

Analytics レポートを閲覧および検討したい方のために、リファレンスサイトでクレジットカード申込フォームのシードデータが提供されています。シードデータを使用する前に、「Analytics の設定」を参照してください。シードデータを使用したレポートを閲覧するには、作成者インスタンスで以下の手順を実行します。

  1. http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments の「フォームとドキュメント」UI へ進みます。
  2. We.Finance フォルダーをクリックし、開きます。
  3. ツールバーの「選択」ツールをクリックし、「Application for Credit Card」アダプティブフォームを選択します。
  4. ツールバーの「その他」をクリックし、「Analytics レポート」をクリックすると、シードデータに基づいて Analytics レポートが生成されます。

Analytics レポートのシードデータにアクセスするには:

  1. CRXDE lite のアドレスブラウザーで、/apps/we-finance/demo-artifacts/analyticsTestData/Credit card Analytics Test Data と入力します。
  2. 左側のディレクトリ構造でテストデータが選択されます。 
  3. 選択されたファイルをダブルクリックして、右側のパネルにファイルのコンテンツを開きます。 
  4. テストデータファイル内のすべてのコンテンツをコピーします。 
  5. CRXDE で、/content/dam/formsanddocuments/we-finance/cc-app/jcr:content/analyticsdatanode/lastsevendays に移動します。
  6. 「Properties」(プロパティ)内の analyticsdata フィールドに、テストデータファイルのコピーした内容を貼り付けます。 

クレジットカード申込書の A/B テスト

クレジットカード申込フォームのパフォーマンスを分析し継続的にその改善を図ることに加えて、We.Finance 社は、AEM Forms と Adobe Target を統合し、A/B テストを作成します。このテストにより、クレジットカード申込フォームの異なるエクスペリエンスを提供し、フォームの完成および送信という見地から乗り換えの促進につながるエクスペリエンスを突き止めることができます。

AEM Forms で Target を設定するには、「AEM Forms での Target の設定と統合」を参照してください。

以下の手順を実行し、We.Finance 社クレジットカード申込フォームのための A/B テストを試作しましょう。

  1. http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments の「フォームとドキュメント」へ進みます。
  2. We.Finance フォルダーをクリックし、開きます。
  3. ツールバーの「選択」ツールをクリックします。
  4. Application for Credit Card」アダプティブフォームを選択します。
  5. ツールバーの「その他」をクリックし、「A/B テストを設定」を選択します。「A/B テストを設定」ページが開きます。
  6. アクティビティ名」を指定します。
  7. オーディエンスドロップダウンリストから、そのフォームの異なるエクスペリエンスの提供対象オーディエンスを選択します。例えば、Chrome を使用している訪問者を選択します。
  8. エクスペリエンス A および B に対するエクスペリエンス配布フィールドで、パーセンテージの見地から配信内容を指定し、全オーディエンス間のエクスペリエンスの配信を決定します。例えば、エクスペリエンス A および B に対してそれぞれ 40、60 を指定すると、エクスペリエンス A はオーディエンスの 40 % に配布され、残りの 60 % にはエクスペリエンス B が表示されます。
  9. 設定」をクリックします。A/B テストの作成を確認するダイアログが表示されます。
  10. 完了」をクリックします。
  11. Application for Credit Card」フォームを選択し、「開く」をクリックします。その後表示されるオプションにより、エクスペリエンスの一方を開くことができます。「エクスペリエンス B」をクリックします。フォームが編集モードで開きます。
  12. 必要に応じてフォームを修正し、デフォルトのエクスペリエンス A とは異なるエクスペリエンスを作成します。
  13. 「フォームとドキュメント」UI へ進み、フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。
  14. 次の URL を使用して、Google Chrome ブラウザーで数回フォームを開きます。
    http://<hostname>:<port>/content/dam/formsanddocuments/we-finance/cc-app/jcr:content?wcmmode=disabled
    注意:
    次回以降、フォームを開く前に mbox という名前を持つ Cookie を、ブラウザーの Cookie パーシステンスから削除してください。
    すると、フォームのエクスペリエンス A および B をランダムに確認することになります。
  15. フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。テスト開始直後には、レポートに多くのデータが表示されることはありません。シードデータを使用して、A/B テストレポートがどのように表示されるか確認しましょう。
  16. CRXDE Lite を開き、次のファイルのバックアップを作成します。 /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. 上述のファイルの中身を、次のファイルの中身と置換します。/apps/we-finance/demo-artifacts/targetreport.js
    注意:
    これらの変更はデモのためだけに行われます。この手順を完了した後、必ずファイルの中身を元に戻してください。
  18. 生成したレポートを更新すると、以下のような画面が表示されます。レポートダッシュボードを確認します。
ab-test-report

A/B テストを終了するには、レポートダッシュボードの「A/B テストを終了」ボタンをクリックします。ここで、一方のエクスペリエンスを公表するように求めるダイアログが表示されます。推奨結果を選択し、A/B テストの終了を確認します。

エクスペリエンス A を優れていると判断した場合は、A/B テストの終了後は、エクスペリエンス A のみが Chrome ユーザーを含むすべてのオーディエンスに配信されます。

住宅ローン申し込みのチュートリアル

We.Finance 社の住宅ローンのシナリオでは、以下の人物が登場します。

  • Sarah Rose(We.Finance 社の顧客)
  • Gloria Rios(We.Finance 社のクレジットカードおよび住宅ローンの責任者)
  • John Doe(We.Finance 社の顧客担当代表)

以下の解説図は、住宅ローン申し込みのワークフローを図式化したものです。

住宅ローン申し込みの解説図

リファレンスサイトのシナリオを順に詳しく見ていきながら、AEM Forms が We.Finance 社の目標達成にどのように貢献しているか確認しましょう。

Sarah は We.Finance 社の Web サイトにアクセスして住宅ローンを申し込む

Sarah Rose は家を購入する計画を立て、住宅ローンのプランを探しています。Sarah は We.Finance 社の顧客なので、We.Finance 社のポータルサイトにアクセスして住宅ローンのプランを探しています。住宅ローンのセクションに移動すると、ポータルサイトでローンの計算ができることが分かりました。Sarah が詳細を入力して「Calculate my mortgage」をクリックすると、住宅ローンのプランが表示されます。

loans1
loans2
住宅ローン計算機

loans3
住宅ローン計算機の結果

仕組み

ローンページにある住宅ローン計算機は、AEM サイトページのアダプティブフォームに埋め込まれています。編集モードのローンページは、http://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.html で確認できます。

埋め込まれた住宅ローン計算機はアダプティブフォームです。これは、計算機フィールドに入力されたローンの詳細に基づいて、ルールを使用して EMI 総額を算出します。アダプティブフォームは、http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/hm-calc.html で確認できます。

実際の動作確認

We.Finance 社のポータルサイト(http://<publishHost>:<publishPort>/content/we-finance/global/en.html)に移動して、「Loans」をクリックします。住宅ローン計算機に詳細を入力すると、その結果が表示されます。

Sarah がキャンペーンに関心を抱き、申し込みを決意

Sarah は住宅ローンの申し込みを選択し、住宅ローン計算機の結果に表示された「Apply Now」をクリックします。住宅ローンの申込フォームが開きます。

Sarah がモバイルデバイスから住宅ローンの申込フォームにアクセスした場合は、申込フォームはモバイルデバイスの表示用に最適化されたビューで開かれます。このビューでは、申込フォームは一度に 1 つのセクションでレンダリングされます。そのため、Sarah は申込フォームを移動するたびに、順を追って情報の表示および入力を行うことができます。

以下の画像では、Sarah が住宅ローンの申し込み時にモバイルデバイス上で閲覧したワークフローを紹介します。

モバイルデバイスでの住宅ローン申込フォームの記入

Sarah がデスクトップから「Apply now」をクリックすると、以下のように住宅ローン申込フォームが表示されます。Sarah が住宅ローン計算機に入力した情報は、申込フォームに事前入力されます。Sarah は残りの情報を入力し、「Continue」をクリックします。

mortgage-application

Sarah が住宅ローン計算機に入力した情報に基づいて、いくつかの住宅ローンプランが提示されます。その中から自分の要件に適したプランを選択し、申込フォームへの入力を続けます。最後に署名を行い、申込書を送信します。

送信された申込書は、承認用に We.Finance 社に送られます。

申込書のドラフトの保存

仕組み

Apply Now」ボタンから、Sarah は直接住宅ローンの申込フォームにアクセスできます。申込フォームはアダプティブフォームです。これは http://[host]:[Port]/editor.html/content/forms/af/we-finance/hm-app.html で、オーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

  • XSD スキーマ、homeMortgageApplication.xsd に基づいている。
  • スタイル設定は We Finance Theme B を使用し、レイアウトは We.Finance テンプレートを使用して構築されている。また、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されています。モバイルデバイスでフォームを開いている場合は、プログレッシブモバイルレイアウトが表示されます。アダプティブフォームで使用されるテンプレートおよびテーマは、AEM オーサーインスタンスの次の場所で確認できます。
    • http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance
    • http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-b/jcr:content
  • 申込フォームにある最初のタブの「Getting Started」は、動的な住宅ローン計算機で、ユーザーの選択内容に基づいてオプションを表示する。例えば、購入のオプションと借り換えのオプションではフィールドおよび値が異なります。この機能は、表示または非表示のルールを使用して実行されます。さらに、「Continue」をクリックして「Plans」タブを初期化すると、フォームデータモデルで設定された Web サービスが呼び出され、住宅ローンプランが取得されて表示されます。フォームデータモデルと設定済みサービスは、http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm で確認できます。
  • さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。
  • 署名ステップコンポーネントを使用して、入力が完了したフォームを表示し、フォーム上で電子署名を行うことができる。
  • AEM ワークフローを起動する送信アクションを使用して、We Finance 住宅ローン AEM ワークフローをトリガーする。このフォームで使用されているワークフローは、http://[host]:[Port]/cf#/etc/workflow/models/we-finance-home-mortgage-workflow.html で確認できます。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

また、住宅ローン申し込みのアダプティブフォームで使用した機能の詳細については、次のドキュメントを参照してください。

実際の動作確認

http://[server]:[port]/content/we-finance/global/en/all-forms.html に移動して、住宅ローン申込フォームの「Apply now」ボタンをクリックします。「Getting Started」タブに詳細を入力し、さまざまなオプションを試して、申込書を送信します。

申込フォームで有効な電子メール ID を指定し、インボックスで確認のメールを受信します。

We.Finance 社が申し込みを受信

Sarah によって送信された住宅ローン申込書を、We.Finance 社が受信します。申し込みの承認または拒否のタスクが Gloria Rios に割り当てられます。彼女は申し込みを確認し、行政 ID が入力されていないことに気付きます。

grios-inbox

Gloria はタスクを開き、「Need More Info」をクリックして、行政 ID が入力されていないというコメントを入力します。

need-more-info

これにより、タスクは We.Finance 社の顧客担当代表の John Doe に割り当てられます。John はタスクを開き、Gloria のコメントを確認します。John は Sarah に連絡を取り、ID のコピーを送信してくれるように伝えます。Sarah の ID のコピーを受け取ったら、タスクに添付して再評価するために申込書を送信します。

reevaluation

タスクは Gloria に再度割り当てられます。添付された ID を確認し、申し込みを承認します。 

仕組み

Sarah が住宅ローンの申込フォームにすべて記入して送信すると、Forms ワークフローがトリガーされ、Gloria の AEM インボックスにタスクが作成されます。Gloria が申込書を確認して追加の情報をリクエストしたため、タスクは John Doe に割り当てられます。John Doe が ID を添付して申込書を再度送信すると、申込書は Gloria に割り当てられます。これは、住宅ローンの申し込みに関連する AEM ワークフローで定義されています。

OSGi 上の AEM Forms によって Forms 中心のワークフローが提供され、アダプティブフォームに基づいたワークフローを構築できます。これらのワークフローをレビューや承認、ビジネスプロセスフローに使用して、ドキュメントサービスを開始したり、Adobe Sign 署名ワークフローと統合したりすることができます。詳しくは、「OSGi 上の Forms 中心のワークフロー」を参照してください。

以下の図は、住宅ローンの申し込みに関連する AEM ワークフローを図式化したものです。

mortgage-workflow

実際の動作確認

AEM インボックスには http://<hostname>:<AuthorPort>/aem/inbox からアクセスできます。Gloria Rios のユーザー名とパスワード(grios/password)と、John Doe のユーザー名とパスワード(jdoe/jdoe)をそれぞれ使用して AEM インボックスにログインし、住宅ローンの申し込みワークフローを参照します。

Forms 中心のワークフロータスクで AEM インボックスを使用する方法について詳しくは、「AEM インボックスでの Forms アプリケーションとタスクの管理」を参照してください。

Sarah がウェルカムキットを受信

Sarah の住宅ローン申込が承認されると、彼女はウェルカムキットへのリンクを含む電子メールを受信します。Sarah はウェルカムキットを開き、これにはカルーセルスライド式のディスプレイが含まれており、そこに Sarah 向けにカスタマイズされたプロモーションキャンペーン情報が表示されます。 

mortgage-welcome-kit

ウェルカムキットは Sarah に合わせてパーソナライズされており、彼女に関わる情報を表示します。ウェルカムキットの PDF バージョンをダウンロードするオプションを彼女に提供します。画面下の矢印ボタンにより、Sarah は画面をスクロールダウンし、ウェルカムキットの他のセクションを次々に閲覧できます。

仕組み

ウェルカムキットは、cq-we-finance-content-pkg.zip パッケージに含まれるアダプティブドキュメントです。ウェルカムキットの中のプロモーションキャンペーン情報は、Adobe Target サーバーから配信されます。キャンペーン情報は個別の顧客セグメントを対象としてカスタマイズされます。ウェルカムキットは、前もって設定された Adobe Target サーバーから、女性利用客の閲覧者セグメントのためのキャンペーン情報を取得します。

デスクトップバージョンのウェルカムキットにあるインタラクティブカードは、ドキュメントフラグメントのデフォルトのカードのレイアウトを使用して作成されたカスタムレイアウトを使用します。

実際の動作確認

住宅ローンの申込フォームの入力時に電子メール ID を入力した場合、ウェルカムキットへのリンク先が表示された電子メールを受信します。インボックスをチェックしてウェルカムキットを確認します。

これは次の URL にある AEM パブリッシュインスタンスに表示されます。

http://[host]:[port]/content/forms/af/we-finance/mortgage-loan-welcome-kit.html

Sarah が取引明細書を受信

Sarah が住宅ローンの利用を開始し、賦払金の返済を開始すると、自らの毎月の取引明細を含む別の電子メールを We.Finance 社から受信します。 

mortgage-statement-email

Sarah は「View Statement」(明細を表示)ボタンをクリックし、住宅ローン明細を確認します。この明細はインタラクティブステートメントであり、様々な要素から構成されています。

  • 明細概要
  • 明細詳細

以下の画像では、デスクトップバージョンの取引明細の別の部分を紹介しています。 

住宅ローンの取引明細

細目が記載された明細はレスポンシブテーブルとしてレイアウトされており、明細の中で一部または全額を支払う選択を行うことができるようになっています。

仕組み

取引明細はアダプティブドキュメントです。これは JSON バッチプロセスを使用して生成されます。明細中の支払細目一覧はレスポンシブテーブルです。 

実際の動作確認

インタラクティブな住宅ローン明細を確認するには、次の URL を参照します。

http://<hostname>:<port>/content/forms/af/we-finance/mortgage-account-statement.html?wcmmode=disabled

作成者インスタンスと発行インスタンスでアクセスできます。 

We.Finance 社が住宅ローン申込フォームのパフォーマンスを分析

We.Finance 社は、時折、自社の住宅ローン申し込みを見直して、顧客が直面しうる問題についてチェックします。同社はこの分析を使用して、住宅ローン申込フォームの中で必要な変更について、情報に基づいた判断を行います。その目的は、ユーザーエクスペリエンスを強化し、申込希望者がフォームを途中で破棄する割合を低減し、カードの乗り換えをしやすくすることにあります。同社は、分析のために AEM Forms を Adobe Analytics と統合しています。以下の画像では、同社の Analytics ダッシュボードを紹介しています。

Analytics ダッシュボードの見方について詳しくは、「AEM Forms の分析レポートの確認方法と詳細」を参照してください。

mortgage-analytics

仕組み

住宅ローン申込フォームのパフォーマンス指標は、Adobe Analytics を使用して追跡されます。Adobe Analytics の設定とレポートの表示について詳しくは、「フォームおよびドキュメント用の Analytics の設定」を参照してください。

実際の動作確認

Analytics レポートを閲覧および検討したい方のために、リファレンスサイトで住宅ローン申込フォームのシードデータが提供されています。シードデータを使用する前に、「Analytics の設定」を参照してください。シードデータを使用したレポートを閲覧するには、作成者インスタンスで以下の手順を実行します。

  1. http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments の「フォームとドキュメント」UI へ進みます。
  2. we-finance フォルダーをクリックし、開きます。
  3. Home Mortgage Application Form」アダプティブフォームを選択します。
  4. ツールバーの「その他」をクリックし、「Analytics レポート」をクリックすると、シードデータに基づいて Analytics レポートが生成されます。

Analytics レポートのシードデータにアクセスするには:

  1. CRXDE lite のアドレスブラウザーで、/apps/we-finance/demo-artifacts/analyticsTestData/Home Mortgage Analytics Test Data と入力します。
  2. 左側のディレクトリ構造でテストデータが選択されます。 
  3. 選択されたファイルをダブルクリックして、右側のパネルでファイルのコンテンツを開きます。 
  4. テストデータファイル内のすべてのコンテンツをコピーします。 
  5. CRXDE で、/content/dam/formsanddocuments/we-finance/hm-app/jcr:content/analyticsdatanode/lastsevendays に移動します。
  6. 「Properties」(プロパティ)内の analyticsdata フィールドに、テストデータファイルのコピーした内容を貼り付けます。 

住宅ローン申込書の A/B テスト

住宅ローン申込フォームのパフォーマンスを分析し継続的にその改善を図ることに加えて、We.Finance 社は、AEM Forms と Adobe Target を統合し、A/B テストを作成します。このテストにより、申込フォームの異なるエクスペリエンスを提供し、フォームの完成および送信という見地から乗り換えの促進につながるエクスペリエンスを突き止めることができます。

AEM Forms で Target を設定するには、「AEM Forms での Target の設定と統合」を参照してください。

作成者インスタンスで以下の手順を実行して、We.Finance 社の住宅ローン申込フォームのための A/B テストを試作しましょう。

  1. http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments の「フォームとドキュメント」へ進みます。
  2. we-finance フォルダーをクリックし、開きます。
  3. ツールバーの「選択」ツールをクリックします。
  4. Home Mortgage Application Form」アダプティブフォームを選択します。
  5. ツールバーの「その他」をクリックし、「A/B テストを設定」を選択します。「A/B テストを設定」ページが開きます。
  6. アクティビティ名」を指定します。
  7. オーディエンスドロップダウンリストから、そのフォームの異なるエクスペリエンスの提供対象オーディエンスを選択します。例えば、Chrome を使用している訪問者を選択します。
  8. エクスペリエンス A および B に対するエクスペリエンス配布フィールドで、パーセンテージの見地から配信内容を指定し、全オーディエンス間のエクスペリエンスの配信を決定します。例えば、エクスペリエンス A および B に対してそれぞれ 40、60 を指定すると、エクスペリエンス A はオーディエンスの 40 % に配布され、残りの 60 % にはエクスペリエンス B が表示されます。
  9. 設定」をクリックします。A/B テストの作成を確認するダイアログが表示されます。
  10. 完了」をクリックします。
  11. Home Mortgage Application」フォームを選択し、「開く」をクリックします。その後表示されるオプションにより、エクスペリエンスの一方を開くことができます。「エクスペリエンス B」をクリックします。フォームが編集モードで開きます。
  12. 必要に応じてフォームを修正し、デフォルトのエクスペリエンス A とは異なるエクスペリエンスを作成します。
  13. 「フォームとドキュメント」UI へ進み、フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。
  14. 次の URL を使用して、Google Chrome ブラウザーで数回フォームを開きます。
    http://<hostname>:<port>/content/dam/formsanddocuments/we-finance/Home-Mortgage-Application-Form/jcr:content?wcmmode=disabled
    注意:
    次回以降、フォームを開く前に mbox という名前を持つ Cookie を、ブラウザーの Cookie パーシステンスから削除してください。
    すると、フォームのエクスペリエンス A および B をランダムに確認することになります。
  15. フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。テスト開始直後には、レポートに多くのデータが表示されることはありません。シードデータを使用して、A/B テストレポートがどのように表示されるか確認しましょう。
  16. CRXDE Lite を開き、次のファイルのバックアップを作成します。 /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. 上述のファイルの中身を、次のファイルの中身と置換します。/apps/we-finance/demo-artifacts/targetreport.js
    注意:
    これらの変更はデモのためだけに行われます。この手順を完了した後、必ずファイルの中身を元に戻してください。
  18. 生成したレポートを更新すると、以下のような画面が表示されます。レポートダッシュボードを確認します。
ab-test-report

A/B テストを終了するには、レポートダッシュボードの「A/B テストを終了」ボタンをクリックします。ここで、一方のエクスペリエンスを公表するように求めるダイアログが表示されます。推奨結果を選択し、A/B テストの終了を確認します。

エクスペリエンス A を優れていると判断した場合は、A/B テストの終了後は、エクスペリエンス A のみが Chrome ユーザーを含むすべてのオーディエンスに配信されます。

Microsoft Dynamics を使用した住宅ローンの申し込みのチュートリアル

Microsoft Dynamics を使用した We.Finance 社の住宅ローンのシナリオでは、以下の人物が登場します。

  • Sarah Rose(We.Finance 社の顧客)
  • We.Finance Microsoft Dynamics インスタンスの管理者

Microsoft Dynamics を使用した住宅ローンの申し込みのチュートリアルでは、リファレンスサイトでデータ統合に Microsoft Dynamics を使用している場合に、We.Finance 社の顧客が住宅ローンの申し込みにどのようにサイトを利用しているかを示しています。このチュートリアルは、Microsoft Dynamics で受信されたユーザーがデータ入力を完了するところで終わります。このシナリオを進める前に、「We.Finance リファレンスサイトの住宅ローンワークフローのための Microsoft Dynamics 365 の設定」を完了する必要があります。

Sarah は We.Finance 社の Web サイトにアクセスして住宅ローンを申し込む

Sarah Rose は家を購入する計画を立て、住宅ローンのプランを探しています。Sarah は We.Finance 社の顧客なので、We.Finance 社のポータルサイトにアクセスして住宅ローンのプランを探しています。住宅ローンのセクションに移動すると、ポータルサイトでローンの計算ができることが分かりました。Sarah が詳細を入力して「Calculate my mortgage」をクリックすると、住宅ローンのプランが表示されます。

loans1
loans2
住宅ローン計算機

loans3
住宅ローン計算機の結果

仕組み

ローンページにある住宅ローン計算機は、AEM サイトページのアダプティブフォームに埋め込まれています。編集モードのローンページは、http://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.html で確認できます。

埋め込まれた住宅ローン計算機はアダプティブフォームです。これは、計算機フィールドに入力されたローンの詳細に基づいて、ルールを使用して EMI 総額を算出します。アダプティブフォームは、http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/ms-dynamics/home-mortgage-calculator.html で確認できます。

実際の動作確認

We.Finance 社のポータルサイト(http://<publishHost>:<publishPort>/content/we-finance/global/en.html)に移動して、「Loans」をクリックします。住宅ローン計算機に詳細を入力すると、その結果が表示されます。

Sarah がキャンペーンに関心を抱き、申し込みを決意

Sarah は住宅ローンの申し込みを選択し、住宅ローン計算機の結果に表示された「Apply Now」をクリックします。住宅ローンの申込フォームが開きます。

Sarah がモバイルデバイスから住宅ローンの申込フォームにアクセスした場合は、申込フォームはモバイルデバイスの表示用に最適化されたビューで開かれます。このビューでは、申込フォームは一度に 1 つのセクションでレンダリングされます。そのため、Sarah は申込フォームを移動するたびに、順を追って情報の表示および入力を行うことができます。

以下の画像では、Sarah が住宅ローンの申し込み時にモバイルデバイス上で閲覧したワークフローを紹介します。

モバイルデバイスでの住宅ローン申込フォームの記入

Sarah がデスクトップから「Apply now」をクリックすると、以下のように住宅ローン申込フォームが表示されます。Sarah が住宅ローン計算機に入力した情報は、申込フォームに事前入力されます。Sarah は残りの情報を入力し、「Continue」をクリックします。

mortgage-application

Sarah が住宅ローン計算機に入力した情報に基づいて、いくつかの住宅ローンプランが提示されます。その中から自分の要件に適したプランを選択し、申込フォームへの入力を続けます。最後に署名を行い、申込書を送信します。

送信された申込書は、承認用に We.Finance 社に送られます。

申込書のドラフトの保存

仕組み

Apply Now」ボタンから、Sarah は直接住宅ローンの申込フォームにアクセスできます。申込フォームはアダプティブフォームです。これは http://[host]:[Port]/editor.html/content/forms/af/we-finance/ms-dynamics/application-for-home-mortgage.html で、オーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

  • XSD スキーマ、homeMortgageApplication.xsd に基づいている。
  • スタイル設定は We Finance Theme B を使用し、レイアウトは We.Finance テンプレートを使用して構築されている。また、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されています。モバイルデバイスでフォームを開いている場合は、プログレッシブモバイルレイアウトが表示されます。アダプティブフォームで使用されるテンプレートおよびテーマは、AEM オーサーインスタンスの次の場所で確認できます。
    • http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance
    • http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-b/jcr:content
  • 申込フォームにある最初のタブの「Getting Started」は、動的な住宅ローン計算機で、ユーザーの選択内容に基づいてオプションを表示する。例えば、購入のオプションと借り換えのオプションではフィールドおよび値が異なります。この機能は、表示または非表示のルールを使用して実行されます。さらに、「Continue」をクリックして「Plans」タブを初期化すると、フォームデータモデルで設定された Web サービスが呼び出され、住宅ローンプランが取得されて表示されます。フォームデータモデルと設定済みサービスは、http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm で確認できます。
  • さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。
  • 署名ステップコンポーネントを使用して、入力が完了したフォームを表示し、フォーム上で電子署名を行うことができる。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

管理者は送信されたデータを Microsoft Dynamics インスタンスで表示する

Microsoft Dynamics インスタンスで Sarah によって送信された住宅ローン申込書を、We.Finance 社が受信します。管理者は、潜在顧客の列のエントリをタップし、Sarah Rose 用に作成された潜在顧客のレコードに移動します。

msdynamicsrecord

住宅保険申し込みのチュートリアル

We.Finance 社の住宅保険のシナリオでは、以下の人物が登場します。

  • Sarah Rose(We.Finance 社の顧客)
  • Gloria Rios(We.Finance 社のクレジットカードおよび住宅ローンの責任者)
  • Frank De Costa(We.Finance 社の保険代理店)

以下の解説図は、住宅保険の申し込みシナリオのワークフローを図式化したものです。

workflow_insurance

リファレンスサイトのシナリオを順に詳しく見ていきながら、AEM Forms が We.Finance 社の目標達成にどのように貢献しているか確認しましょう。

Sarah は We.Finance 社からニュースレターを受信し、住宅保険を申し込む

Sarah Rose は We.Finance 社の住宅ローンの顧客で、住宅保険をいろいろと探しています。Sarah は We.Finance 社のポータルサイトにアクセスし、住宅保険のプランを探します。We.Finance 社は彼女が既存の顧客であることを特定し、対象となる内容のニュースレターを電子メールで送信します。このニュースレターには、お勧めの住宅保険のプランが含まれています。

insurance-newsletter

仕組み

Sarah に送信されたニュースレターは、特定の電子メール ID への電子メールをトリガーするカスタム実装です。ニュースレターに表示された「Apply Now」ボタンは住宅保険の申込フォームにリンクされます。これはパブリッシュインスタンス上のアダプティブフォームです。 

実際の動作確認

次の URL を開くと、ニュースレターの電子メールがトリガーされます。[emailID]を有効な電子メールアカウントに置き換え、ニュースレターを受信します。ニュースレターを開き、「Apply Now」をクリックして、住宅保険の申込フォームに移動します。

http://[authorServer]:[authorPort]/content/campaigns/we-finance/start.html?app=ins&email=[emailID]&givenName=Sarah&familyName=Rose

Sarah がお勧めの住宅保険に関心を抱き、申し込みを決意

Sarah はニュースレターに載っていた住宅保険プランが気に入り、この保険を申し込むことに決めました。Sarah がニュースレターの「Apply Now」ボタンをクリックすると、We.Finance 社のポータルサイトの住宅保険の申込フォームが開きます。申込フォームはカードレイアウトを使用してセクションごとに構成されています。

個人情報のページで社会保険番号を入力すると、使用している資格情報でログインするようにプロンプトが表示されます。

insurance-ssn

Sarah は We.Finance 社の既存の顧客です。Sarah が We.Finance 社のアカウントの資格情報でログインすると、個人情報の詳細がフォームに自動で入力されます。彼女は続けてフォームに入力し、申込書を送信します。

Sarah がモバイルデバイスから申込書を送信した場合は、次の画面で順に進んで行きます。

insurance-form-on-mobile

仕組み

ニュースレターの「Apply Now」をクリックすると、We.Finance 社のポータルサイトの住宅保険の申込フォームに移動します。申込フォームはアダプティブフォームです。これは http://[host]:[Port]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.html で、オーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

  • XSD スキーマ、insurance.xsd に基づいている。
  • スタイルに保険テーマを使用して構築されており、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されている。モバイルデバイスでフォームを開いている場合は、プログレッシブモバイルレイアウトが表示されます。テンプレートは http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance で、テーマは http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/insurance/jcr:content で確認できます。
  • フォームデータモデルサービスを呼び出すためのアダプティブフォームルールが含まれ、ログインしたユーザーのユーザー詳細を事前入力する。また、サービスを呼び出す際は、フォームに入力した社会保険番号や電子メールアドレスにより、情報が事前入力されます。フォームデータモデルとそのサービスは、http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm で確認できます。
  • さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。
  • 「Save my progress」ボタンをクリックすると、ユーザーに対して一意の ID が生成され、AEM リポジトリのノード内に一部入力済みの申込フォームが下書きとして保存される。また、同じアクションによって、申込フォームの下書きを含むノードへのリンクを電子メールで送信する許可を求めるダイアログが表示されます。確認ダイアログの「Send mail」ボタンをクリックすると、下書きを含むノードへのリンクを持つ電子メールが自動送信されます。
  • AEM ワークフローを起動する送信アクションを使用して、住宅保険の承認ワークフローをトリガーする。このフォームで使用されているワークフローは、http://[host]:[Port]/cf#/etc/workflow/models/we-finance-insurance-workflow.html で確認できます。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

また、住宅保険申し込みのアダプティブフォームで使用した機能の詳細については、次のドキュメントを参照してください。

実際の動作確認

電子メールで受信したニュースレターの「Apply now」ボタンをクリックします。または、http://[publishHost]:[publishPort]/content/we-finance/global/en/all-forms.html に移動して保険の申込フォームにある「Apply」をクリックします。「Social Security Number」フィールドで 123456789 を指定します。プロンプトが表示されたら、ユーザー名とパスワードに srose/srose と入力してログインします。

詳細を入力し、さまざまなアダプティブフォームコンポーネントを探して、申込書を送信します。アダプティブフォームは、http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.html で確認できます。

We.Finance 社が申し込みを承認し、Sarah が契約書に署名

Sarah によって送信された住宅保険申込書を、We.Finance 社が受信します。タスクは Gloria Rios に割り当てられます。Gloria は AEM インボックスで申込書を確認し、これを承認します。

insurance-inbox-grios

Gloria が Sarah の住宅保険の申し込みを承認すると、Frank De Costa の AEM インボックスにタスクが作成されます。Frank はタスクをレビューします。Frank は Sarah 用に住宅保険の保険契約書を準備し、この契約書を Sarah の申込書に添付して彼女に送信して、契約書に署名をしてもらいます。

insurance-contact-letter

Sarah は、署名を行う住宅保険の保険契約書へのリンクを含む電子メールを受信します。Sarah は契約書を確認して、署名します。

insurance-contract-email

仕組み

Sarah が住宅保険の申込フォームを送信すると、Forms ワークフローがトリガーされ、Gloria の AEM インボックスにタスクが作成されます。Gloria が申込書を確認して承認したため、タスクは Frank De Costa に割り当てられます。ある人物から別の人物へのタスクのフローは、保険の申し込みに関連する AEM ワークフローで定義されます。ワークフローについて詳しくは、「OSGi 上の Forms 中心のワークフロー」を参照してください。

以下の図は、保険の申し込みに関連する AEM ワークフローを図式化したものです。

insurance-workflow

Frank は Correspondence Management を使用して、住宅保険の保険契約書を準備します。彼は契約書の PDF をダウンロードして Sarah の申込書に添付し、「Send Contract」をクリックします。このワークフローにより、署名を行う住宅保険の保険契約書を含む Sarah へのメールがトリガーされます。

実際の動作確認

次の手順を実行します。

  1. AEM インボックスに移動し、Gloria のユーザー名とパスワード(grios/grios)を使用してログインします。Sarah の住宅保険の申し込みを承認します。
  2. 次に、Frank のユーザー名とパスワード(fdcosta/password)を使用して AEM インボックスにログインします。タスクが表示されます。
  3. http://[authorHost]:[authorPort]/aem/forms/assets.html/content/apps/cm/correspondence/letters/we-finance/insurance に移動して、住宅所有者の保険契約書のレターテンプレートをプレビューします。
  4. 「Data」パネルで情報を指定します。「Preview」をクリックして、PDF をローカルのファイルシステムにダウンロードします。この PDF ファイルは、contract.pdf filename という名前で保存するようにしてください。
  5. Frank の AEM インボックスに移動してタスクを開き、ダウンロードした契約書の PDF を添付して「Send Contract」をクリックします。
  6. 契約書が含まれる電子メールを開き、ドキュメントに署名します。 

Sarah がウェルカムキットを受信

Sarah が住宅保険の契約書に署名すると、保険契約の詳細が含まれる電子メールを受信します。 

insurance-policy-details

つまり、彼女は保険契約のウェルカムキットを使用して We.Finance 社から別の電子メールを受信します。ウェルカムキットから、Sarah は契約ドキュメントにアクセスしてステートメントを確認することができます。

insurance-welcome-kit

仕組み

ウェルカムキットは、ECMA スクリプトを使用して生成されます。住宅保険のシナリオに関連付られた Forms ワークフローで、データ XML の生成に使用するスクリプトを指定します。これでデータ XML が使用されてウェルカムキットが生成され、電子メールテンプレートへの入力が行われます。このテンプレートは指定された電子メール ID に送信されます。

オーサーインスタンスで、/etc/workflow/scripts/we-finance/insurance/we-finance-insurance-welcome-kit-dataxml-generation.ecma にある住宅保険のシナリオの ECMA スクリプトを確認します。

また、http://[authorHost]:[authorPort]cf#/etc/workflow/models/we-finance-insurance-workflow.html でウェルカムキットデータ XML の生成手順と、ウェルカム電子メールワークフローの手順を確認してください。

実際の動作確認

申込フォームで電子メール ID を指定している場合は、ウェルカムキットへのリンクを含む電子メールを受信します。「My Welcome Kit」をクリックしてウェルカムキットを開きます。

insurance-welcome-kit-email

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー