AEM Sites の単一ページアプリケーションへのアダプティブフォームやインタラクティブコミュニケーションの組み込み

概要

AEM Forms を使用すると、フォーム開発者は AEM Sites 単一ページアプリケーション（SPA）ページにアダプティブフォームおよびインタラクティブ通信をシームレスに組み込むことができます。組み込まれたアダプティブフォームおよびインタラクティブ通信ではすべての機能を使用できるため、ユーザーは、ページから移動せずにフォームの記入や送信ができます。これにより、ユーザーは Web ページのその他の要素とのコンテキストを保ったまま、同時にアダプティブフォームやインタラクティブ通信の操作を行うことができます。

AEM Sites 単一ページアプリケーションでは、AEM Forms SPA Container コンポーネントを使用してアダプティブフォームやインタラクティブ通信を追加できます。これは AEM Sites SPA 用の AEM Forms コンポーネントで、Sites ページに追加できます。

SPA AEM Sites 以外でのアダプティブフォームの組み込みについて詳しくは、AEM Sites ページへのアダプティブフォームまたはインタラクティブ通信の組み込みを参照してください。

前提条件

AEM Forms SPA コンテナコンポーネントを使用して、アダプティブフォームやインタラクティブ通信を AEM Sites SPA に組み込むには、以下がインストールされていることを確認します。

AEM Forms SPA Container コンポーネントのインストール

次の手順を実行して、AEM Forms SPA コンテナコンポーネントをインストールします。

  1. SPA 用の AEM Forms コンポーネントを複製またはダウンロードします。

  2. SPA 用の AEM Forms コンポーネントをインストールします。 コンポーネントのインストール手順は、README.md ファイルで説明しています。

    このコンポーネントにはサンプル React コンポーネントが含まれており、SPA コンテナコンポーネントを React ベースの SPA プロジェクトと統合するために使用できます。

  3. React ベースの SPA プロジェクトをクローンまたはダウンロードします。

  4. README.md ファイルにある説明に従って、SPA コンテナコンポーネントと React ベースの SPA プロジェクトを統合します。

    AEM Forms SPA コンテナコンポーネントをインストールし、そのコンポーネントを React ベースの SPA プロジェクトに統合した後、AEM Sites ページにアダプティブフォームとインタラクティブ通信を組み込むことができます。

アダプティブフォームまたはインタラクティブ通信を組み込む

AEM Forms コンテナコンポーネントを使用してアダプティブフォームやインタラクティブ通信を組み込むには：

  1. アダプティブフォームやインタラクティブ通信を組み込む AEM Sites ページを、編集モードで開きます。

  2. 次のいずれかのオプションを使用して、ページ上で AEM Form for SPA コンポーネントを挿入します。

    • Sites ページのレイアウトコンテナをタップし、+ をタップして、AEM form for SPA コンポーネントを選択します。

    • コンポーネントブラウザーパネルから、AEM Form for SPA コンポーネントをページ上にドラッグアンドドロップします。

    • または、アセットブラウザーでアダプティブフォームまたはインタラクティブ通信を検索して、Sites ページにドラッグアンドドロップします。これにより、AEM Formsにフォームが組み込まれ、SPA コンポーネントコンテナに格納されます。

    メモ

    1 つのページでの複数の AEM Forms SPA コンテナコンポーネントのレンダリングはサポートされていません。1 つのページに複数の AEM Forms SPA コンテナを追加することができますが、一度にレンダリングされるコンポーネントは 1 つだけです。 不一致を避けるために、1 つのページに 1 つのコンポーネントのみが表示されるようにします。

  3. Sites ページに埋め込まれた AEM Forms SPA コンテナコンポーネントをタップし、アクションバーの settings_icon をタップします。AEM Forms SPA コンテナを編集​ダイアログが開きます。

  4. AEM Forms コンテナを編集​ダイアログで、次の設定を行います。

    • アセットのタイプ：​埋め込むアセットのタイプを選択します。オプションには「アダプティブフォーム」と「インタラクティブ通信」があります。

    • アセットパス：​埋め込むアダプティブフォームまたはインタラクティブ通信を参照して選択します。アダプティブフォームまたはインタラクティブ通信がアセットブラウザーから挿入されると、このフィールドは自動入力されます。

    • チャネル（インタラクティブ通信のみ）：埋め込むインタラクティブチャネルのタイプを選択します。 オプションには「web チャネル」と「印刷チャネル」があります。

    • テーマ：アダプティブフォームまたはインタラクティブ通信のコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。

  5. 「done_icon」をタップして、変更内容を保存します。これで、アダプティブフォームまたはインタラクティブ通信がページに埋め込まれました。

埋め込まれたアダプティブフォームとインタラクティブ通信を公開する

ここでは、AEM Sites ページに埋め込まれたアセット（アダプティブフォームまたはインタラクティブ通信）を公開する際における、次のようなシナリオを考えてみます。

  • 初めて AEM Sites ページを公開する場合で、かつアダプティブフォームやインタラクティブ通信が埋め込まれている場合は、Sites ページに加え、埋め込みアセットも公開します。
  • 公開済み Sites ページに埋め込まれたアダプティブフォームまたはインタラクティブ通信のみを変更した場合は、元のアセットを公開します。変更内容は、公開された Sites ページに反映されます。公開された Sites ページにはアセットへの参照情報が含まれているため、ページを再公開する必要はありません。
  • Sites ページに加え、埋め込まれたアダプティブフォームやインタラクティブ通信を変更した場合は、Sites ページと埋め込みアセットを再公開します。

埋め込まれたアダプティブフォームとインタラクティブ通信を変更する

AEM Sites ページには、AEM Forms コンテナ内のアダプティブフォームおよびインタラクティブ通信への参照情報が保持されます。したがって、元のアダプティブフォームおよびインタラクティブ通信で設定されているすべての構成や特性（テーマ、スタイル、送信アクションなど）は、埋め込まれた形で保持されます。

埋め込まれたアダプティブフォームおよびインタラクティブ通信の構成やプロパティを変更するには、次のいずれかの操作を行います。

  • アダプティブフォームまたはインタラクティブ通信の元のフォームをそれぞれエディターで開き、修正します。
  • 編集モードで開いた Sites ページ内からアダプティブフォームまたはインタラクティブ通信をタップし、続けて「新しいウィンドウで編集」をタップします。元のフォームが編集モードで開きます。

注意点とベストプラクティス

AEM サイトページにアダプティブフォームを埋め込む際は、以下の点に留意してください。

  • 元のフォームにあったヘッダーとフッターは、埋め込まれたフォームには含まれません。
  • ユーザードラフトと埋め込みフォームの送信はサポートされており、フォームポータル上の「下書き」タブや「送信済みフォーム」タブに表示されます。
  • 元のフォームに構築された送信アクションは、埋め込まれたフォームでも保持されます。
  • 元のフォームに構築されたのエクスペリエンスのターゲット設定と A/B テストは、埋め込まれたフォームでは動作しません。ただし、ユーザープロファイルに基づいて異なるフォームを表示するよう、Sites ページ上でエクスペリエンスのターゲット設定を使用することはできます。
  • 元のフォームに Adobe Analytics が設定されている場合、埋め込まれたフォームの分析データは Adobe Analytics でキャプチャされます。ただし、フォームの分析レポートでは使用できません。

このページ