現在表示中:

必要条件

はじめに - Geometrixx Finance リファレンスサイト」の説明にしたがって、Geometrixx Finance リファレンスサイトを設定します。

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

Geometrixx Finance 社は、金融業界のリーディングカンパニーとして、多種多様な顧客プロフィールの要件に合わせてパーソナライズされた包括的なソリューションを提供しています。

同社は次の新しい 2 つのサービスを展開したばかりです。

  • 特定の顧客向けの各種クレジットカード
  • 住宅ローンサービス

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

以下、クレジットカード申し込みのシナリオと住宅ローン申し込みのシナリオの詳細をそれぞれ説明します。

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

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

Geometrixx Finance 社のクレジットカード申し込みのリファレンスサイトのワークフローの解説図

このシナリオでは、以下の人物が登場します。

  • Sarah Rose(Geometrixx Finance 社の見込み客)
  • John Doe(Geometrixx Finance 社の既存顧客)
  • Gloria Rios(Geometrixx Finance 社クレジットカードおよび住宅ローン部門責任者)

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

注意:

チュートリアルで説明している手順には、Sarah と John の両方が関わっていますが、ここでは Sarah に関する説明と画像のみを記載しています。しかしながら、この説明と画像の内容は John の場合にもあてはめることができます。Sarah と John の相違点は手順の中で説明します。

Sarah が Geometrixx Finance 社のサイトを開いてクレジットカードを申し込む

Sarah と John は Geometrixx Finance 社の顧客です。Sarah は Geometrixx Finance 社のサイトを開いてログインし、「All Forms」タブに移動します。すると、同社が新しいクレジットカードサービスを開始したことに気付きます。興味を持った Sarah はクレジットカードの申し込みをすることにします。 

Geometrixx Finance 社のホームページ

仕組み

Geometrixx Finance 社のサイトは Adobe Experience Manager を使用して作成されています。このサイトには、クレジットカードと住宅ローンの申し込みを行えるそれぞれの AEM Forms ワークフローがあります。チュートリアル全体を想定どおりに進めるためには、クレジットカードの申し込み中、Sarah Rose のペルソナがログインしている必要があります。 

実際の動作確認

Geometrixx Finance 社のリファレンスサイトは、http://<host>:<PublishPort>/content/geometrixx-finance/global/en.html?wcmmode=disabled を参照してください。

Geometrixx Finance 社のホームページで、「All Forms」(すべてのフォーム)をクリックします。「All Applications」(すべての申し込み)ページに「Application for Credit Card」(クレジットカードの申し込み)という項目があります。「Application for Credit Card」(クレジットカードの申し込み)内の「Apply」(申し込む)をクリックして、クレジットカード申し込みのアダプティブフォームを開きます。

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

Sarah はクレジットカードを申し込むことにします。Sarah はクレジットカード申し込みページにある Apply ボタンをクリックします。

Sarah がモバイルデバイスから「Apply 」をクリックすると、クレジットカード申込フォームが開かれ、モバイルデバイスの画面に最適化されたビューで表示されます。このビューでは、申込フォーム全体を単一のビューで表示するのではなく、一度に申込フォームの 1 セクションずつを表示します。そのため、Sarah は、あるセクションから別のセクションへと進むたびに、順を追って情報の表示および入力を行うことができます。

以下の画像では、Sarah がクレジットカードの申込時にモバイルデバイス上で閲覧した画面のうちいくつかを紹介します。

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

Sarah がデスクトップから「Apply 」をクリックすると、クレジットカード申込フォームが開き、以下の画像が表示されます。申込フォームはちょうどカードレイアウトのようにセクションごとに構成されています。Sarah は次々に進めていき、各セクションに詳細を入力します。

デスクトップでのクレジットカード申し込み画面

申込フォームへの入力をある程度まで進めたところで、Sarah は急いでミーティングに向かわなければいけないことを思い出します。そこで、彼女は申込フォームの「Save my progress」(後で続きを入力)をクリックします。このボタンをクリックすると、その時点までに入力されたすべての情報が保存されます。さらに、ダイアログポップアップが表示され、途中まで入力していた内容を後で完成させるために申込フォームへのリンクを電子メールで Sarah のアドレスに送信するかどうか尋ねます。Sarah は「Send mail」(メールを送信)をクリックします。

