ドキュメントExperience Cloud KCS

AEM エクスペリエンスフラグメント：Adobe Target アクティビティで複数列レイアウトとカルーセルコンポーネントが正しくレンダリングされない

最終更新日： 2026年8月25日

Adobe Target アクティビティを使用してエクスペリエンスフラグメントを配信する場合、複数の列セクションは積み重ね列としてレンダリングされ、カルーセルなどのインタラクティブコンポーネントは期待どおりに機能しません。 フラグメントは、AEMで直接表示すると正しくレンダリングされますが、Targetがホストページに挿入すると問題が表示されます。 これを修正するには、フラグメント構造を検証し、必要なCSSを読み込み、インジェクション後に必要なJavaScriptを初期化し、重複するクライアントライブラリを削除します。

説明 description

環境

HTML オファーとしてAdobe Targetに書き出されたExperience Manager Sites エクスペリエンスフラグメント

問題/症状

Adobe Target アクティビティを通じてエクスペリエンスフラグメントを配信すると、そのレイアウトとインタラクティブコンポーネントが期待どおりにレンダリングまたは機能しません。

  • 複数列セクションは、意図したレイアウトではなく、積み重ね列としてレンダリングされます。
  • カルーセルなどのインタラクティブなコンポーネントが期待どおりに機能しない。
  • AEMで直接表示すると、エクスペリエンスフラグメントが正しくレンダリングされます。
  • この問題は、Adobe Targetがホストページにエクスペリエンスフラグメントを挿入した後に発生します。
  • エクスペリエンスフラグメント内の画像が、想定されたサイズを使用していない。
  • この問題は、複数のAdobe Target アクティビティまたはページセクションに影響します。

原因

挿入されたエクスペリエンスフラグメントのHTML、CSSおよびJavaScriptは、Adobe Targetがフラグメントをアクティビティに挿入した後、ホストページと対話します。 このインタラクションは、インタラクティブなコンポーネントのレイアウトスタイルと初期化に影響します。

解決策 resolution

レンダリングの問題をトラブルシューティングするには、次の手順に従います。

  1. エクスペリエンスフラグメントの構造を確認し、フラグメントで必要とされないページ全体のラッパーを削除します。

  2. エクスペリエンスフラグメントで使用されているクライアントライブラリを確認し、ホストページが同じライブラリを既に読み込んでいる場合に、重複するCSSまたはJavaScript ライブラリを削除します。

  3. Adobe Targetがエクスペリエンスフラグメントをホストページに挿入した後、必要なレイアウト CSSが使用可能であり、正しく適用されていることを確認します。

  4. ページ読み込み後もレイアウト CSS セレクターが利用可能で変更されていないことを確認してから、様々なページセクションでエクスペリエンスフラグメントをテストして、問題が解決するかどうかを判断します。

  5. Adobe Targetがエクスペリエンスフラグメントを挿入した後、カルーセルなどのインタラクティブコンポーネントで必要なJavaScriptを初期化します。

    • 注： フラグメントのインラインスクリプトを使用しないでください。
    • Target アクティビティの読み込み後に、ホストページからトリガーの初期化を行います。

  6. エクスペリエンスフラグメントが正しくレンダリングされ、画像が期待されるサイズを使用し、インタラクティブコンポーネントが意図するすべてのAdobe Target アクティビティとページセクションで機能することを確認します。

関連トピックス

recommendation-more-help
experience-cloud-kcs-help-kbarticles