Embed an adaptive form or Interactive Communication in AEM Sites Single Page Application

概要

AEM Formsでは、フォーム開発者がAEM Sitesのシングルページアプリ(SPA)にアダプティブフォームとインタラクティブコミュニケーションをシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームとインタラクティブ通信は完全に機能し、ユーザーはページを離れることなくフォームに入力して送信できます。 Webページ上の他の要素のコンテキストを維持し、アダプティブフォームやインタラクティブコミュニケーションと同時にやり取りするのに役立ちます。

AEM Sitesシングルページアプリでは、 AEM FormsSPAコンテナコンポーネントを使用して、アダプティブフォームまたはインタラクティブコミュニケーションを追加できます これは、サイトページに追加できるAEM SitesSPAのAEM Formsコンポーネントです。

SPA以外のAEM Sitesにアダプティブフォームを埋め込む方法について詳しくは、「AEM Sitesページにアダプティブフォームまたはインタラクティブな通信を 埋め込む」を参照してください。

前提条件

AEM FormsSPAコンテナコンポーネントを使用してAEMサイトSPAにアダプティブフォームまたはインタラクティブ通信を埋め込むには、次のをインストール済みであることを確認します。

AEM FormsSPAコンテナコンポーネントのインストール

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

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

  2. SPA用のAEM Formsコンポーネントをインストールします。 コンポーネントのインストール手順は、 README.md ファイルに記載されています。

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

  3. リアクトベースのSPAプロジェクトのコピーまたはダウンロード

  4. SPAコンテナコンポーネントをReactベースのSPAプロジェクトに統合します( README.md ファイルの手順を参照)。

    AEM FormsSPAコンテナコンポーネントをインストールし、コンポーネントとReactベースのSPAプロジェクトを統合した後、AEM SitesページにアダプティブフォームとInteractive Communicationsを埋め込むことができます。

アダプティブフォームまたはインタラクティブコミュニケーションを埋め込む

SPAコンテナコンポーネントにAEM Formsを使用してアダプティブフォームまたはインタラクティブコミュニケーションを埋め込むには:

  1. アダプティブフォームやインタラクティブコミュニケーションを埋め込むAEMサイトページを編集モードで開きます。

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

    • サイトページのレイアウトコンテナをタップし、「 +」をタップし て、SPAコンポーネント用の AEMフォームを選択します

    • From the Component browser panel, drag-drop the AEM Form for SPA component on the page.

    • アセットブラウザーでアダプティブフォームまたはインタラクティブコミュニケーションを検索し、サイトページにドラッグ&ドロップします。 SPAコンポーネントコンテナ用にAEM Formsにフォームを埋め込みます。

    メモ

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

  3. Tap the embedded AEM Forms SPA Container component in the sites page, and then tap settings_icon on the action bar. The Edit AEM Forms SPA Container dialog opens.

  4. In the Edit AEM Forms Container dialog, specify the following:

    • アセットの種類:​埋め込むアセットの種類を選択します。The options are Adaptive Form and Interactive Communication

    • Asset Path:埋め込むアダプティブフォームまたはインタラクティブコミュニケーションを参照して選択します。 アダプティブフォームまたはインタラクティブ通信がアセットブラウザーを使用して挿入された場合、このフィールドには自動入力されます。

    • チャネル (Interactive Communicationのみ):埋め込むインタラクティブチャネルの種類を選択します。 「 Webチャネル 」と「 印刷チャネル」を選択できます。

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

  5. Tap done_icon to save the settings. これで、アダプティブフォームまたはインタラクティブ通信がページに埋め込まれます。

埋め込まれたアダプティブフォームとインタラクティブ通信の発行

埋め込みアセット(アダプティブフォームまたはインタラクティブコミュニケーション)をAEM Sitesページに発行する場合は、次のシナリオを考慮してください。

  • 初めてAEM Sitesページを発行する場合で、埋め込みのアダプティブフォームまたはインタラクティブコミュニケーションが含まれている場合は、サイトページと埋め込みアセットを発行します。
  • 発行済みサイトページに埋め込まれたアダプティブフォームまたはインタラクティブコミュニケーションのみを変更した場合は、元のアセットを発行し、変更内容は発行済みサイトページに反映されます。 発行済みサイトページにはアセットへの参照が含まれており、ページを再発行する必要はありません。
  • サイトページと、埋め込まれたアダプティブフォームまたはインタラクティブコミュニケーションを変更した場合は、サイトページと埋め込まれたアセットを再発行します。

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

AEMサイトのページには、AEM Formsコンテナのアダプティブフォームとインタラクティブコミュニケーションへの参照が保持されています。 したがって、元のアダプティブフォームとインタラクティブコミュニケーションで設定されたテーマ、スタイル、送信アクションなどの設定とプロパティは、埋め込まれたアダプティブフォームとインタラクティブコミュニケーションでも保持されます。

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

  • 各エディターでアダプティブフォームまたはインタラクティブコミュニケーションでオリジナルフォームを開き、変更します。
  • Tap the adaptive form or Interactive Communication from within the Sites page in edit mode and then tap Edit in a new window. 元のフォームが編集モードで開きます。

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

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

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

このページ