モバイルとデスクトップでの申し込み再開

注意:

Geometrixx Finance の既存顧客である John Doe の場合、自らのクレジットカード申込書の下書きを完成させるには、Geometrixx Finance ポータルにログイン後、自らのアカウントの「Drafts」(下書き)フォルダーからアクセスすることも可能です。

jdoe-drafts

仕組み

電子メールの「Apply now」ボタンから、Sarah はクレジットカード申込フォームに進みます。申込フォームは、cq-geometrixx-finance-adaptiveform-pkg.zip パッケージで提供されているアダプティブフォームです。申込フォームのレイアウトは、cq-geometrixx-finance-layout-pkg.zip パッケージで定義されています。このアダプティブフォームは Geometrixx Finance のテンプレート上に構築されており、そのスタイルは Geometrixx Finance の テーマ A によって管理されています。選択したカードおよび本人確認に応じてオプションが有効または無効になります。このアダプティブフォームでは、詳細の入力やユーザーレスポンスへの適合のために様々なコンポーネントとルールが使用されています。

アダプティブフォームは、設定により、モバイル・デバイスとデスクトップのどちらでフォームを開いているかに応じてレイアウトを切り替えます。モバイルデバイスでフォームを開いている場合はプログレッシブモバイルレイアウトが表示されます。ここでは、1 度にフォーム全体を表示するのではなく、指定された数のフィールドを表示します。デスクトップ表示では、アダプティブフォーム全体が表示されます。

Save my progress」(後で続きを入力)ボタンをクリックすると、送信アクションが開始されます。そのアクションによって、そのユーザーに対して一意の ID が生成され、AEM リポジトリのノード内に一部入力済みの申込書が下書きとして保存されます。また、同じアクションによって、申込書の下書きを含むノードへのリンクを電子メールで送信する許可を求めるダイアログが表示されます。確認ダイアログの「Send mail」ボタンをクリックすると、下書きを含むノードへのリンクを持つ電子メールが自動送信されます。「はじめに - Geometrixx Finance リファレンスサイト」で説明されている Cron 形式のリターゲティングの再設定を行うと、申込書を完成させていない申込希望者への電子メールが毎日午前 2 時に自動送信されます。

実際の動作確認

前の手順で受信した電子メールの中の「Apply now」ボタンをクリックします。詳細を一部入力し、様々なアダプティブフォームコンポーネントを確認し、「Save my progress」をクリックすると別の電子メールを受信します。こちらのメールには、申込書の下書きにリンクしている「Resume」ボタンが含まれています。

Adobe Campaign の設定を行っておらず、そのせいで自らの電子メール ID の電子メールを受信していない場合は、以下の URL を参照すると Sarah の画面に表示される申込フォームを閲覧できます。

http://<host>:<AuthorPort>/content/forms/af/geometrixx-finance/cc-app.html?wcmmode=disabled

Geometrixx Finance のテーマは以下から入手できます。

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

Geometrixx Finance のテンプレートは以下から入手できます。

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

フォームのすべてのルールを確認するには、以下の手順を実行します。

  1. オーサリングモードでフォームを開きます。 
    URL:http://<host>:<AuthorPort>/editor.html/content/forms/af/geometrixx-finance/cc-app.html
  2. コンポーネントを選択して、 をタップします。ルールエディターにすべてのルールが表示されます。

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

しばらくすると Sarah が戻ってきて、受信箱をチェックし、Geometrixx Finance 社からの電子メールの中の「Resume」ボタンをクリックします。すると、一部記入済みのクレジットカード申込書が再び表示されます。Alison が先ほど提供した情報はすでに入力された状態で表示されます。Alison はフォームの各セクションを順に追って進み、申込書を完成させて送信します。

仕組み

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

実際の動作確認

はじめに - Geometrixx Finance リファレンスサイト」の説明にしたがって Adobe Campaign を設定していれば、Sarah に割り当てた電子メール ID で、申込書の下書きへのリンクを持つ電子メールを受信したはずです。先へ進み、申込書の中の残りのセクションに必要な情報を入力し、送信します。

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

