Inserting a web experiment in your HTML

To place your experiment on the page, you must first select the HTML element where the content should appear.

Sitecore Personalize uses document.querySelector() to select elements in the DOM.

If multiple elements match the selector, querySelector always returns the first matching element.

You can select elements using:

Example:

document.querySelector("#header")

This selects the element with the ID header.

Sitecore Personalize provides several methods that control how the experiment is rendered on the page.

You can use these methods to:

The following sections demonstrate how these methods can be used in a web experiment variant.

Use replaceHTML when you want to replace an existing element on the page with personalized content. This method adds a wrapper <div>.

Example scenario: Replace the homepage banner with a personalized promotion.

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>
`);

In this example:

Use replaceHTMLExact when you want to replace the selected element itself without adding a wrapper <div>.

Example scenario: Replace the main page title with a personalized welcome message.

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

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

In this example:

Use insertHTMLBefore when you want to insert personalized content before an existing element on the page.

Example scenario: Insert a promotional banner before the product list.

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

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

In this example:

Use insertHTMLAfter when you want to insert personalized content after an existing element on the page.

Example scenario: Add a recommendation message below the cart summary.

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

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

In this example:

This simple example shows how a web experiment variant can add personalized content to a page, even if the page does not already contain a space for that content.

Scenario

A retailer wants to display a promotional message below the site header. The page does not contain a slot for the promotion, so the variant inserts the content dynamically.

Existing element of the page

The website already contains a header element at the top of the page:

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

The variant will insert the promotional message directly below the header.

HTML tab of variant

In the HTML tab, define the content you want to display.

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

This HTML defines the promotional message that will appear on the page.

JavaScript tab of variant

In the JavaScript tab of the variant, select the element where the personalized content should appear and insert the content using one of the Sitecore Personalize rendering methods.

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

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

In this script:

Result on the page

Before the experiment runs, the page contains the standard layout with the header at the top, followed by the page content and footer.

When the variant is applied, the promotional message is inserted directly below the header. As a result, visitors assigned to this variant see the header first, then the promotional message, followed by the rest of the page content and the footer.