必要条件

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

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

Geometrixx Finance 社は、金融業界のリーディングカンパニーとして、多種多様な顧客プロフィールの要件に合わせてパーソナライズされた包括的なソリューションを提供しています。同社は、特定の顧客向けに各種クレジットカードサービスを開始したばかりです。同社の目標は、同組織の優先するデバイス上でこれらの顧客や見込み客に働きかけ、キャンペーン中のカードのメリットを説明し、クレジットカードプログラムへの登録を促進することです。さらに、同社は、顧客が興味を抱きそうな金融商品を宣伝していきたいと考えています。

以下の解説図は、リファレンスサイトシナリオのワークフローを図式化したものです。

Geometrixx Finance リファレンスサイトのワークフローの解説図

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

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

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

注意:

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

Geometrixx Finance 社が特定の顧客に働きかけるために電子メールキャンペーンを開始

Geometrixx Finance 社が電子メールによるプロモーションを開始します。Sarah と John を含む特定の顧客に向けて、個別の顧客に合わせた内容の電子メールを送信し、クレジットカードプログラムを紹介します。電子メールの中では、キャンペーン中のクレジットカードのメリットが説明されており、さらにはクレジットカードプログラムの申込フォームへリンクされているボタンが掲載されています。

cc-newsletter-mobile_updated
モバイル向け電子メール

cc-newsletter-desktop_updated
デスクトップ向け電子メール


動作の仕組み

AEM forms は、Adobe Campaign との統合により、オンラインおよびオフラインの両方のマーケティングチャンネルを通じて、フォームとドキュメントを配信します。以上の電子メールは、Adobe Campaign コンポーネントを使用して AEM で作成された電子メールマーケティングキャンペーンの一部です。なお、画像の電子メールは、Sarah 向けにパーソナライズされています。電子メールの自動送信には、GeometrixxFinanceWorkflowが使用されます。

実際の動作確認

はじめに - Geometrixx Finance リファレンスサイト」の説明にしたがって Geometrixx Finance リファレンスサイトを設定していれば、「Sarah Rose」および「John Doe」というユーザーを作成した際に、指定した電子メール ID を持つ電子メールを受信したはずです。

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

Sarah はキャンペーンについてじっくり検討し、クレジットカードを申し込むことにします。そして電子メール中の「Apply now」(今すぐ申請)ボタンをクリックします。

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

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

cc-application-mobile1
cc-application-mobile3
cc-application-mobile2_updated
cc-application-mobile4

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

cc-application-desktop

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

come-back-later-mobile
come-back-later-desktop

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

resume-mobile_updated
resume-desktop_updated

注意:

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

jdoe-draft-mobile
jdoe-drafts

動作の仕組み

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

アダプティブフォームは、設定により、モバイル・デバイスとデスクトップのどちらでフォームを開いているかに応じてレイアウトを切り替えます。モバイルデバイスでフォームを開いている場合はプログレッシブモバイルレイアウトが表示されます。ここでは、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>:<port>/content/geometrixx-finance/global/jp/cards/credit/apply.html?enableAnonymous=true&firstName=Sarah&lastName=Rose&email=<youremail address>&cardType=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 は申込書の内容を精査し、リスク分析を実行し、申し込みを承認します。

動作の仕組み

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

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

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

welcome-kit-mobile_updated
welcome-kit-desktop_UPDATED

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

welcome-kit-mobile2
welcome-kit-desktop2

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

welcome-kit-benefits

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

welcome-kit-mobile3
welcome-kit-desktop3_UPDATED

注意:

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

application-status-mobile
application-status

動作の仕組み

ウェルカムキットは、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&cardType=2&gender=2&dataRef=crx:///content/welcomeSarah.xml

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

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

statement-newsletter-mobile1_updated
statement-newsletter-mobile2

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

statement-email-desktop_updated

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

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

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

CCstatement1_updated
CCstatement2

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

CCstatement3
CCstatement4

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

CCstatement5

Sarah は明細の中から支払い期限にさしかかっている支払いを行い、支払受領書を即座にダウンロードすることを選択します。

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

statement-desktop_updated

動作の仕組み

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

実際の動作確認

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

http://<hostname>:<port>/content/forms/af/geometrixx-finance/account-statement.html?wcmmode=disabled&dataRef=crx:///content/geomtrixx-finance-statement-data/srose/april.xml

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

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

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

cc-application-analytics

動作の仕組み

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

実際の動作確認

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

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

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

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

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

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

  1. http://<hostname>:<port>/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/credit-card-application1/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 の規約内容は適用されません。

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