How to Create a JavaScript Test

JavaScript Tests let you modify your WordPress site’s appearance or behavior dynamically by injecting custom JavaScript code. They’re ideal for advanced users who want maximum flexibility — for example, tweaking button behaviors, dynamically replacing content, or modifying non-standard elements created by page builders like Elementor or Divi.

With Nelio A/B Testing, you can easily create, manage, and analyze JavaScript tests directly from your WordPress dashboard — no external setup required.

Step 1: Create a New JavaScript Test

1. In your WordPress dashboard, go to Nelio A/B Testing → Tests.
2. Click Add Test.
3. In the dialog, select JavaScript (under the “Global” test category).

💡 JavaScript Tests are perfect when you want to modify parts of your site that can’t be edited using standard A/B test types (for example, elements created with a page builder or loaded via third-party plugins).

Step 2: Name and Define Your Test

Give your test a descriptive name (for example, (e.g., “Change Menu Link Label” or “Button Animation Effect”).

In the right sidebar, you’ll find:

• Status & Management — Shows whether the test is Draft, Ready, Scheduled, or Paused, and lets you set start/end dates.
• Description — Summarize what you are testing and what you expect to achieve (for example, “Adding a hover animation on the call-to-action button will increase clicks”).
• Test Scope — Define where your test will run:
  • By default, variants are visible on all pages of your website.
  • To limit visibility to specific areas, use the form to define URLs where the test should execute (for example, /shop/*, /pricing/, /blog/*).

Step 3: Create and Edit Variants

A JavaScript Test compares different snippets of JavaScript code to determine which changes improve your desired outcomes. For example, you can test whether adding animation to your call-to-action buttons or modifying non-standard elements created by page builders like Elementor or Divi leads to more clicks and improves engagement.

Create New Variants

• Create a “Variant B” (or more than one) of your current current appearance with no extra changes.
• Give each variant a descriptive name — for instance, “Highlight Menu Button” or “Change CTA Color Dynamically.”
• Click Edit to customize each variant. You can also click Preview, Duplicate and Reset. Each variant starts as an empty code block ready for your script.

💡 Click New Variant to create a new alternative based on your current look and feel, or use Duplicate under any existing variant to create a copy of that specific snippet.

Editing a Variant

When you edit a variant, Nelio opens a JavaScript editor next to a live preview of your website.

This lets you write and test code in context.

Your script is automatically wrapped inside a function like this:

function( done: () => void, utils: Utils ): void {
  /* Your code goes here */
}
type Utils = {
  readonly domReady: ( fn: () => void ) => void;
}
Code language: JavaScript (javascript)

How it works

utils.domReady(fn) — ensures your code runs only after the page (DOM) is fully loaded.

done() — must be called when your script finishes executing. This tells Nelio that the variant is ready to be displayed and tracked.

Example: Editing a Menu Item Created with a Page Builder

Imagine your website uses a custom theme or a page builder like Elementor that doesn’t rely on WordPress’s standard menu system. In this case, you can’t normally edit menu items through the dashboard—but with a JavaScript Test, you can still modify how a specific menu item looks and what it says.

For instance, suppose you want to change the text and background color of the “Store” menu item.

You could use the following snippet:

function( done, utils ) {
  utils.domReady( () => {
    const menuItem = document.querySelector('#menu-item-19 a'); // Replace with your actual menu item ID
    if (menuItem) {
      menuItem.textContent = 'Seasonal Deals';
      menuItem.style.backgroundColor = '#75c32c';
    }
    done(); // Tell Nelio that the variant is ready
  });
}
Code language: JavaScript (javascript)

This dynamically updates both the content and style of the menu item for visitors assigned to that variant — without needing to edit the menu in WordPress.

Once your code is ready, click Save and Preview to see the effect in action. When you’re happy with the result, click Back to return to your test.

Step 4: Define Goals and Conversion Actions

Every test needs a goal — what counts as success.

Each goal can include one or more conversion actions that describe the specific behavior you want to track.

Name your goals, then click the Add Action button to choose from the available conversion actions.

You can combine multiple actions under one goal.

🔍 Learn more: What Are the Conversion Actions and Goals? →

Step 5: Add Segmentation Rules (Optional)

Segmentation lets you decide who participates in the test. You can target visitors by conditions such as:

URL parameter · Referrer · Language · Location · Logged-in status · Visitor Type · Day/time · Browser · Device type · Operating system · Window Width · Cookie · IP address

If you skip segmentation, all visitors to the tested pages are included automatically.

🔍 Learn more What is Segmentation and How to Use It →

Step 6: Start the Test

When everything is ready:

1. Review your setup summary at the top of the page.
2. Click Start.

Nelio A/B Testing will:

• Randomly assign visitors to variants.
• Track conversions anonymously via Nelio Cloud.
• Display real-time results in your dashboard.

⏯ Pause, Resume, or Stop Your Test

• Pause a running test if you need to make changes, then resume it later.
• Stop a test manually whenever you want, or let it end automatically under certain conditions such as duration, total number of visits or confidence results (available in Professional and Enterprise plans).
• Once a test is stopped, its results remain available for review.

Step 7: View Results and Analyze Performance

While your test runs, go to Nelio A/B Testing → Tests and click View Results to monitor its progress.

Summary of the results

In the right sidebar, you’ll find a quick overview of your test:

Goal selector – Choose which goal’s results to display.

Status icon – Indicates experiment status:

🟡 Collecting data.

🕒💛 Potential winner, low confidence

🟢🏅 Clear winner found.

🔴 No improvement over control.

Unique results – Filter duplicates.

Public results – Share a public link.

Export results – Download a CSV.

Summary – Shows status, duration, start date, and end condition.

Test Progress

The main area of the results page is divided into two tabs that visualize your test’s progress and performance:

• Conversion Rates — A line chart showing conversion evolution across variants.
• Views and Conversions — Compares total visits and conversions for each variant.

Confidence indicators appear alongside these charts, updating automatically as more data accumulates.

Below the charts, you’ll find a summary table with:

• A thumbnail preview (if available) of each variant.
• Number of visits and conversions.
• Conversion rate and improvement over control.

Step 8: Improve Your Web Conversion

You can end a test manually using the Stop button in the upper-right corner of the results page, or let it end automatically based on the configured end mode.

After completing a test and identifying a clear winner, manually apply the JavaScript code from the winning variant to your live site. You can do this through your theme’s custom scripts area, a custom plugin, or your site’s script manager.

This ensures your high-performing changes become part of your permanent site experience.