All Collections
PureClarity Academy
Debug and Preview Toolbar
How to use the PureClarity Debug Toolbar?
How to use the PureClarity Debug Toolbar?

Preview and debug using the PureClarity Debug Toolbar

Peter Brooksbank avatar
Written by Peter Brooksbank
Updated over a week ago

What is the toolbar?

The PureClarity Debug Toolbar is a handy tool that enables you to:

  • See what zones are on the current page

  • Preview campaigns, popups and chat auto messages

  • Debug events, useful if you're making changes to the way PureClarity tracks events, or for bespoke clients, the implementation itself

Getting started

Enabling the debug toolbar

The toolbar can be triggered by adding ?pc_debug=true to the stores URL in the address bar. For example if the URL of your store was https://www.my-amazing-store.com you would add ?pc_debug=true to the end, to get https://www.my-amazing-store.com?pc_debug=true. Now hit enter on the address bar and the page will reload, with the debug toolbar now active.

Disabling the debug toolbar

When you're done using the debug toolbar, you can close it by clicking on the x at the top of the menu. This will then stop the debug mode.

Dragging and minimising the debug toolbar

Once enabled, you'll see the debug toolbar icon appear under the top left of your browser screen. Here's an example of what that looks like from our demo site:

By default the toolbar displays as this icon, to keep out of your way until you need it. Clicking on the toolbar expands it, and you'll see the following:

You can drag the toolbar to another place on the screen by clicking on and dragging the blue border at the top, or the PureClarity logo at the top of the menu. If a panel is open, you can also close the main panel, so that just the menu is visible. Alternatively you can minimise the toolbar, which will return it to it's original position as the icon. Below is an example of this in action:

Logging in

To make full use of the debug toolbar, you'll need to login via the debug toolbar. The login details are the same as your admin login details. When you've entered your details and logged in, the page will refresh, and you will now be able to preview your campaigns, popups and chat auto messages.

Using the debug toolbar

Overview

This panel shows you a few pieces of key information that can help when debugging issues or implementing PureClarity:

  • Access Key

    • This is your PureClarity access key, and is the identifier for your store

  • Page Type

    • The page type that is sent to PureClarity on a page_view event. If no page type is provided, the message "No page type provided" will be displayed. Page type is used to help determine the zones that are rendered for a page.

  • Chat Enabled

    • Just as it says, this will tell you whether or not chat is enabled.

  • PureClarity User Id

    • This is the unique identifier assigned to the current user in PureClarity. Note that this may change when a user logs in or logs out.

  • PureClarity Session Id

    • This is the unique identifier assigned to the current session for the user in PureClarity. It will typically be different on every visit.

Zones - Overview

The zones overview section shows you all of the zones that are present on the current page, and whether or not a result was found for each zone.

Zones - Campaigns

The zones campaigns section shows you which campaigns are currently active for each zone, and allows you to pick another campaign (setup for that zone) to preview in its place. This includes inactive or unpublished campaigns, making it easy to check a campaign on your site before your customers see it. The preview also ignores segment conditions, perfect for when you have campaigns for segments that are hard to easily replicate.

You can also reload the campaign (if you've made changes in the admin) or find the location of the zone on the page, via the provided buttons.

Zones - Popups

The zones popups section allows you to preview any popups that you've created. This includes inactive or unpublished popups, making it easy to check a popup on your site before your customers see it. The preview also ignores segment conditions, perfect for when you have popup for segments that are hard to easily replicate.

Zones - Chat Auto Messaging

A gif of using the debug toolbar to preview chat bots

The zones chat auto messaging section allows you to preview any chat auto messages or chat bots that you've created. These can even be inactive or unpublished, making it easy to check what your customers will see. The preview also ignores segment conditions, perfect when you have segments that are hard to easily replicate. You can even preview whilst the chat feature is disabled.

Events Overview

An image of the events overview panel in the debug toolbar, showing a list of events sent to PureClarity

The events overview section provides a list of the events that the clientscript has received on the current page. Most of these will be tracking events that are sent to PureClarity, whilst others may be a call to retrieve a manual zone, a currency change or even a preview call.

In cases where there is too much data to show for the event in the debugger, it will display the message "There was too much data to show. Click the button to copy the data". Clicking on the button will provide the full data for the event, which can then be pasted into your text editor or location of choice to review.

This information is typically useful when first implementing PureClarity on a bespoke platform. Platforms with plugins, such as Shopify for example, typically don't need to check this.

Did this answer your question?