- Set up an A/B test with Optimizely X Web Experimentation
Optimizely makes it easy to A/B test your site. Use the Editor to design variations, define where the experiment runs and who sees it, set events to measure success, and QA. Once your experiment looks and works the way you'd like, publish it live to the world!
Watch this video for a quick overview. Scroll down for step-by-step instructions.
Let's get started.
First, navigate to the Experiments dashboard. Click Create New.
Select Experiment from the dropdown. Name the experiment.
Before you can run an experiment, you'll need to implement the snippet and create at least one page and metric in Optimizely X Web. This checklist helps you set up Optimizely. This experiment design template can help you document and share the details of your experiment.
1. Add pages
Next, tell Optimizely where your experiment will run.
Click () to add any existing pages to your experiment. Or, click Create New Page and set up a new page.
2. Add audiences
Next, decide who will see your experiment.
Click () to add any existing audiences to your experiment. Or, click Create New Audience to build a new audience.
You can combine multiple audiences in your experiment using AND and OR conditions. For example, you can target the experiment to visitors who qualify for the "Social Butterflies" audience AND the "Luxury Travelers" audience -- a visitor must qualify for both. Or you can target the experiment to "Social Butterflies" AND "Luxury Travelers" OR 5x Buyers. In this case, a visitor only needs to qualify for one of these audiences to enter the experiment.
Here's how to target multiple audiences:
Click () to add more than one audience.
Use the dropdown to specify how you'd like to combine your audiences.
Match any audience: A visitor is included if they match any of the audiences you add.
Match all audiences: A visitor is included if they match all of the audiences you add.
Custom: Use AND and OR conditions to specify exactly how you want visitors to qualify.
3. Add metrics
How will you measure success in your experiment? Choose the metrics that best capture how your variations perform. You can do this by adding an existing event to the experiment as a metric or by creating a new event for this experiment.
To add an existing event, click ().
The top metric is your primary metric. It's the metric that determines whether your experiment "wins" or "loses," and should track an event that's directly affected by the changes you make in your experiment. Optimizely's Stats Engine uses false discovery rate control to make sure that the primary metric reaches statistical significance as quickly as possible.
You can also add secondary metrics to measure the downstream effects of your experiment. The top five secondary metrics in your list will reach statistical significance quickly. Additional secondary metrics may take longer to reach statistical significance. Stats Engine ensures that secondary metrics don't affect the speed of your primary metric to help you make quick, data-driven business decisions.
To complete the experiment setup, you must add at least one metric now. Don't worry, you can always change, remove, or add new metrics to your experiment later.
4. Set traffic allocation
Decide how traffic will be split between your variations. Optimizely randomly allocates traffic into different variations, including the original. If you like, you can change the percentage of traffic that goes into each variation. Or, you can leave it as is.
Click Save to complete the experiment workflow and start creating your variations.
Once you save, you can also change the total traffic that goes into the experiment, as a whole.
You'll also use this sidebar to change the components that are attached to your experiment: metrics, audiences, and pages.
5. Create a variation
Once you've completed the experiment setup, use the Visual Editor to make changes to your variations.
Select the variation you want to edit.
To make visual changes, select the element you want to modify. Then, use the navigation in the left rail to make changes to the experience.
In the editor left rail, you can:
- Fine-tune the jQuery selector that you're editing
- Change the layout, including the element's visibility or position; or even rearrange the element on the page
- Modify or replace typography, images, background styles or borders
- Add inline CSS
- Change the timing of the change from synchronous to asynchronous
Then, click Save.
Repeat these steps for all the variations you'd like to create. To add more variations, click New Variation.
To make changes with custom code in JS or CSS, click the () icon.
6. QA and Publish
Now that you’ve set up all components of your experiment, preview it to make sure it looks and works the way you intend.
Use the Preview button to view visual changes for your variation.
Check out this article to QA the functionality of your campaign with the Preview tool.
Not seeing your changes in Preview mode? Make sure your snippet is implemented on this page and configured to include Optimizely X. For deeper QA functionality, learn about advanced QA and troubleshooting.
Once everything looks and works the way you'd like, click Publish to set the experiment live for visitors.
Congratulations! You've created and launched an experiment in Optimizely X Web Experimentation.