SXAにHTMLを埋め込む
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ページに特定のHTMLを追加するために、SXAには2つのコンポーネントが付属しています
HTMLとPlain HTML(再利用可能)コンポーネント、そしてHTMLスニペットコンポーネントです。Plain HTMLおよびPlain HTML(再利用可能)コンポーネントを使って、例えばYouTube動画を埋め込むためにページに配置したい視覚的要素のHTMLコードを埋め込み(および保存)します。このコンポーネントはSXAがすべてのコンポーネントに使用するデフォルトのラッパーを追加します。
汎用HTMLスニペットコンポーネントを使ってメタ部分デザインを付け、HTML要素をバックグラウンドで動作させます。外部システムと統合できます。例えば、Googleタグマネージャーや顧客サーバーチャット機能の統合などです。このコンポーネントには追加のマークアップが付加されません。
プレーンHTMLコンポーネントを追加してください
プレーンHTMLは、任意の静的HTMLブロックを含めることができる汎用コンポーネントです。Plain HTML(再利用)コンポーネントは、単一使用用だけでなく、サイト全体の複数ページにまたがって再利用することもできます。
プレーンHTMLコンポーネントを追加するには:
-
エクスペリエンスエディターで、HTMLを追加したいページ(デザイン)または部分デザインに移動します。複数のページにまたがってHTMLを表示する必要がない場合は、ページに追加することもできます。
-
ツールボックスを開きます。 ページコンテンツ グループで 「Plain HTML(再利用可能) 」をクリックしてページにドラッグします。
-
「関連コンテンツ選択」ダイアログボックスで**「作成**」をクリックします。
-
アイテム 挿入 ダイアログボックスで「 HTMLコードを挿入」をクリックします。
-
ページを保存してください。
-
Plain HTML(再利用可能)ツールバーで「HTMLソース編集」をクリックします。
-
コンテンツエディターでHTMLコードの項目が開きます。 HTMLセクションの コード 欄でHTMLコードを入力してください。
!注複雑なコンポーネントの場合は、プレーンHTMLレンダリングを使うことを検討するとよいでしょう。これにより、配置できるHTMLの自由度が完全に向上します。しかし、このページへのコンテンツ追加方法は、すべてのコンテンツエディターがHTMLコードの編集方法を知っているわけではないため、編集者が扱いづらい場合があります。プレーンHTMLレンダリングの代わりに、クローンやバリアント、またはHTMLスニペットの使用を検討してみてください。
HTMLスニペットを追加してください
HTMLスニペットはメタデータ部分設計に追加できるメタコンポーネントです。タグの直後や各ページのクロージングタグの直前で、セクションにカスタムHTMLを追加するために使うことができます。これは、サードパーティのコンポーネント(ウィジェット、トラッキングスクリプトなど)を埋め込みたい場合や、利用可能なコンポーネントがあなたのカスタムニーズに合わない場合に便利です。
HTMLスニペットを追加するには:
-
エクスペリエンスエディターで 「部分デザイン 」をクリックし、「 **メタ部分」**をクリックします。
-
SXAツールボックスの 汎用メタレンダリング カテゴリで、HTMLスニペット コンポーネントをドラッグ&ドロップします。メタレンダリングは、headセクション、bodyタグの直後、または各ページのクロージング /bodyタグの前に、以下のコンテナに追加できます。
例えばGoogleタグマネージャーを統合したい場合、頭に付けることが重要です。
-
「関連コンテンツ選択」ダイアログボックスで**「作成**」をクリックします。
-
「 アイテム挿入 」ダイアログボックスで、HTMLスニペットをクリックします。
-
ページを保存してください。
-
HTMLスニペットツールバーで**「HTMLソース編集**」をクリックします。
-
HTMLコードの項目がコンテンツエディターで開きます。 HTMLスニペット セクションのhtmlフィールドでHTMLコードを入力してください。