We'll show you how to use the Qubit Explorer to preview experiences.
The Qubit Explorer is a feature-rich tool that brings together three key views to give you the perfect overview of what's happening on your site:
INFO: Qubit Explorer is supported by the latest versions of Edge, Firefox, and Chrome browsers. See Browser Compatibility for more information about the browsers we support.
INFO: To use the explorer in Safari on mobile devices you will need to disable Prevent Cross-site tracking. Refer to this animated gif for details of how to do this. Once done, close and relaunch Safari.
There are a few different ways to start the explorer:
The simplest way is to open up your list of experiences and select Launch Explorer:
Alternatively, open an experience from one of your lists and select in the top-right hand corner of the page.
You can also start the explorer by appending ?qubit_explorer
or #qubit_explorer
to your site's URL, e.g. www.mywebsite.com?qubit_explorer
.
Once your site loads, you'll find an on-page prompt:
Select this to open the explorer and then select Experiences
In the Experiences view, we'll load all the live and draft experiences for your site:
INFO: By default the list of experiences is ordered 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.
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.
Hover over the experience you want to preview, select , and then select the variation
To preview a draft experience, select the Draft tab and follow the same steps
WARNING: Currently 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.
This is really good way of understanding how your experiences play out together on your site, 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.
In short, it's great for getting a window onto a typical visitor journey.
You'll have to turn this mode on to preview multiple experiences:
In the following example, the user has chosen to preview two experiences simultaneously:
There are 3 possible states:
variation.js
.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 reset experiences, select 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 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.
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)
}
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 experiencesbypass_segments
- bypass segment checks for all experiencesbypass_activation
- bypass activation checks for all experiencesremember
- set a cookie to remember the current settings for the rest of the sessionqb_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 preview an experience, we pass 2 parameters into the URL, qp_opts
and qp_experiences
, for example:
https://www.qubit.com/#qb_opts=preview,bypass_segments&qb_experiences=741717&qubit_explorer=true
The first of these parameters, qp_opts
accepts an argument that allows you to bypass segment membership, which can be useful when testing an experience.
Equally, you may wish to test that the experience is only served to visitors that are members of a segment that the experience is targeting. You can do this, simply remove bypass_segments
from the URL:
https://www.qubit.com/#qb_opts=preview&qb_experiences=741717&qubit_explorer=true
Following the above example, the experience will only be served if the visitor is a member of any segment that the experience is targeting. See Other ways of previewing your experiences for more information.
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.