---
title: "HTMLにウェブ実験を挿入する"
slug: "inserting-a-web-experiment-in-your-html"
abstract: "パーソナライズされたコンテンツやオファーがウェブサイトのどこに表示されるかを指定する方法を説明します。"
---
# HTMLにウェブ実験を挿入する

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を使います。この方法はラッパー <div>を追加します。

例として、ホームページのバナーをパーソナライズされたプロモーションに置き換える。

const banner = document.querySelector(".homepage-banner");

replaceHTML(banner, \`
 <div class="personalized-banner">
 <h2>Special offer just for you</h2>
 <p>Get 20% off your next purchase.</p>
 </div>
\`);

この例では:

-   スクリプトは .homepage-banner 要素を選択します。
-   replaceHTML 既存のバナーをバリアントで定義されたパーソナライズされたバナーに置き換えます。

## 内容を正確に置き換える(replaceHTMLExact)

ラッパー<div>を加えずに選択した要素自体を置き換えたい場合はreplaceHTMLExactを使ってください。

例として、メインページのタイトルをパーソナライズされたウェルカムメッセージに置き換える。

const title = document.querySelector("h1");

replaceHTMLExact(title, \`
 <h1>Welcome back! Check out your personalized offers.</h1>
\`);

この例では:

-   スクリプトはページ見出し h1を選択します。
-   replaceHTMLExact 元の h1 要素をパーソナライズされたタイトルに置き換えます。

## 要素の前にコンテンツを挿入する(insertHTMLBefore)

既存の要素の前にパーソナライズされたコンテンツを挿入したいときはinsertHTMLBeforeを使いましょう。

例として、商品リストの前にプロモーションバナーを挿入します。

const productList = document.querySelector(".product-list");

insertHTMLBefore(productList, \`
 <div class="promo-banner">
 Free shipping on orders over €50!
 </div>
\`);

この例では:

-   スクリプトは .product-list 要素を選択します。
-   プロモーションバナーは商品リストの直前に挿入され、ページ上に表示されます。

## 要素の後にコンテンツを挿入する(insertHTMLAfter)

既存のページの要素の後にパーソナライズされたコンテンツを挿入したいときはinsertHTMLAfterを使います。

例として、カート概要の下に推薦メッセージを追加します。

const cartSummary = document.querySelector("#cart-summary");

insertHTMLAfter(cartSummary, \`
 <div class="recommendation">
 Customers who bought this also liked our premium warranty.
 </div>
\`);

この例では:

-   スクリプトは #cart-summary 要素を選択します。
-   推薦メッセージはカート概要の後に挿入されるため、ページの下に表示されます。

## 例

この簡単な例は、ウェブ実験のバリアントが、ページにすでにコンテンツ用のスペースがなくてもパーソナライズされたコンテンツを追加できる仕組みを示しています。

### シナリオ

小売業者はサイトのヘッダーの下にプロモーションメッセージを表示したいと考えています。ページにはプロモーション用のスロットがないため、バリアントはコンテンツを動的に挿入します。

### 既存のページ要素

ウェブサイトにはすでにページの上部にヘッダー要素が含まれています:

<header class="site-header">...</header>

このバリアントはプロモーションメッセージをヘッダーの真下に挿入します。

### HTMLタブ オブ バリアント

**HTML**タブで表示したいコンテンツを定義します。

<div class="promo-message">
 <strong>Welcome back!</strong> Enjoy 10% off your next order.
 <a href="https://doc.sitecore.com/offers">View offer</a>
</div><header class="site-header">...</header>

このHTMLがページに表示されるプロモーションメッセージを定義します。

### JavaScriptバリアントのタブ

バリアントの**JavaScript**タブで、パーソナライズされたコンテンツが表示される要素を選択し、Sitecore Personalizeレンダリング方法のいずれかでコンテンツを挿入します。

const header = document.querySelector(".site-header");

insertHTMLAfter(header, \`
 <div class="promo-message">
 <strong>Welcome back!</strong> Enjoy 10% off your next order.
 <a href="https://doc.sitecore.com/offers">View offer</a>
 </div>
\`);

この脚本では:

-   document.querySelector(".site-header") ページ上の既存のヘッダー要素を選択します。
-   insertHTMLAfter() ヘッダーの直後にパーソナライズされたコンテンツを挿入します。

### ページ上の結果

実験が始まる前は、ページ上部にヘッダーが並び、その後にページの内容とフッターが続く標準レイアウトが表示されます。

このバリアントが適用されると、プロモーションメッセージはヘッダーの真下に挿入されます。その結果、このバリアントに割り当てられた訪問者はまずヘッダー、次にプロモーションメッセージ、そしてページの残りの内容とフッターを目にします。