Introduction
With the Preview Mode you can
- navigate your website with the Console Log opened and see what data points are being tracked in the process so you can use them to create segment definitions,
- point-and-click elements on your website to get basic usage statistics from the context menu,
- quickly access click, moves, and exposure Heat Maps for your current screen resolution or resolutions emulated with browser's responsive mode,
- use Explore to aggregate behavioral data from all resolutions
- test Responses that are set to be triggered in Preview Mode before you enable them in Live Mode to publish them to website users.
How to Open Preview Mode
To open your website in the Preview Mode, click (1) the “Preview mode” in the top right corner of the Panel:
If you don't see the "Preview Mode" link then go to the "Project Settings" and make sure you have set your project's base URL. If you can see the link, but your website shows an error when you click it, then try changing the "ADD PARAMS TO:" project setting from "search (?)" to "hash (#)". If there is no error but the console doesn't show up, check if the scripts were added to the page.
Tip: You can also open the console by adding ?preview@@on or #preview@@on param to the URL. In such case, you won't be able to use features that require access to data: Heat Maps, Explore or Stats. Learn more.
The Console
Once you open a Preview Mode you should see the console fixed at the bottom of your browser's viewport. You may change where it's displayed by clicking the "u-" icon. (1)
The console gives you the access to the log (2) which contains all the datapoints collected by UseItBetter while you're browsing the website. You can also, directly from the console, Explore (3) interactions or view Heat Maps (4) of the page you're on.
If you are in the process of making changes to your website with Triggers, then you can click the refresh icon (5) to clear the cache and load the latest version of Triggers.
The Console Log
The console log can help you understand which data points are being collected on each page of your site and see exact values of interactive events, meta events and attributes that you can use to build segments and configure reports and Triggers in the UseItBetter Panel.
- The log contains all data points captured by the tracking code in the last two sections you visited (1). The list will include all (A) attributes, (E) interactive events and (M) meta events (2). Click any of the datapoints to select it - you will then be able to edit, copy, or view Stats for the selected datapoint.
- (3) You can filter the log by typing a query into the Find field. You can use * wildcard to match multiple events. For example,
*#header*/a*would return all interactions with links (A tags) within the header element.
The Context Menu
While in the Preview Mode, you can press control key and click (1) an element on the page that you are interested in. A context menu will open allowing you to (2) select the element or (3) view related stats.
If you have previously selected an element (1), you can press control key and click another element (2) and then (3) add it to the selection
If you select multiple elements UseItBetter will also suggest an event selector that will match all the elements (4). This is useful when you want to match interactions with multiple similar elements, e.g. all the breadcrumb links.
Tip: you can also press shift key and move mouse pointer over an element to select it. If you press shift + command/windows and hover over an element you will add it to selection.
Selected Data Point
The console’s editor allows you to work with data points selected from the log or using the context menu:
- replace certain parts of a data point with wildcards to create a query,
- view basic statistics related for that query,
- copy the query to clipboard and paste it the segment’s definition editor.
- (1) A selected data point shows up above the log in the editor, where you can manipulate it, for example change page element’s selector to match multiple elements, or (2) interaction type.
- When interactive event is selected, on the right from the interaction type (2), there is (3) an indicator of an element (or elements) that matched (1) the element’s selector. The number tells you how many elements of the same type and with the same content were found. On the right you can see a tag type (i.e. A tag) and content of that element ("Women"). The matched elements are highlighted with a dotted border. The color of the border matches the color of the indicator.
- (4) You can remove the data point from the selection by clicking the "x" icon.
- (5) By clicking the magnifying glass icon you can push the event to the Find field and applies a filter to the log.
- (6) The copy button copies the data point to clipboard. You can then use it to create a new segment in the app.
- (7) The stats button will show you basic statistics regarding the datapoint.
Console Stats
The Preview MOde allows you to get a quick preview of stats related to (1) a selected data point(s).
The Console Stats will show you:
- (2) how many times a certain data point or data points happened, when was its first and the last occurance, and a histogram showing the number of visits over the last two weeks.
- (3) if the selected data point contains wildcards and its definition can matches multiple data points, you will see a list of those data points with information about share, volume and last occurance of each of them.
Explore
The Explore feature is only available from the Preview Mode. It shows you information about users' interactions with elements on the current page including clicks and changes to form fields.
- (1) Numbers in the black dots displayed next to elements on the page tell in you what percentage of visits the elements were clicked.
- (2) Numbers in the cyan dots displayed next to form fields on the page tell in you what percentage of visits those fields were edited.
- (3) You can close Explore mode by clicking the "Explore" button again.
Unlike Heat Maps, the Explore feature is not reliant on screen resolution.
Heat Maps
The Preview Mode is the easiest way to view Heat Maps of your website. Just navigate to the page you are interested in and click "Heat Maps" in the console to load a heat map matching your current screen resolution. To see a heat map for another resolution open browser's responsive mode, set the desired device or screen resolution and then load the heat map.
- (1) Click the "u-" icon to access heat map settings
- (2) Switch between click, move and exposure heat maps.
- (3) Navigate your website to see heat maps of other pages visited by the same users.
- (4) Click "Heat Maps" button again to turn off the heat map overlay.
If you need a greater control over what is displayed on the heat maps, try the Heat Maps report.
Using Preview Mode with a Workspace
By default, when you load a heat map or explore stats from the Preview Mode, the data is based on the most recent visits, regardless of what happened in those visits. If you want to see data for a specific timeframe or for a segment of visits in which users bahaved in a certain way, you need to first create a workspace, set the desired timeframe and select a segment.