Sarah によって送信されたクレジットカード申込書を、Geometrixx Finance 社が受信します。申込フォームは Geometrixx Finance 社クレジットカードおよび住宅ローン部門の Gloria Rios に届きます。Gloria は申込書の内容を精査し、リスク分析を実行し、申し込みを承認します。

仕組み - OSGi 上の AEM Forms の場合(AEM Forms ワークフローなし)

Sarah がクレジットカード申し込みを記入して送信すると、申し込みの PDF またはレコードのドキュメントが作成され、Gloria Rios の申し込みダッシュボードに送信されます。Gloria は送信されたクレジットカード申し込みを確認し、申し込みを承認または拒否することができます。Gloria は送信レビュー担当者グループ geometrixx-finance-reviewers の一員です。geometrixx-finance-reviewers グループのメンバーは、申し込みを承認または拒否することができます。

実際の動作確認

申し込みを承認または拒否するには、ユーザーグループ geometrixx-finance-reviewers を送信レビュー担当者として追加します。以下の手順を実行して、ユーザーグループ geometrixx-finance-reviewers を送信レビュー担当者として追加します。

  1. 作成者インスタンスで、ツール/セキュリティ/グループに移動します。
  2. forms-submission-reviewers を探してクリックします。
  3. 「メンバーをグループに追加」フィールドで、geometrixx-finance-reviewers を追加します。
    ユーザーグループには、クレジットカードおよび住宅ローン部門責任者である Gloria Rios のペルソナが含まれます。
  4. 保存」をクリックします。

以下の手順を実行して、Gloria の申し込みダッシュボードにアクセスします。Gloria はそこで、送信されたすべての申し込みを確認できます。

  1. ブラウザーで、http://<host>:<PublishPort>/content/geometrixx-finance/global/en.html を開きます。
  2. 画面の右上隅にある「Sign In」(サインイン)をクリックします。
  3. Gloria のログイン資格情報を提供し、「Login as representative」(代表者としてログイン)オプションを有効にして「Log in」(ログイン)をクリックします。
    Gloria の申し込みダッシュボードに移動します。
  4. 申し込みダッシュボードには、以下のオプションがあります。
    • 住宅ローンの申し込み
    • クレジットカードの申し込み
  5. 上記のオプションのいずれかをクリックし、送信された申し込みをダッシュボードで確認します。
Gloria のダッシュボードでレビューする送信済みの申し込み

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

仕組み - JEE 上の AEM Forms の場合(AEM Forms ワークフローを使用)

Sarah が申込書を送信すると、リファレンスサイトに実装された Workbench プロセスが自動的に実行され、申込書の精査と承認または却下のタスクが Gloria Rios に割り当てられます。「はじめに - Geometrixx Finance リファレンスサイト」の説明にしたがって AEM Forms JEE をインストールした時に、ユーザー「Gloria Rios」が自動的に作成されています。

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

approval-workflow

Gloria は HTML Workspace でタスクを開き、クレジットカード申込書の内容を精査し、承認します。クレジットカード申込承認タスクの中には、リスク集計が入っています。このリスク集計は、Sarah が入力した内容に基づき、承認申込データ処理ステップによって生成されたものです。それを参考にして、Gloria はクレジットカード申込承認に関するリスク評価を行います。 

html-ws

実際の動作確認

AEM Forms を JEE サーバーにインストールすると、http://<hostname>:<AuthorPort>/lc/ws から HTML workspace にアクセスできます。<hostname> と <port> には、JEE サーバーのホスト名とポート番号を入力します。HTML workspace に Gloria Rios としてログインします。そのためには、ユーザー名とパスワードに grios と password をそれぞれ入力します。そしてクレジットカード申込書を承認します。

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

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

デスクトップ版ウェルカムキット
デスクトップ版ウェルカムキット

モバイル版ウェルカムキット
モバイル版ウェルカムキット

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

デスクトップ版ウェルカムキット
デスクトップ版ウェルカムキットの特典

モバイル版ウェルカムキットの特典
モバイル版ウェルカムキットの特典

