Experience Cloud 設定自動化を使用してアダプティブフォームの Adobe Analytics を有効にする integrate-adobe-analytics-to-aem-forms-with-experience-cloud-setup-automation

クラウドサービス用の設定コンテナを作成します。

1. ツール／一般／設定ブラウザー ​に移動します。
2. 設定コンテナを選択または作成し、クラウド設定 ​のフォルダーを有効にします。
3. 「保存して閉じる」を選択して設定内容を保存し、ダイアログを閉じます。

AEM インスタンスで、[Forms]／[フォームとドキュメント] ​に移動します。

フォーム／プロパティ ​を選択し、設定コンテナ ​で、手順 1 の​ 設定コンテナ ​で作成または選択した設定コンテナを選択します。

左側のパネルでタスクパネルを選択し、「Analytics を設定」、「Adobe Analytics をアクティベート」の順にクリックします。

レポートスイートに使用する名前を入力し、「次へ」、「保存」の順にクリックします。

プロジェクトを保存すると、Adobe Analytics とアダプティブフォームが統合されるまで、設定がしばらく実行されます。また、統合ステータス ​を確認することもできます。

AEM インスタンスで、Forms／[フォームとドキュメント] ​に移動し、フォーム ​を選択すると、以下の画像に示すように、Adobe Analytics がフォームに統合されていることがわかります。

これで、アダプティブフォームの Adobe Analytics レポートを表示できるようになります。

AEM インスタンスで、Forms／フォームとドキュメント ​に移動し、フォーム ​を選択します。

左側のタスクパネルを選択し、「Analytics を設定」をクリックして、「Adobe Analytics をアクティベート」をクリックします。

レポートスイートに使用する名前を入力し、「次へ」、「保存」の順にクリックします。

プロジェクトを保存すると、Adobe Analytics とアダプティブフォームが統合されるまで、設定がしばらく実行されます。また、統合ステータス ​を確認することもできます。

AEM インスタンスで、Forms／フォームとドキュメント ​に移動し、フォーム ​を選択すると、Adobe Analytics がフォームに統合されていることがわかります。

これで、アダプティブフォームの Adobe Analytics レポートを表示できるようになります。

AEM インスタンスで、Forms／フォームとドキュメント ​に移動します。

フォームを選択すると、左側に示すように、Adobe Analytics が Adobe Analytics 用にアクティベートされたフォームに統合されていることがわかります。

{width="100%"}

「Adobe Analytics」をクリックしてレポートを表示し、パフォーマンスデータを分析します。

AEM Forms アーキタイプまたは複製された Git リポジトリプロジェクトをテキストエディターで開きます。例えば Visual Studio Code などです。

アダプティブフォームが存在する Sites のページに移動します。例えば、このデモプロジェクトでは ui.apps/src/main/content/jcr_root/apps/corecomponents/components/page/.content.xml に移動します。

sling:resourceSuperType の値をコピーします。例えば、値は core/wcm/components/page/v3/page です。

{width="100%"}

core/wcm/components/page/v3/page と同じ場所 ui.apps/src/main/content/jcr_root/apps に類似した構造を作成します。

{width="100%"}

customfooterlibs.html ファイルを追加します。

// customheaderlibs.html
<sly data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page">
<sly data-sly-test="${page.data && page.dataLayerClientlibIncluded}" data-sly-call="${clientlib.js @ categories='core.forms.components.commons.v1.datalayer', async=true}"></sly>
</sly>

customfooterlibs.html は JavaScript で使用します。

パイプラインを実行して変更をデプロイします。

Adobe Experience Platform データ収集 ​にアクセスします。

左側にある「タグ」をクリックします。

以下の画像に示すように、プログラム ID を使用してプロジェクトを検索します。例えば、URL https://author-p45921-e175111-cmstg.adobeaemcloud.com/index.html の環境の場合、プログラム ID は 45921 です。

{width="100%"}

以下に示すように、フォームルール ​と​ データ要素 ​の設定を追加します。

フォームを選択し、右上にある​ 新しいプロパティ ​を追加するか、フォームをクリックします。

プロパティページで、「ルール」をクリックし、フォームのイベントを選択します。以下の画像の例では、フォームイベント ​です。

{width="100%"}

フォームのすべてのイベントを選択し、右上のパネルにある​ コピー ​を実行します。

コピーしたら、プロジェクト ID で Sites ページを検索し、フォームルールをペーストする​ ルールをコピー ​ポップアップが表示されます。

{width="100%"}

「コピー」をクリックして、フォームルールを Sites ページにペーストします。

フォームを選択し、右上にある​ 新しいプロパティ ​を追加するか、フォームをクリックします。

プロパティページで、「データ要素」をクリックし、フォームのイベントを選択します。

フォームのすべてのイベントを選択し、右上のパネルにある​ コピー ​を実行します。

コピーしたら、プロジェクト ID で Sites ページを検索し、フォームルールをペーストする​ ルールをコピー ​ポップアップが表示されます。

「コピー」をクリックして、フォームルールを Sites ページにペーストします。

{width="100%"}