HTMLにウェブ体験を挿入する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore Personalizeでウェブ体験を作成する際は、パーソナライズされたコンテンツがページのどこに表示されるかを指定する必要があります。
これはバリアントのJavaScriptエディターで行われ、ページ上の要素を選択し、Sitecore Personalizeメソッドを使ってドキュメントオブジェクトモデル(DOM)内の内容を挿入または置き換えます。
ウェブ体験のバリエーションでは:
- HTMLタブは体験の内容(例えばバナーやメッセージ)を定義します
- JavaScriptタブは、そのコンテンツがページ上のどこに表示されるかを決定します。
以下のセクションでは、ページ上の要素を選択する方法と、パーソナライズされたコンテンツをレンダリングするためのSitecore Personalize方法について説明します。
ページ上の要素を選択する
ページに体験を掲載するには、まずコンテンツが表示される場所のHTML要素を選択しなければなりません。
Sitecore Personalize DOM内の要素を選択するためにdocument.querySelector() を使用します。
複数の要素がセレクタと一致する場合、querySelectorは常に 最初に 一致する要素を返します。
以下を使って要素を選択できます:
- ID(例えば、 #header)
- Aクラス(例えば、 .promo-banner)
- HTMLタグ(例: h1)
- コンバインドセレクター(例: .product-card h2)
例:
document.querySelector("#header")
これにより、ID headerを持つ要素を選択します。
レンダリング方法
Sitecore Personalize、ページ上で体験がどのように表現されるかを制御するいくつかの方法を提供しています。
これらの方法を使って以下に利用できます:
- 既存のコンテンツの置き換え
- 要素の前にコンテンツを挿入する
- 要素の後に内容を挿入する
以下のセクションでは、これらの手法がウェブ体験のバリアントでどのように使えるかを示します。
既存コンテンツの置き換え(replaceHTML)
ページの既存の要素をパーソナライズされたコンテンツに置き換えたいときにreplaceHTMLを使います。この方法はラッパー
例として、ホームページのバナーをパーソナライズされたプロモーションに置き換える。
const banner = document.querySelector(".homepage-banner");
replaceHTML(banner, `
\`);この例では:
- スクリプトは .homepage-banner 要素を選択します。
- replaceHTML 既存のバナーをバリアントで定義されたパーソナライズされたバナーに置き換えます。
内容を正確に置き換える(replaceHTMLExact)
ラッパー
例として、メインページのタイトルをパーソナライズされたウェルカムメッセージに置き換える。
const title = document.querySelector("h1");
replaceHTMLExact(title, `
Welcome back! Check out your personalized offers.
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
この例では:
- スクリプトはページ見出し h1を選択します。
- replaceHTMLExact 元の h1 要素をパーソナライズされたタイトルに置き換えます。
要素の前にコンテンツを挿入する(insertHTMLBefore)
既存の要素の前にパーソナライズされたコンテンツを挿入したいときはinsertHTMLBeforeを使いましょう。
例として、商品リストの前にプロモーションバナーを挿入します。
const productList = document.querySelector(".product-list");
insertHTMLBefore(productList, `
\`);この例では:
- スクリプトは .product-list 要素を選択します。
- プロモーションバナーは商品リストの直前に挿入され、ページ上に表示されます。
要素の後にコンテンツを挿入する(insertHTMLAfter)
既存のページの要素の後にパーソナライズされたコンテンツを挿入したいときはinsertHTMLAfterを使います。
例として、カート概要の下に推薦メッセージを追加します。
const cartSummary = document.querySelector("#cart-summary");
insertHTMLAfter(cartSummary, `
この例では:
- スクリプトは #cart-summary 要素を選択します。
- 推薦メッセージはカート概要の後に挿入されるため、ページの下に表示されます。
例
この簡単な例は、ウェブ体験のバリアントが、ページにすでにそのコンテンツ用のスペースがなくても、パーソナライズされたコンテンツを追加できる仕組みを示しています。
シナリオ
小売業者はサイトのヘッダーの下にプロモーションメッセージを表示したいと考えています。ページにはプロモーション用のスロットがないため、バリアントはコンテンツを動的に挿入します。
既存のページ要素
ウェブサイトにはすでにページの上部にヘッダー要素が含まれています:
このバリアントはプロモーションメッセージをヘッダーの真下に挿入します。
HTMLタブ オブ バリアント
HTMLタブで表示したいコンテンツを定義します。
このHTMLがページに表示されるプロモーションメッセージを定義します。
JavaScriptバリアントのタブ
バリアントのJavaScriptタブで、パーソナライズされたコンテンツが表示される要素を選択し、Sitecore Personalizeレンダリング方法のいずれかでコンテンツを挿入します。
const header = document.querySelector(".site-header");
insertHTMLAfter(header, `
\`);この脚本では:
- document.querySelector(".site-header") ページ上の既存のヘッダー要素を選択します。
- insertHTMLAfter() ヘッダーの直後にパーソナライズされたコンテンツを挿入します。
ページ上の結果
体験が実行される前は、ページ上部にヘッダーが入った標準レイアウト、その後にページの内容とフッターが表示されます。
このバリアントが適用されると、プロモーションメッセージはヘッダーの真下に挿入されます。その結果、このバリアントに割り当てられた訪問者はまずヘッダー、次にプロモーションメッセージ、そしてページの残りの内容とフッターを目にします。