Creating JavaScript Tests

JavaScript Tests let you modify the behavior and appearance of your website using custom JavaScript code. Unlike Page Tests, they don’t create alternative pages. Instead, Nelio A/B Testing executes a different JavaScript snippet for each variant, allowing you to change the page dynamically in the visitor’s browser.

JavaScript Tests are ideal when you need more flexibility than a CSS & Text Test can provide, such as manipulating the DOM, integrating with third-party libraries, or implementing complex interactions.

When Should I Use a JavaScript Test?

Use a JavaScript Test when you want to:

• Modify page behavior dynamically.
• Show or hide elements based on custom logic.
• Rearrange page elements.
• Integrate with third-party JavaScript libraries.
• Test with interactive components.
• Perform changes that can’t be achieved with CSS alone.

If you’re only changing text, colors, spacing, or other visual styles, a CSS & Text Test is usually simpler and recommended.

How JavaScript Tests Work

Each variant consists of a JavaScript snippet.

When a visitor is assigned to a variant, Nelio A/B Testing executes the corresponding snippet after the page loads. Your code can then modify the page however you like.

Unlike Page Tests, JavaScript Tests don’t require redirects, making them one of the fastest test types available.

The JavaScript Test Lifecycle

Every JavaScript variant follows the same basic lifecycle:

1. The page loads.
2. Nelio determines which variant the visitor should see.
3. Your JavaScript code runs.
4. Once your changes are complete, you call done().
5. Nelio records the page view and starts tracking conversions and other events.

Calling done() is essential because it tells Nelio A/B Testing that the variant is ready. If you never call done(), tracking won’t begin and the loading overlay may remain visible.

The done() Function

The done() function signals that your variant has finished applying its changes. Once it’s called:

• the loading overlay is removed;
• the page view is recorded; and
• conversion tracking begins.

Always call done() after completing your modifications.

Helper Functions

To simplify common tasks, JavaScript Tests include several helper functions.

utils.domReady(callback)

Executes the callback once the DOM is ready.

utils.domReady( () => {
	// Your code here.
	done();
} );Code language: JavaScript (javascript)

utils.elementReady(selector, callback)

Waits until an element matching the specified selector exists. This is particularly useful for pages that load content dynamically.

utils.elementReady( '#menu-cta', ( el ) => {
	el.textContent = 'Subscribe!';
	done();
} );Code language: PHP (php)

The callback receives:

• el — the matching element.
• setCss — a helper function for adding scoped CSS rules.

utils.appendStyle(css)

Adds a <style> element to the page.

utils.appendStyle( `
	#menu-cta {
		background: gold;
		color: black;
	}
` );Code language: CSS (css)

utils.showContent()

Reveals the page without starting tracking.

In most cases you should call done() instead, since it both reveals the page and starts tracking.

Example

The following example changes the text and appearance of a call-to-action button.

utils.elementReady( '#menu-cta', ( el, setCss ) => {
	el.textContent = 'Subscribe!';
	setCss( `
		background: gold;
		color: black;
	` );
	done();
} );Code language: JavaScript (javascript)

Although this example could also be implemented with a CSS & Text Test, JavaScript provides greater flexibility for more advanced scenarios.

Best Practices

When writing JavaScript variants, we recommend the following:

• Keep your code focused on the test.
• Wait until the required elements exist before modifying them.
• Call done() only after all changes have been applied.
• Test your test in Staging Mode before running it on a live site.
• Prefer CSS & Text Tests whenever they provide the functionality you need.