SXA に HTML を埋め込む
プレーン HTML コンポーネントを使用して、HTML を SXA ページに追加します。
特定の HTML をページに追加しやすくするために、プレーン HTML (再利用可能) コンポーネントと HTML スニペット コンポーネントの 2 つのコンポーネントが SXA に付属しています。
プレーン HTML およびプレーン HTML (再利用可能) コンポーネントを使用して、たとえば YouTube 動画を埋め込むために、ページに配置する視覚要素の HTML コードを埋め込み (および保存) ます。このコンポーネントは、SXA のすべてのコンポーネントで使用されるデフォルトのラッパーを追加します。
HTML 要素がバックグラウンドで機能するように、汎用 HTML スニペット コンポーネントを使用してメタ パーシャル デザインを配置します。これにより、外部システムとの統合が可能になります。たとえば、Google タグ マネージャーまたは顧客サーバーのチャット機能を統合できます。このコンポーネントには、余分な周囲のマークアップがありません。
プレーン HTML は、任意の静的 HTML ブロックを含めることができる汎用コンポーネントです。プレーン HTML (再利用可能) コンポーネントを挿入して、1 回だけ使用することも、サイト全体の複数のページで再利用することもできます。
プレーン HTML コンポーネントを追加するには:
エクスペリエンス エディターで、HTML を追加するページ (デザイン) またはパーシャル デザインに移動します。HTML を複数のページに表示する必要がない場合は、1 つのページに HTML を追加することもできます。
ツールボックスを開きます。[ページ コンテンツ] グループで、[プレーン HTML (再利用可能)] をクリックしてページにドラッグします。
[関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、[作成] をクリックします。
[アイテムを挿入] ダイアログ ボックスで [HTML コードを挿入] をクリックします。
ページを保存します。
[プレーン HTML (再利用可能)] ツールバーで、[HTML ソースの編集] をクリックします。
HTML コード アイテムがコンテンツ エディターで開きます。[HTML] セクションの [コード] フィールドに、サービス プロバイダーから提供された HTML コードを入力します。
注記
複雑なコンポーネントの場合、コンポーネントに HTML を自由に配置できるプレーン HTML レンダリングの利用を検討することもできます。ただし、すべてのコンテンツ編集担当者が HTML コードの編集方法を知っているわけではないため、この方法でページにコンテンツを追加すると、編集担当者の作業がやりにくくなる場合があります。プレーン HTML レンダリングの代わりに、クローン、バリアント、または HTML スニペットの利用を検討してください。
HTML スニペットは、メタデータ パーシャル デザインに追加できるメタ コンポーネントです。カスタム HTML を <head>
セクションの直後の <body>
タグ、または各ページの終了 </body>
タグの前に追加するために使用できます。これは、サードパーティのコンポーネント (ウィジェット、追跡スクリプトなど) を埋め込む場合や、使用可能なコンポーネントがカスタムのニーズに合わない場合に便利です。
HTML スニペットを追加するには:
エクスペリエンス エディターで、[パーシャル デザイン] をクリックし、[メタ パーシャル] をクリックします。
SXA ツールボックスの汎用メタ レンダリング カテゴリに HTML スニペット コンポーネントをドラッグ アンド ドロップします。メタ レンダリングは、
head
セクション、body
タグの直後、または各ページの終わりの/body
タグのコンテナに追加できます。たとえば、Google タグ マネージャーを統合する場合は、ヘッドに追加することが重要です。
[関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、 [作成] をクリックします。
[アイテムを挿入] ダイアログ ボックスで [HTML スニペット] をクリックします。
ページを保存します。
[HTML スニペット] ツールバーで、[HTML ソースの編集] をクリックします。
HTML コード アイテムがコンテンツ エディターで開きます。[HTML スニペット] セクションの [html] フィールドに HTML コードを入力します。