SXA に HTML を埋め込む

概要

プレーン HTML コンポーネントを使用して、HTML を SXA ページに追加します。

特定の HTML をページに追加しやすくするために、プレーン HTML (再利用可能) コンポーネントと HTML スニペット コンポーネントの 2 つのコンポーネントが SXA に付属しています。

プレーン HTML およびプレーン HTML (再利用可能) コンポーネントを使用して、たとえば YouTube 動画を埋め込むために、ページに配置する視覚要素の HTML コードを埋め込み (および保存) ます。このコンポーネントは、SXA のすべてのコンポーネントで使用されるデフォルトのラッパーを追加します。

HTML 要素がバックグラウンドで機能するように、汎用 HTML スニペット コンポーネントを使用してメタ パーシャル デザインを配置します。これにより、外部システムとの統合が可能になります。たとえば、Google タグ マネージャーまたは顧客サーバーのチャット機能を統合できます。このコンポーネントには、余分な周囲のマークアップがありません。

プレーン HTML コンポーネントを追加する

プレーン HTML は、任意の静的 HTML ブロックを含めることができる汎用コンポーネントです。プレーン HTML (再利用可能) コンポーネントを挿入して、1 回だけ使用することも、サイト全体の複数のページで再利用することもできます。

プレーン HTML コンポーネントを追加するには:

  1. エクスペリエンス エディターで、HTML を追加するページ (デザイン) またはパーシャル デザインに移動します。HTML を複数のページに表示する必要がない場合は、1 つのページに HTML を追加することもできます。

  2. ツールボックスを開きます。[ページ コンテンツ] グループで、[プレーン HTML (再利用可能)] をクリックしてページにドラッグします。

  3. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、[作成] をクリックします。

  4. [アイテムを挿入] ダイアログ ボックスで [HTML コードを挿入] をクリックします。

  5. ページを保存します。

  6. [プレーン HTML (再利用可能)] ツールバーで、[HTML ソースの編集] をクリックします。

    ツールバーで [HTML ソースの編集] をクリックします。

  7. HTML コード アイテムがコンテンツ エディターで開きます。[HTML] セクションの [コード] フィールドに、サービス プロバイダーから提供された HTML コードを入力します。

    [HTML] セクションの [コード] フィールド。

    注記

    複雑なコンポーネントの場合、コンポーネントに HTML を自由に配置できるプレーン HTML レンダリングの利用を検討することもできます。ただし、すべてのコンテンツ編集担当者が HTML コードの編集方法を知っているわけではないため、この方法でページにコンテンツを追加すると、編集担当者の作業がやりにくくなる場合があります。プレーン HTML レンダリングの代わりに、クローン、バリアント、または HTML スニペットの利用を検討してください。

HTML スニペットを追加する

HTML スニペットは、メタデータ パーシャル デザインに追加できるメタ コンポーネントです。カスタム HTML を <head> セクションの直後の <body> タグ、または各ページの終了 </body> タグの前に追加するために使用できます。これは、サードパーティのコンポーネント (ウィジェット、追跡スクリプトなど) を埋め込む場合や、使用可能なコンポーネントがカスタムのニーズに合わない場合に便利です。

HTML スニペットを追加するには:

  1. エクスペリエンス エディターで、[パーシャル デザイン] をクリックし、[メタ パーシャル] をクリックします。

  2. SXA ツールボックスの汎用メタ レンダリング カテゴリに HTML スニペット コンポーネントをドラッグ アンド ドロップします。メタ レンダリングは、head セクション、bodyタグの直後、または各ページの終わりの /bodyタグのコンテナに追加できます。

    たとえば、Google タグ マネージャーを統合する場合は、ヘッドに追加することが重要です。

    ヘッド セクションにメタ レンダリングを追加する例。

  3. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、 [作成] をクリックします。

  4. [アイテムを挿入] ダイアログ ボックスで [HTML スニペット] をクリックします。

  5. ページを保存します。

  6. [HTML スニペット] ツールバーで、[HTML ソースの編集] をクリックします。

  7. HTML コード アイテムがコンテンツ エディターで開きます。[HTML スニペット] セクションの [html] フィールドに HTML コードを入力します。