ウェルカムキットでは、他に、クレジットカードのメリットがインタラクティブカードレイアウトで強調されています。メリットを伝えるカードはモバイルバージョンでは動きませんが、デスクトップバージョンの場合は、Sarah がマウスカーソルをカード上に乗せると、カードがめくられ、以下の画像のようにメリットの詳細が表示されます。

welcome-kit-benefits

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

デスクトップ版アドオンフォーム
デスクトップ版アドオンフォーム

モバイル版アドオンフォーム
モバイル版アドオンフォーム

注意:

Geometrixx Finance 社の既存顧客である John Doe は、自らの申込書のステータスを追跡し、Geometrixx Finance ポータルでウェルカムキットを閲覧することができます。

デスクトップでの申し込みの状態
デスクトップでの申し込みの状態

モバイルでの申し込みの状態
モバイルでの申し込みの状態

仕組み

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

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

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

実際の動作確認

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

Adobe Campaign の設定を行っておらず、そのせいでウェルカムキットの電子メールを受信していない場合は、以下の URL からそのメールを確認できます。

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

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

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

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

Sarah のクレジットカード明細を含む電子メール
Sarah のクレジットカード明細を含む電子メール

クレジットカード明細へのリンクを含む電子メールは、デスクトップ上では以下のように表示されます。

statement-email-desktop_updated

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

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

以下の画像では、モバイルバージョンのクレジットカード明細の別の部分を紹介しています。これは Sarah がスクロールダウンを行った後の画面です。

クレジットカード明細の別の部分

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

最新の明細

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

詳細明細

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

クレジットカード明細はデスクトップでは以下のように表示されます。

デスクトップでのクレジットカード詳細明細

仕組み

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

実際の動作確認

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

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

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

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

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

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

Geometrixx Finance 社の顧客データの分析

仕組み

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

実際の動作確認

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

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

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

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

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

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

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

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

  1. http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments の「フォームとドキュメント」へ進みます。
  2. Geometrixx 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/geometrixx-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/geometrixx-finance/demo-artifacts/targetreport.js
    注意:
    これらの変更はデモのためだけに行われます。この手順を完了した後、必ずファイルの中身を元に戻してください。
  18. 生成したレポートを更新すると、以下のような画面が表示されます。レポートダッシュボードを確認します。
ab-test-report

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

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

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

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

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

このシナリオでは、以下の人物が登場します。

  • Sarah Rose(Geometrixx Finance 社の見込み客)
  • John Doe(Geometrixx Finance 社の既存顧客)
  • Gloria Rios(Geometrixx Finance 社住宅ローン部門責任者)

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

注意:

チュートリアルで説明している手順には、Sarah と John の両方が関わっていますが、ここでは Sarah に関する説明と画像のみを記載しています。しかしながら、この説明と画像の内容は John の場合にもあてはめることができます。Sarah と John の相違点は手順の中で説明します。

Sarah は Geometrixx Finance 社の Web サイトで住宅ローンサービスを確認 

Sarah と John は Geometrixx Finance 社の顧客です。Sarah は Geometrixx Finance 社のサイトを開いてログインし、「All Forms」タブに移動します。すると、同社が新しい住宅ローンサービスを開始したことに気付きます。興味を持った Sarah は住宅ローンの申し込みをすることにします。 

Geometrixx Finance 社のホームページ

仕組み

Geometrixx Finance 社のサイトは Adobe Experience Manager を使用して作成されています。このサイトには、クレジットカードと住宅ローンの申し込みを行えるそれぞれの AEM Forms ワークフローがあります。チュートリアル全体を想定どおりに進めるためには、住宅ローンの申し込み中、Sarah Rose のペルソナがログインしている必要があります。 

実際の動作確認

Geometrixx Finance 社のリファレンスサイトは、http://<host>:<PublishPort>/content/geometrixx-finance/global/en.html?wcmmode=disabled を参照してください。

Geometrixx Finance 社のホームページで、「All Forms」(すべてのフォーム)をクリックします。「All Applications」(すべての申し込み)ページに「Application for Loan」(ローンの申し込み)という項目があります。「Application for loan」(ローンの申し込み)内の「Apply」(申し込む)をクリックして、住宅ローン申し込みのアダプティブフォームを開きます。

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

