- Preview visual changes to your variations
- See which audiences or dimensions you're included in
- Make sure click goals are firing correctly
- Preview the experiment as if you're a different visitor
- Use Cross-Browser Test to see the variation as it will render in different browsers
While your experiment may look great and ready to go in the Optimizely Editor, it's important to preview your experiment to make sure everything is working as expected when the variation code runs outside of the Editor. Want to see preview mode in action? Watch this short video.
There are several things you can accomplish to check your Optimizely experiment using the Optimizely Preview Panel:
- Make sure the changes look right.
- Check that you're in the right audiences and dimensions.
- Make sure your click goals are firing.
- View as a specific visitor.
We'll cover each of these tasks in this article.
Launching Preview Mode
There are two ways to launch Preview Mode. From the Home page, go to the Overview > Experiments tab and click Preview in the sidebar to the right.
To launch Preview Mode in the Editor, click on the down arrow of any variation's tab and select Preview.
If you have recently saved changes, you may be presented with a dialogue box giving you a choice of a Hosted Preview or a Live Preview. The spinning progress bar next to either option indicates that Optimizely is still saving the changes you made.
- Hosted Preview: This will show you a preview of your experiment by loading your site on our preview domain www.optimizelypreview.com. Some functionality may not work as intended, so only use this option if the Optimizely snippet is not actually on the page you want to preview.
- Live Preview: This will show you a preview of your experiment live on your site using the page you loaded in the Editor. Use this option when it's available.
Using the Preview Panel
Once the preview has launched, you'll see your experiment page loaded live on your site, showing the variation which you used to launch the preview.
At the bottom, you'll see the Optimizely Preview Panel with four content tabs shown:
- Experiments: This tab will show you all of the experiments contained in this project.
- Audiences: This tab will show you all of the audiences that you are currently set in.
- Dimensions: This tab will show you all of the dimensions that you are currently set in, and their values.
- Events: This tab will show you all of the events that are happening from the Optimizely snippet's perspective, including click goals firing, audiences/dimensions being evaluated, and experiment conditions being checked.
- Viewing As: This tab will allow you to preview the experiment as though you are a different visitor, setting attributes such as your browser, cookies, location, etc. The title of this tab will update to indicate whether you're viewing as yourself, or as a custom visitor.
To the right of these tabs, you'll also see a URL Path input, where you can enter different URLs. We recommend using this to confirm that the experiment loads (or doesn't load) as intended when you enter different URL paths, based on your URL targeting conditions. Try adding or removing query parameters, or entering similar URLs that visitors may use on your site.
Note that you can't change the domain in the URL Path field, because the Preview tool is intended to be used only on your site.
The Experiments Tab
Here you can see the experiments currently active for preview on the page.
Clicking the experiment name will open a popover that gives you more information about the experiment, such as its status, why it's visible, and controls to enable or disable the experiment.
You can also use the drop-down menu under Variation Visible on this Page to toggle which variation is displayed.
Sometimes you may have experiments running simultaneously on a page, so you can use this feature to test how two or more experiments would look if they were to run on the page at the same time.
In this tab, you can see all of the experiments contained in this project:
- Experiments Visible - These experiments are active in this preview on the page.
- Experiments Not Visible - These experiments are in the snippet but are not active on the page right now.
You can also see the status of each experiment:
- Green• = Running
- Yellow• = Paused
- Grey• = Draft
The Audiences and Dimensions Tabs
Here you can see all the Audiences and Dimensions that you (as the previewer) are currently a part of. This tab is especially useful to check if your audience conditions are set up correctly to get you into the experiment. In other words, if you are included in the audiences that you would expect to be in, this is a good indicator that the experiment is set up correctly.
Additionally, you can use the Viewing As tab to test these conditions. For example, in the screenshot of the Visitor Dimensions tab below, the Source Type is Referral. This is not because the visitor actually was a referral, but because they used the Viewing As tab to set their referring URL to facebook.com. We'll discuss the Viewing As tab more below.
Audience conditions may not evaluate correctly in Preview mode when an experiment is paused. Check out this article on how to use the test cookie method to QA your experiment instead.
The Events Tab
This tab is useful for verifying the events that Optimizely is executing as part of the experiment. Most notably, you can right-click on any element on the page for which you have set up a click goal, and you should see that event name show up in the list, meaning that the click goal is firing off correctly.
The Viewing As Tab
Here you can configure the preview console to load as though you were a visitor with a variety of special conditions. This allows you to preview an experiment's targeting conditions to ensure that they function as expected. The label of this tab will update to indicate whether you're viewing the experiment as yourself, or as a custom visitor.
In the example below, we have configured the visitor attributes to have a session cookie with a unique value, a campaign query parameter, and a referrer of www.facebook.com. Once we click Apply & Reload, we can go to the Experiments tab to see any experiments which meet the targeting conditions we just configured.
As part of validating that your experiment is set up correctly, you should confirm that the visual changes that you have made to your page display correctly in all browsers.
The Cross-Browser Test is not available to all plan types. If you don’t see this feature in your Optimizely account, or want to learn more about what’s available, please refer to our feature pricing matrix.
An easy way to confirm this is to use our cross browser testing service provided by CrossBrowserTesting.com. This feature will load your page and take screenshots in all of the major desktop browsers (Internet Explorer, Chrome, Firefox and Safari) as well as mobile (Android and Mobile Safari).
A new tab will open with the thumbnails of all of the screenshots in each browser. Clicking on the screenshots will allow you to view the larger screenshot.
To reduce the chance of cross-browser issues, please see our article on the best practices for using the Editor.
Further QA and troubleshooting after the experiment is live
Preview Mode and Cross-Browser Test are good techniques to use as part of your Pre-Launch Checklist. After using the preview console and following the process in this article, you may set your experiment live and visit a page where you expect to see a variation, but find that your changes aren't appearing.
For QA techniques once your experiment is live, you may want to force specific variations to run in your browser or set a test cookie so that you can preview the experiment outside of Optimizely while it's live. If you encounter other issues, try our Troubleshooting 101 article.