Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Preview tool in Optimizely X Web

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
Relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

tHIS ARTICLE WILL HELP YOU:
  • View draft or published experiments and campaigns
  • Preview the experiences and functionality of a campaign in Optimizely X Web
  • QA and debug a campaign
  • Make sure that events are firing correctly

In Optimizely X, you can use the Preview tool to make sure that your experiments and campaigns look and work the way they should. There's no need to use force parameters, cookies, or the developer console to check experiment functionality.

Use the Preview tool to:

  • View draft and published experiments and campaigns.

  • Review multiple live experiments and campaigns that are running on a page.

  • Toggle between variations.

  • QA your site for different audiences.

  • Evaluate the timing of code execution.

  • Confirm that events are firing properly.

  • Navigate your site in preview mode without publishing your changes.

Preview mode persists for 10 minutes after you close the Preview tool.

If you'd like to QA a live experiment or campaign and share it with many stakeholders, consider setting a test cookie or using the force variation parameter instead. The?optimizely_token=PUBLIC parameter lets you QA draft and paused variations across multiple devices without passing long tokenized URLs between devices.

Launch the Preview tool

Here's how to launch the Preview tool from the Manage Experiment dashboard. It's active when you have a draft experiment or campaign, or your live experiment or campaign has unpublished changes.

To preview a specific variation or experience, navigate to the variation and click Preview. You'll enter that variation directly without having to worry about audience conditions. 

Use the Preview icon () icon to drag the module if it covers a part of the page you'd like to see. Click it to see these three views: 

Currently Viewing

The Currently Viewing tab gives you details on the experience you currently see:

  • The experiment or campaign

  • The experience or variation you're bucketed into

  • The audience you're viewing the experience as (when you first open Preview mode, this is the audience you'd naturally qualify for)

Toggle Draft Changes to show or hide changes that haven't been published yet. Changes that have not been published in your experiment will show as yellow, while published changes show in green. 

The Other live experiments you're viewing section lists experiments or campaigns that are running on the same page for the same audience. Use this prompt to check for conflicts between those experiences. For example, if you're targeting a personalized CTA to luxury travelers on the homepage and testing different background images on the same page, make sure these changes look right for a visitor who sees both.

Override

When you first open the Preview tool, the page displays as it would for the audience you naturally qualify for. Use the Override tab to see the page as your other audiences would. The Override tab lets you force specific experiences or variations to appear.

Override2.gif

Here's when it might be handy:

  • If you have multiple experiments running on a page, toggle between different audiences to see them all

  • If you're running a Personalization campaign, view the experience that you're delivering to each audience

To see both live and draft changes, navigate to the Currently Viewing tab > Draft Changes Show.

To force a specific variation or experience to appear, click Browse for Audiences and choose an audience. Then, select a variation that's available for that audience. Click Apply Changes to preview the page as that audience.

Feed

The Feed tab displays a list of page-level events as they occur. Use this to check the functionality of your experiment or campaign. Click or fire the events you attached to this page to make sure they work correctly.

Events in the feed are triggered through the same code paths as in a live campaign, but no GET request is sent across the network. This means that any action you take in Preview Mode will not be recorded in your results page.

Here's what you may see: 

  • Campaign events (): a campaign is activated on the page, for this audience.

  • Page events (): the URL targeting of a page is activated.

    For example, you've created a page that uses URL targeting to match multiple product detail pages. When a visitor navigates to any one of those pages, the page event will fire. If you've created a second page that targets an individual product detail page, that page event will fire separately when a visitor sees it. Two separate page events would appear in your feed.

  • Click events, pageview events, or custom events (): metrics attached to the experiment or campaign have fired on the page.

Click the icons above to filter the feed for only those events. 

To avoid firing an event when clicking an element, select the element with a right-click. 

How the Preview tool works

Preview mode adds a preview token to your URL:?optimizely_token=<token>. This token is generated by Optimizely to ensure that only users with access to the Optimizely project can preview draft experiments and campaigns.

The tool uses a combination of query string parameters to display a specific experiment and variation (or campaign and experience).

The token Preview mode token is stored in a cookie that persists for 10 minutes to prevent the token parameter from being lost as you navigate around the site. While the Preview mode cookie is stored, all instances of your site (including separate tabs and windows) load with Optimizely Preview mode enabled.

Related articles