Set up a web experiment

Amplitude 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’d like to experiment with, and make changes to their content or properties directly. This allows for less-technical users to easily create experiments without engineering resources.

Before you begin

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

Keep in mind that creating and running a web experiment is different than in feature experiment, though there is some overlap.

Set up a web experiment

To set up a web experiment, follow these steps:

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

2. In the New Experiment modal, give your experiment a name. Enter the URL of a page this experiment targets—Amplitude must be instrumented on that page—and select the appropriate project from the drop-down.

3. If the script is present 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.

   

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

2. Click the element you want to change.

3. The element’s editing panel opens on the right-hand side. Edit the element’s display mode, visibility, text, background, color, or size here. Then click Apply.

   

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

5. If needed, click + to add another variant.

6. When you’re done, click Continue.

7. Next, define your experiment’s goals.

8. In the Pages tab, edit the rules to target additional pages for this experiment. If you're only targeting the page you originally set on creation, you can skip this step. From the Include pages where dropdown, specify how you want Amplitude Experiment to identify these pages.

   

   Use the same pattern to exclude experiment from the pages you select.

9. Next, target the users you want to include in this experiment. If you're familiar with feature experiment targeting, Web Experiment audience targeting works differently.

10. The Advanced tab provides several additional options for your experiment.

11. When you’re ready, click Save and Close to finish creating your Web Experiment.

Test and preview your web experiment

Before running your web experiment, Amplitude recommends that you test and preview each variant. Once you're ready:

1. Click Test & Preview. This puts your experiment in test instrumentation mode, but it doesn't start your experiment. Only users who open the page with the preview link can see your changes.
2. In the modal, select the variant you want to preview (usually the treatment) and select Test in new window.

A new tab opens with the changes you made to the page applied.

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

If you don't see your changes, you may need to wait up to 60 seconds for caches to refresh. If the changes don't appear correctly after that time, there might be something wrong with the configuration.

The Visual Editor

The Visual Editor loads the site located at the URL specified on experiment creation and loads an overlay on top of it. Every element of your site is accessible within the Visual Editor, for you to modify in whatever ways best suit your experiment’s needs.

When you click on an element, its editing panel opens. This is where you make changes to that element. On apply, these changes are then added to the current variant.

At the top is the element’s selector. The selector is a unique identifier for the selected element on the current page. This is grayed out by default, but you can edit it if you need to. You may need to update the selector if you're running the experiment on multiple pages, as the selector that is generated by default is only unique for the current page. Alternatively, you could edit the selector to select and edit multiple elements.

Below the selector are the display and visibility settings. These specify how the element displays on the page. Setting Visibility to Hidden hides the element from view, but the element remains in place; the space it takes up on the page doesn’t change. Setting Display to None effectively removes the element from the page entirely.

The text field stores the element’s text, if any. Edit it directly in the field. You can also change the color and font size of the element’s text. You may use inline HTML tags in the text area to style plain text.

If you select an element without text, the field notes that the element contains inner HTML elements, and lets you edit that, if needed. Click Edit Raw to do so.

Finally, change the element’s background color, or replace the existing background with an image.

Click Apply to commit your changes to this variant.

You can always re-open the Visual Editor later, by clicking Open Visual Editor in the Variants tab.