HTML tests

An HTML test keeps the visitor on the same URL and applies changes to the page in the browser, comparing each variation against the control - the page as it is today. Use it when the change is an edit to the current page rather than a separate page. You set up the control targeting and the variation changes together in the same step.

Control URL match types

The control has a target URL and a match type. The match type decides which pages are eligible to enter the experiment.

Exact - the experiment runs when the origin and path of the page URL match the target URL. Enter the target as a full URL including the origin, for example https://example.com/pricing - a path on its own, such as /pricing, never matches. Query parameters are treated separately: any extra parameters on the visitor's URL are ignored, so a visitor arriving with tracking parameters still enters the experiment. If the target URL itself includes parameters, those must be present on the page URL with the same values.
Contains - the experiment runs on any page whose URL contains the target value. Use this when one experiment should cover a group of pages, for example every URL under /product/.
Regex - the experiment runs when the regular expression you provide matches the page URL. The pattern is tested against the full URL, including the origin, so a pattern like /blog/(\d+) still works. Use this for advanced patterns, such as matching several related paths at once.
Site-wide - the experiment runs on every page of the site, with no specific URL to match.

Making changes

Each variation holds a list of changes, and each change has a type, a CSS selector, and content.

Change type	What it does	Fields
Change HTML	Replaces the content inside the selected element	Selector, content
Append HTML	Inserts the content as the last child of the selected element	Selector, content
Prepend HTML	Inserts the content as the first child of the selected element	Selector, content
Additional CSS	Adds a stylesheet to the page	Content
Hide Element	Sets `display: none` on the selected element	Selector
Move Element (Append)	Moves the selected element to be the last child of a target element	Selector, target
Move Element (Prepend)	Moves the selected element to be the first child of a target element	Selector, target

Every change except Additional CSS has a Global option. When Global is off, the change applies to the first element matching the selector. When it is on, the change applies to every matching element.

How changes are applied

Changes are applied as soon as the script finds the element on the page. If the element is not in the document yet, Testa retries every 10 milliseconds, up to 30 times, which is a window of roughly 300 milliseconds. If the element has still not appeared, the change is skipped.

Example

A Change HTML change with the selector #hero-title and the content Start your free trial produces:

html

<!-- Control -->
<h1 id="hero-title">Get started today</h1>

<!-- Variation -->
<h1 id="hero-title">Start your free trial</h1>

Edge cases

Change HTML replaces everything inside the element. Event listeners bound to the child elements it replaces are lost. Include any required markup and attributes in the variation content.
Move Element moves the original element. It is removed from its original position rather than copied. If the target selector matches nothing, the change is skipped and the element stays where it is.
Hide Element only sets display: none. Surrounding layout can shift, because the element no longer occupies space.
Global is off by default. On a page with repeated components, such as a list of product cards, only the first one changes unless Global is enabled.

Common setup problems

Variation flicker. The original page briefly appears before the variation is applied. Make sure the anti-flicker snippet is the first script in the <head>, before anything else loads. The full snippet and installation steps are in Integration.
Variation not applying. Confirm the page URL actually matches the target, and that no rule is excluding the visitor. Common causes: an Exact target of https://example.com/pricing/ while visitors land on https://example.com/pricing without the trailing slash; a targeting rule that restricts the experiment to a country or device that does not match the browser being tested; or traffic allocation set below 100 percent, where the visitor was assigned to the excluded group. That exclusion is stored for 30 days, so a browser that was excluded once will keep seeing the original page.
Selector no longer matches. An HTML test depends on the selector you chose. A site deploy that renames a class or changes the markup will silently stop the change from applying. Prefer stable selectors such as an id or a data attribute.