Sarah はこのプログラムについてじっくり検討し、住宅ローンを申し込むことにします。住宅ローン申し込みの下にある Apply ボタンをクリックします。

Sarah がモバイルデバイスから「Apply」をクリックすると、住宅ローン申込フォームが開かれ、モバイルデバイスの画面に最適化されたビューで表示されます。このビューでは、申込フォーム全体を単一のビューで表示するのではなく、一度に申込フォームの 1 セクションずつを表示します。そのため、Sarah は、あるセクションから別のセクションへと進むたびに、順を追って情報の表示および入力を行うことができます。

以下の画像では、Sarah が住宅ローンの申込時にモバイルデバイス上で閲覧した画面のうちいくつかを紹介します。

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

Sarah がデスクトップから「Apply now」をクリックすると、住宅ローン申込フォームが開き、以下の画像が表示されます。申込フォームはタブ構成されています。Sarah は次々にタブを移動し、詳細を入力します。

デスクトップ版住宅ローン申し込み画面

申込フォームへの入力をある程度まで進めたところで、Sarah は急いでミーティングに向かわなければいけないことを思い出します。そこで、彼女は申込フォームの「Come back later」(後で続きを入力)をクリックします。このボタンをクリックすると、その時点までに入力されたすべての情報が保存されます。さらに、ダイアログポップアップが表示され、途中まで入力していた内容を後で完成させるために申込フォームへのリンクを電子メールで Sarah のアドレスに送信するかどうか尋ねます。Sarah は「Send mail」(メールを送信)をクリックします。

申込書のドラフトの保存

Geometrixx Finance 社は以下の電子メールを Sarah に送信します。そのメールには「Resume」(再開)ボタンが含まれており、Sarah はこのボタンから入力中の申込フォームに戻ることができます。以下の画像は、デスクトップ版およびモバイル版の電子メールを紹介したものです。

デスクトップ版とモバイル版での申し込み電子メールの再開
A. デスクトップ版での申し込み電子メールの再開 B. モバイル版での申し込み電子メールの再開 

注意:

Geometrixx Finance の既存顧客である John Doe の場合、自らの申込書の下書きを完成させるには、Geometrixx Finance ポータルにログイン後、自らのアカウントの「Drafts」(下書き)フォルダーからアクセスすることも可能です。

Geometrixx Finance のサイトでの申し込みの状態

仕組み

電子メールの「Apply now」ボタンから、Sarah は住宅ローン申込フォームに進みます。申込フォームは、cq-geometrixx-finance-adaptiveform-pkg.zip パッケージで提供されているアダプティブフォームです。申込フォームのレイアウトは、cq-geometrixx-finance-layout-pkg.zip パッケージで定義されています。住宅ローンの申し込みフォームは Geometrixx Finance のテンプレート上に構築されており、スタイルに関しては Geometrixx Finance のテーマ B が使用されています。このアダプティブフォームでは、詳細の入力やユーザーレスポンスへの適合のために様々なコンポーネントとルールが使用されています。

アダプティブフォームは、設定により、モバイル・デバイスとデスクトップのどちらでフォームを開いているかに応じてレイアウトを切り替えます。モバイルデバイスでフォームを開いている場合はプログレッシブモバイルレイアウトが表示されます。ここでは、1 度にフォーム全体を表示するのではなく、指定された数のフィールドを表示します。デスクトップ表示では、アダプティブフォーム全体が表示されます。

Come back later」ボタンをクリックすると、送信アクションが開始されます。そのアクションによって、そのユーザーに対して一意の ID が生成され、AEM リポジトリのノード内に一部入力済みの申込書が下書きとして保存されます。また、同じアクションによって、申込書の下書きを含むノードへのリンクを電子メールで送信する許可を求めるダイアログが表示されます。確認ダイアログの「Send mail」ボタンをクリックすると、下書きを含むノードへのリンクを持つ電子メールが自動送信されます。「はじめに - Geometrixx Finance リファレンスサイト」で説明されている Cron 形式のリターゲティングの再設定を行うと、申込書を完成させていない申込希望者への電子メールが毎日午前 2 時に自動送信されます。

実際の動作確認

