- 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!
In Optimizely X Web, you can reuse the pages, events, and audiences that you create in an experiment in your other campaigns.
Let's get started.
First, navigate to the Campaign 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 created at least one page and metric in Optimizely X Web. If you haven't done so yet, check out our getting started guide.
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.
3. Add metrics
How will you measure success in your experiment? Choose the events that best capture how your variations perform. Or, create a new event.
Click () to choose one primary metric and up to five secondary metrics.
The primary metric should measure the event where your experiment is most likely to make an impact. Optimizely's Stats Engine uses false discovery rate control to make sure your most important metric reaches statistically significance with full speed and accuracy.
To complete the campaign setup, you must add at least one metric now. Don't worry, you can always change, remove, or add new metrics to your campaign 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 campaign 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 campaign: metrics, audiences, and pages.
5. Create a variation
Once you've completed the campaign setup, use the 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
To make changes with custom code in JS or CSS, click the () icon.
Then, click Save.
Repeat these steps for all the variations you'd like to create. To add more variations, click New Variation.
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.