1. カスタムHTML

SXAにHTMLを埋め込む

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

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

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

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

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

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

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

  2. ツールボックスを開きます。 Page Contentグループで、Plain HTML (reusable)をクリックしてページにドラッグします。

  3. Select the Associated Contentダイアログボックスで、「Create」をクリックします。

  4. Insert Itemダイアログボックスで、「Insert HTML Code」をクリックします。

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

  6. Plain HTML (Reusable)ツールバーで、Edit HTML sourceをクリックします。

    On the toolbar click Edit HTML source.

  7. これで、HTMLコード アイテムがコンテンツ エディターで開きます。 HTMLセクションのCodeフィールドに、HTMLコードを入力します。

    HTML section Code field.
    メモ

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

HTMLスニペットを追加する

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

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

  1. エクスペリエンス エディターで、Partial Designをクリックし、Meta Partialをクリックします。

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

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

    Add meta renderings to the head section example.

  3. Select the Associated Contentダイアログボックスで、「Create」をクリックします。

  4. Insert Itemダイアログボックスで、「HTML snippet」をクリックします。

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

  6. HTML snippetツールバーで、Edit HTML sourceをクリックします。

  7. これで、HTMLコード アイテムがコンテンツ エディターで開きます。 HTML Snippetセクションのhtmlフィールドに、HTMLコードを入力します。

この記事を改善するための提案がある場合は、 お知らせください!