前の手順で受信した電子メールの中の「Apply now」ボタンをクリックします。詳細を一部入力し、様々なアダプティブフォームコンポーネントを確認し、「Come back later」をクリックすると別の電子メールを受信します。こちらのメールには、申込書の下書きにリンクしている「Resume」ボタンが含まれています。

Adobe Campaign の設定を行っておらず、そのせいで自らの電子メール ID の電子メールを受信していない場合は、以下の URL を参照すると Sarah の画面に表示される申込フォームを閲覧できます。

http://<host>:<PublishPort>/content/forms/af/geometrixx-finance/Home-Mortgage-Application-Form.html?wcmmode=disabled

アダプティブフォームのテンプレートはこちらを参照してください。

Geometrixx Finance のテーマ B は以下から入手できます。

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

Geometrixx Finance のテンプレートは以下から入手できます。

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

フォームのすべてのルールを確認するには、以下の手順を実行します。

  1. オーサリングモードでフォームを開きます。 
    URL:http://<host>:<AuthorPort>/editor.html/content/forms/af/geometrixx-finance/Home-Mortgage-Application-Form.html
  2. コンポーネントを選択して、 をタップします。ルールエディターにすべてのルールが表示されます。

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

しばらくすると Sarah が戻ってきて、受信箱をチェックし、Geometrixx Finance 社からの電子メールの中の「Resume」ボタンをクリックします。すると、一部記入済みの住宅ローン申込書が再び表示されます。Alison が先ほど提供した情報はすでに入力された状態で表示されます。Alison はフォームの各セクションを順に追って進み、申込書を完成させて送信します。

仕組み

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

実際の動作確認

AEM Forms リファレンスサイトのセットアップおよび設定」の説明にしたがって Adobe Campaign を設定していれば、Sarah に割り当てた電子メール ID で、申込書の下書きへのリンクを持つ電子メールを受信したはずです。先へ進み、申込書の中の残りのセクションに必要な情報を入力し、送信します。「AEM Forms リファレンスサイトのセットアップおよび設定」の「リファレンスサイト電子メールへの Campaign サービスの適用」で説明しているように、電子メールは CRX リポジトリにあります。

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

Sarah によって送信された住宅ローン申込書を、Geometrixx Finance 社が受信します。申込フォームは Geometrixx Finance 社クレジットカードおよび住宅ローン部門の Gloria Rios に届きます。Gloria は申込書の内容を精査し、リスク分析を実行し、申し込みを承認します。

仕組み - OSGi 上の AEM Forms の場合(AEM Forms ワークフローなし)

Sarah がクレジットカード申し込みを記入して送信すると、申し込みの PDF またはレコードのドキュメントが作成され、Gloria Rios の申し込みダッシュボードに送信されます。Gloria は送信されたクレジットカード申し込みを確認し、申し込みを承認または拒否することができます。Gloria は送信レビュー担当者グループ geometrixx-finance-reviewers の一員です。geometrixx-finance-reviewers グループのメンバーは、申し込みを承認または拒否することができます。

実際の動作確認

申し込みを承認または拒否するには、ユーザーグループ geometrixx-finance-reviewers を送信レビュー担当者として追加します。以下の手順を実行して、ユーザーグループ geometrixx-finance-reviewers を送信レビュー担当者として追加します。

  1. 作成者インスタンスで、ツール/セキュリティ/グループに移動します。
  2. forms-submission-reviewers を探してクリックします。
  3. 「メンバーをグループに追加」フィールドで、geometrixx-finance-reviewers を追加します。
    ユーザーグループには、クレジットカードおよび住宅ローン部門責任者である Gloria Rios のペルソナが含まれます。
  4. 保存」をクリックします。

以下の手順を実行して、Gloria の申し込みダッシュボードにアクセスします。Gloria はそこで、送信されたすべての申し込みを確認できます。

  1. ブラウザーで、http://<host>:<PublishPort>/content/geometrixx-finance/global/en.html を開きます。
  2. 画面の右上隅にある「Sign In」(サインイン)をクリックします。
  3. Gloria のログイン資格情報を提供し、「Login as representative」(代表者としてログイン)オプションを有効にして「Log in」(ログイン)をクリックします。
    Gloria の申し込みダッシュボードに移動します。
  4. 申し込みダッシュボードには、以下のオプションがあります。
    • 住宅ローンの申し込み
    • クレジットカードの申し込み
  5. 上記のオプションのいずれかをクリックし、送信された申し込みをダッシュボードで確認します。
