Set up a web experiment

Web Experiment lets you create an A/B or multi-armed bandit experiment without new code. Open your site in the Visual Editor, choose the elements you want to experiment with, and change their content or properties directly.

Web Experiments use Pages to control where your experiment variants apply on your website. Pages let you scope experiments to specific URLs without affecting unrelated parts of your site.

Before you begin

Before you set up a web experiment, implement the Web Experiment script on your site.

Creating and running a web experiment differs from Feature Experiment, though some steps overlap.

Set up a web experiment

To set up a web experiment

1. In Amplitude Experiment, navigate to Experiments > Create Experiment > Web Experiment.

2. In the New Experiment modal, name your experiment.

3. Enter the URL of a page this experiment targets and select the project from the drop-down. Amplitude uses this URL to create your first Page. You must instrument Web Experiment on this URL for the experiment to work.

   If the script is on the page you specified, Amplitude Experiment opens the page in the Visual Editor as a new variant in your experiment.

   You have two options for the treatment variant action: element changes or URL redirect.

4. To change text, colors, or other elements of the page's UI, click Element Changes.

5. Click the element you want to change.

6. The editing toolbar opens beside the selected element with quick actions such as editing the element's content, or move element.

   Click the expand icon to open the drawer and edit CSS style properties.

7. When you're done, click Apply.

8. Repeat this process for each element you want to change for your experiment.

9. (Optional), click + to add another variant.

10. When you're done, click Continue.

After you set the experiment, define the experiment's goals.

To define your experiment's goals

1. In the Pages tab, configure which Pages your experiment targets. Create new Pages or reuse existing saved Pages. If you're only targeting the page you set on creation, skip this step.

2. From the Include pages where dropdown, specify how Amplitude Experiment identifies these pages.

   Use the same pattern to exclude the experiment from pages you select. Learn more about managing Pages for precise experiment targeting.

3. Target the users you want to include in this experiment. Go to audience targeting for more information. Web Experiment audience targeting works differently than Feature Experimentation.

4. Specify any additional options in the Advanced tab.

5. Click Save and Close to finish creating your Web Experiment.

Test and preview your web experiment

Before you run your web experiment, Amplitude recommends you test and preview each variant.

To test your web experiment

1. Click Test & Preview. This puts your experiment in test instrumentation mode, but doesn't begin the experiment. Only users who open the page with the preview link experience your changes.
2. In the modal, click Preview to open a new tab that applies the changes you made for that variant.
3. Click the chain link icon to copy the URL to share with others.

Test each variant at least once. Test on more than one page if your experiment targets multiple pages.

If your changes aren't visible, wait up to 60 seconds for caches to refresh. If the changes don't appear correctly after that time, check your configuration for possible issues.

The Visual Editor

The Visual Editor loads the site at the URL you specified on experiment creation and adds an overlay. The Visual Editor gives you access to every element of your site so you can modify the site for your experiment.

When you click an element, the editing toolbar opens beside the selected element with quick actions such as editing the element's content or move element. Amplitude only adds these changes to the current variant after you apply them.

This toolbar consists of the following sections and tools:

• Selector
• Styles
• CSS
• HTML
• Move
• Navigation

Selector

The selector is a unique identifier for the selected element on the current page. Web Experiment disables the selector by default. Update the selector if you're running the experiment on multiple pages, because the generated selector is only unique for the current page. As an alternative, edit the selector to target multiple elements.

Stability best practices

• Visual Editor behavior: The editor selects the shortest unique path, which may include dynamically generated class names such as sm-contentWrapper_ab12c_3. These class values often include a hash that changes between builds, causing the selector to stop matching.

• When classes have stable substrings: Prefer an attribute selector that matches the stable portion instead of the full hashed class.

  css

  Copy

  /* Instead of a fragile exact class */
  .sm-contentWrapper_ab12c_3
  
  /* Use a contains match on the class attribute */
  div[class*="contentWrapper"]
  

  This continues to match elements like <div class="sm-contentWrapper_ab12c_3"> even if a later build generates sm-contentWrapper_d9f7e_1.

• Most reliable long-term approach: Add a stable attribute (for example, data-*) or a unique id to the element you want to modify, and target that.

  html

  Copy

  <div data-test-id="experiment-content"></div>
  

  html

  Copy

  [data-test-id="experiment-content"] /* or */ #experiment-content
  

Styles

The Styles tab contains frequently used CSS properties, including font size, font color, text alignment, padding, margin, background color, display, and visibility.

CSS

The CSS tab lets you define any CSS property and value, which Amplitude applies inline to the selected element.

HTML

The HTML tab lets you edit the HTML contents of the selected element.

Move

Move the selected element up or down in the DOM tree to adjust its placement relative to its current node. The Move option appears in the primary tool menu bar. The Move control updates the underlying HTML of your page rather than moving elements by a predefined amount using CSS.

To move elements in the page

1. Click the element you want to move.
2. In the editor menu bar, click the Up or Down arrow buttons to move the element. The element moves past one surrounding HTML element at a time.
3. Continue clicking the buttons until you move the element into the position you want.

Note the following as you move elements on the page:

• If changes don't apply, confirm you chose the correct selector for the intended element.
• Confirm that CSS styles on your page don't conflict with the updated positioning.
• Confirm that JavaScript doesn't reset your changes after you apply them.
• Moving an element ignores invisible elements in your DOM.

In addition to moving elements up or down, click Rearrange to enter preview mode. Preview mode lets you explore different element placements on the page.

Navigation mode

Navigation mode lets you navigate between pages in your experiment without exiting the editor.

Navigation mode is useful for:

• Experiments spanning multiple pages, such as multi-step forms, checkout flows, or onboarding sequences.
• Editing variants across multiple pages within the same experiment.

To enter Navigation mode

1. Open your experiment and access the visual editor.
2. In the primary toolbar at the bottom of the page, click Navigate.
3. Navigate your site.
   • When you click an element on the page, the element performs its intended function rather than acting as a selection for the experiment.
   • If you navigate to a page not included in your experiment and attempt to make edits, the Visual Editor updates the page targeting rule to include the page URL and displays a confirmation message.
4. When you land on the page you want to edit, click the pencil icon to toggle the Visual Editor back to Edit mode.
5. Toggle between Edit and Navigation mode as needed to complete your experiment's configuration.

Mobile Simulator

Mobile Simulator lets you preview and edit your experiment variants as they appear on mobile devices. Use the simulator to test responsive layouts, mobile-specific styling, and touch-friendly designs without leaving the Visual Editor.

To enter Mobile Simulator

1. Open your experiment and access the visual editor.
2. In the primary toolbar at the bottom of the page, select Mobile in the device toggle.