SXAにHTMLを埋め込む
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
特定のHTMLをページに追加するために、SXAにはプレーンHTMLおよびプレーンHTML (再利用可能) コンポーネントとHTMLスニペット コンポーネントの2つのコンポーネントが付属しています。
プレーンHTMLコンポーネントとプレーンHTML(再利用可能)コンポーネントを使用して、ページに配置するビジュアル要素(YouTube動画の埋め込みなど)のHTMLコードを埋め込む(および保存する)ことができます。このコンポーネントは、SXAがすべてのコンポーネントに使用するデフォルトのラッパーを追加します。
汎用HTMLスニペットコンポーネントを使用して、HTML要素をバックグラウンドで機能させるメタパーシャルデザインを配置します。これにより、外部システムと統合できます。たとえば、Googleタグ マネージャーやカスタマー サーバーのチャット機能を統合する場合などです。このコンポーネントには、追加の周囲のマークアップはありません。
プレーンHTMLコンポーネントを追加する
プレーンHTMLコンポーネントを追加する
プレーンHTMLは、任意の静的HTMLブロックを含めることができる汎用コンポーネントです。プレーンHTML(再利用可能)コンポーネントは、1回の使用だけでなく、サイト全体の複数のページで再利用するために挿入できます。
プレーンHTMLコンポーネントを追加するには、次の手順に従います。
-
エクスペリエンス エディターで、HTMLを追加するページ (デザイン) またはパーシャル デザインに移動します。HTMLを複数のページに表示する必要がない場合は、ページに追加することもできます。
-
ツールボックスを開きます。 Page Contentグループで、Plain HTML (reusable)をクリックしてページにドラッグします。
-
Select the Associated Contentダイアログボックスで、「Create」をクリックします。
-
Insert Itemダイアログボックスで、「Insert HTML Code」をクリックします。
-
ページを保存します。
-
Plain HTML (Reusable)ツールバーで、Edit HTML sourceをクリックします。
-
これで、HTMLコード アイテムがコンテンツ エディターで開きます。 HTMLセクションのCodeフィールドに、HTMLコードを入力します。
メモ複雑なコンポーネントの場合は、配置できるHTMLについて完全な自由度が得られるプレーンHTMLレンダリングの使用を検討することもできます。ただし、この方法でページコンテンツを追加すると、すべてのコンテンツ編集者がHTMLコードの編集方法を知っているわけではないため、編集者が作業するのが難しくなる可能性があります。プレーンHTMLレンダリングの代わりに、クローン、バリアント、またはHTMLスニペットの使用を検討してください。
HTMLスニペットを追加する
HTMLスニペットを追加する
HTMLスニペットは、メタデータ パーシャル デザインに追加できるメタ コンポーネントです。これを使用して、各ページの <body> タグの直後または終了 </body> タグの前に、<head> セクションにカスタムHTMLを追加できます。これは、サードパーティのコンポーネント(ウィジェット、トラッキングスクリプトなど)を埋め込む場合や、使用可能なコンポーネントがカスタムニーズに合わない場合に便利です。
HTMLスニペットを追加するには:
-
エクスペリエンス エディターで、Partial Designをクリックし、Meta Partialをクリックします。
-
SXA ToolboxのGeneric Meta Renderingカテゴリで、HTML Snippetコンポーネントをドラッグ アンド ドロップします。メタレンダリングは、headセクション、bodyタグの直後、または各ページの終了 /bodyタグの前にあるコンテナに追加できます。
たとえば、Googleタグマネージャーを統合する場合は、それをヘッドに追加することが重要です。
-
Select the Associated Contentダイアログボックスで、「Create」をクリックします。
-
Insert Itemダイアログボックスで、「HTML snippet」をクリックします。
-
ページを保存します。
-
HTML snippetツールバーで、Edit HTML sourceをクリックします。
-
これで、HTMLコード アイテムがコンテンツ エディターで開きます。 HTML Snippetセクションのhtmlフィールドに、HTMLコードを入力します。