Gloria のダッシュボードにある送信済みの申し込み

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

仕組み - JEE 上の AEM Forms の場合(AEM Forms ワークフローを使用)

Sarah が申込書を送信すると、リファレンスサイトに実装された Workbench プロセスが自動的に実行され、申込書の精査と承認または却下のタスクが Gloria Rios に割り当てられます。「AEM Forms リファレンスサイトのセットアップおよび設定」の説明にしたがって AEM Forms JEE をインストールした時に、ユーザー「Gloria Rios」が自動的に作成されています。

以下の画像では、住宅ローン申込書を処理してその PDF 出力を生成する承認ワークフローを図式化して説明しています。

Workbench での住宅ローンの承認ワークフロー

Gloria は HTML Workspace でタスクを開き、住宅ローン申込書の内容を精査し、承認します。住宅ローン申込承認タスクの中には、リスク集計が入っています。このリスク集計は、Sarah が入力した内容に基づき、承認申込データ処理ステップによって生成されたものです。それを参考にして、Gloria は住宅ローン申込承認に関するリスク評価を行います。 

住宅ローン申込書の HTML Workspace

実際の動作確認

AEM Forms を JEE サーバーにインストールすると、http://<hostname>:<JEEAuthorPort>/lc/ws から HTML workspace にアクセスできます。<hostname> と <port> には、JEE サーバーのホスト名とポート番号を入力します。HTML workspace に Gloria Rios としてログインします。そのためには、ユーザー名とパスワードに grios と password をそれぞれ入力します。そして住宅ローン申込書を承認します。

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

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

デスクトップ版ウェルカムキット
デスクトップ版ウェルカムキット

モバイル版ウェルカムキット
モバイル版ウェルカムキット

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

注意:

Geometrixx Finance 社の既存顧客である John Doe は、自らの申込書のステータスを追跡し、Geometrixx Finance ポータルでウェルカムキットを閲覧することができます。

デスクトップでの申し込みの状態
デスクトップでの申し込みの状態

モバイルでの申し込みの状態
モバイルでの申し込みの状態

仕組み

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

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

実際の動作確認

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

Adobe Campaign の設定を行っておらず、そのせいでウェルカムキットの電子メールを受信していない場合は、以下の URL からそのメールを確認できます。

http://<host>:<port>/content/forms/af/geometrixx-finance/mortgage-loan-welcome-kit.html?wcmmode=disabled

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

Sarah が取引明細書を受信

Sarah が住宅ローンの利用を開始し、賦払金の返済を開始すると、自らの取引明細を含む別の電子メールを Geometrixx Finance 社から受信します。以下の画像では、明細へのリンクを含む電子メールのモバイルバージョンを紹介しています。

Sarah のクレジットカード明細を含む電子メール
Sarah のクレジットカード明細を含む電子メール

取引明細へのリンクを含む電子メールは、デスクトップ上では以下のように表示されます。

デスクトップ版の住宅ローン明細メール

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

  • 明細概要
  • 明細詳細

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

住宅ローンの取引明細

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

Sarah は明細の中から支払い期限にさしかかっている支払いを行います。

注意:

View Latest Statement」(最近の明細を表示)をクリックすると、クレジットカード明細をダウンロードします。これは既知の問題です。

仕組み

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

実際の動作確認

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

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

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

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

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

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

Geometrixx Finance 社の顧客データの分析

仕組み

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

実際の動作確認

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

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

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

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

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

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

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

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

  1. http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments の「フォームとドキュメント」へ進みます。
  2. Geometrixx 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/geometrixx-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/geometrixx-finance/demo-artifacts/targetreport.js
    注意:
    これらの変更はデモのためだけに行われます。この手順を完了した後、必ずファイルの中身を元に戻してください。
  18. 生成したレポートを更新すると、以下のような画面が表示されます。レポートダッシュボードを確認します。
ab-test-report

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

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

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

法律上の注意   |   プライバシーポリシー