Previewing experiences

Once you have created and configured an experience, the next step is to preview it on-site. This is a critical step, which should be undertaken before publishing, to ensure that the experience fires correctly according to the designed triggers, displays correctly, and crucially that it functions according to your expectations.

By previewing, can you interact with an experience in a similar way to an actual visitor and test its effectiveness.

We recommend using Qubit Explorer to preview an experience. This feature-rich tool not only enables you to preview single experiences, it also allows you to preview multiple experiences simultaneously.

By previewing multiple experiences at the same time, you can get a better understanding of how your experiences play out together on your site, highlighting any potential functional or design issues, and providing a window onto to a typical visitor journey.

TIP: Qubit Explorer can also be used to validate events and test your segments.

To start Qubit Explorer, select Experiences from the side menu and select Launch Explorer:

Alternatively, open your experience from you list of experiences and select in the top-right hand corner of the page.

By default, your most recently updated live experience will display at the top of the list and will be selected for preview:

INFO: By default the list of experiences is ordered by alphabetically by state. You can change which column is used to sort experiences by selecting it once, to order in ascending alphabetical order, so A to Z, and a second time to order in descending order Z to A.

In the following example, the user has chosen to sort the experiences by name and in ascending alphabetical order:

So, we've opened the Explorer from the platform and we can see a list of our experiences. Depending on the reported state, we should now be able to see the experience on the site and begin our QA process to ensure that the experience meets our expectations, both functionally and from a design perspective.

As mentioned, by default, the Explorer will preview the most recently updated live experience. To preview a different experience, simply de-select the original experience, select the one you are interested in, and select Preview selected:

To preview a draft experience, select the Draft tab and follow the same steps.

{{ warning | WARNING: It is not possible to simultaneously preview live and draft experiences together. You can preview multiple live experiences and multiple draft experiences, but you cannot preview a mixture of live and draft experiences. }}

In the same way that you can preview single experiences, you can preview multiple experiences. This is really good way of understanding how your visitors might interact with all the possible experiences they might be served, and highlight any functional or design issues that arise when experiences are triggered on the same page for example.

By default, the selection of multiple experiences is disabled. To enable it, select against one of your experiences and then Preview multiple experiences. You can now select one or more from the list and select Preview selected. The number shown indicates the number of experiences that you have selected to preview.

In the following example, the user has chosen to preview 2 experiences simultaneously:

{{ tip | TIP: At any point whilst previewing, you can jump back to your list of experiences in the Qubit platform. To do this, select against the experience you want to view in the platform and select View on the platform. }}

We report the state of each of the experiences shown in the list. There are 3 possible states:

• Activating - This means that the experience's triggers have been met and the site is attempting to serve the experience. If it is not served, it is likely that there is something wrong with the variation.js.
• Checking - This indicates that the experience's triggers are being evaluated but have not yet been met. If, after a period of time, the state doesn't change to Activating, it is worth investigating to make sure you are on the correct page, that you have met session criteria, or that the element on the page that is being polled for is present
• - This denotes that the experience has been prevented from being served because you are previewing other experiences

In the following example, we see that 2 experiences have the state Activating, 2 have the state Checking, and 1 has been prevented from being served:

It is not always obvious which parts of your site are augmented by experiences. Explorer has a handy feature to help with that, which you can enable by selecting and Highlight experiences . This will highlight content areas of the page registered by active experiences.

In order to register a content area on the page, experiences can use the registerContentAreas API:

module.exports = function variation (options) {
  // This tells explorer which parts of the page this experience will be interacting with
  // When this experience is active, the experience highlighter will highlight these areas
  options.registerContentAreas(['.header', '.footer'])
}

You can also dynamically register and unregister content areas while the experience is executing:

module.exports = function variation (options) {
  options.registerContentAreas(['.header', '.footer'])
  setTimeout(() => {
    options.unregisterContentAreas(['.footer'])
  }, 500)
}

To give you a better view of your site and the experiences being served, you can minimize the Explorer window by selecting

When you preview an experience, you are forcing your site to serve it to you artificially, in a way that does not reflect a true visitor journey. In essence, you are jumping into an experience, bypassing segmentation conditions, traffic allocation settings, and any other experience configuration, in a way that a visitor to your site cannot.

To preview your experiences in the context of the visitor journey you can reset them by selecting Reset at the bottom of the Explorer window.

When you perform a reset, you can continue to preview experiences as you navigate through your site, but they will only fire if all the triggers, traffic allocation, and segmentation conditions have been met. Resetting experiences is therefore a useful method of replicating the visitor journey through your site.

It is also possible to preview experiences by entering the preview URL and experience Id(s) directly into your browser's address bar as either search parameters, using ? or hash parameters, using #.

To launch a preview, you need to provide 2 parameters, options qb_opts and experiences qb_experiences.

qb_opts accepts the following list of comma delimited arguments:

• preview - turn on preview mode for experiences
• bypass_segments - bypass segment checks for all experiences
• bypass_activation - bypass activation checks for all experiences
• remember - set a cookie to remember the current settings for the rest of the session

qb_experience accepts a comma delimited list of variation master Ids.

To preview an experience variation with a master Id of 123456, enter the following:

Example: www.yoursite.com?qb_opts=preview&qb_experiences=123456

You can also preview multiple experiences at the same time. To do this, enter a comma delimited list of variation master Ids.

Example: www.yoursite.com?qb_opts=preview&qb_experiences=123456,987654

Some experiences run across pageviews, so it is sometimes useful to persist these settings and apply them to all pageviews. The qb_opts parameter also accepts a remember argument, which will persist the setting to a cookie for the rest of the session.

Example: www.yoursite.com?qb_opts=preview,remember&qb_experiences=123456,987654

When you have finished previewing the experience, you can close the browser tab or window. If you used the remember argument, you will need to delete a cookie called qb_opts to clear the preview settings.