Preview Mode

Introduction

With the Preview Mode you can

  • navigate your website with the In-Page Console opened and see what data points are being tracked in the process so you can use them to create segment definitions or get basic statistics without leaving your website,
  • 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:

wiki-preview-mode

You can also open the console by adding ?uParams=preview@@on to the URL of a page with added tracking code.

Adding uParams=preview@@on to URL

http://mywebsite.com?uParams=preview@@on

If your website’s URL contains a hash parameter, you should add it before the hash:

http://mywebsite.com?uParams=preview@@on#my-hash

If your website’s URL already contains some parameters, for example:

http://mywebsite.com/products?page=1

then you will need to add &uParams=preview@@on – with & (ampersand) instead of ? (question mark), for example:

http://mywebsite.com/products?page=1&uParams=preview@@on

If your website does not allow you to add a parameter after ? (question mark) you can try to add it after # (hash):

http://mywebsite.com/products?page=1#uParams=preview@@on

The In-Page Console

The in-page console 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 in the UseItBetter Panel.

The Console Log

wiki-console-ui

  • (1) The log contains all data points captured by the tracking code in the last two sections you visited. The list will include all (A) attributes, (E) interactive events and (M) meta events.
  • (2) 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.
  • (3) You can also filter the log by interaction type (for example click, change) or meta event key (Section, Error).
  • (4) You can click a data point in the log to select it.

Console’s Data Point Editor

The console’s editor allows you to work with data points selected from the log:

  • 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.

Working with (E) Interactive Events

  • (5) A selected datapoint shows up above the log in the editor, where you can manipulate it, for example change (6) page element’s selector and (7) interaction type.
  • You can also push an interactive event to the editor without using the log. Press a Shift key and hover your mouse over an element on the page.
  • When interactive event is selected, (8) on the right from the interaction type, there is an indicator of an element (or elements) that matched (6) 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.
  • (9) The matched elements are highlighted with a dotted border. The color of the border matches the color of (8) the indicator.
  • (6) As a rule, an element’s selector in an event matches only a single element on a page. You can click parts of the selector to add wildcards and match more elements.
  • You can click the (7) interaction type to change it (i.e. from mouseover to click).
  • (5) The copy button copies the event to clipboard. The find button copies the event to the Find field and applies a filter to the log.

A selector is a path that contains information about an element that received an interaction and its parents up to:

  • an element with an assigned ID,
  • the top element (usually a body tag), if none of parent element has an ID assigned.

Elements are separated with the / character and top-most element is the first one from the left. Each element is described using:

wiki-console-editor-selector-parts

  • (1) an HTML tag name (i.e. div, a, img, input)
  • (2) an element’s index within its parent (i.e. [1] means it was the first element, [3] means that there were two elements before it)
  • (3) an element’s ID attribute (i.e. “header”) preceded with the # character
  • (4) one or more CSS class names (i.e. “logo”) preceded with the . character
  • (5) elements are separated with the  / character.

Modyfing Selectors

Hover over a part of a selector and click highlighted text to replace it with the wildcard * character (match anything). A modified event will appear in the editor below the original one.

Ctrl + click (Windows) or Cmd + click (Mac) performs a “smart replacement” which preserves a clicked part of a selector.

Changing Event’s Interaction Type

Click an event’s interaction type to change it. Depending on a tag of an element that receives an event you want to chose a different interaction type i.e. “change” or “focus” for input elements and “click” for links.

Copying The Event

Click [copy] button to copy the entire event (selector with interaction type) to the clipboard and use it to build segments in the panel.