Skip to main content
All CollectionsGet StartedGuides
How to use the Nosto Debug Toolbar?
How to use the Nosto Debug Toolbar?

Learn how to use the Nosto Debug Toolbar

Lari Lehtonen avatar
Written by Lari Lehtonen
Updated over 4 months ago

Introduction

The Nosto Debug Toolbar is an easy-to-use tool that helps anyone implementing and designing Nosto on-site features such as on-site recommendations and behavioral pop-ups.

When the implementation of Nosto is completed through manual tagging or via one of the platform plugins, the data exchange and behavioral events can be observed and validated using the Debug Toolbar.

As Nosto’s features are by default disabled when a Nosto account is created and when the implementation is completed, the Debug Toolbar can also be used to preview and adjust the styling and behavior of Nosto’s on-site recommendations and behavioral pop-ups before going live.

The Nosto Debug Toolbar is available in two versions:

Basic version

The basic version displays Nosto account information, Javascript Errors, Nosto tagging information and the Preview switch.

No business-specific information is displayed in the basic non logged-in version of the Nosto Debug Toolbar. It is not possible to disclose the logic of onsite product recommendations, preview segmented experiences, preview ab tests, initiate product reindexes or any other business-specific information.

Logged-in version

The logged-in version displays additional information related to the features set on-site, the visitor's affinities, and provides a preview function specific to on-site recommendations. To have access to the logged-in version, click “Login for more” under the Overview section.

You will be redirected to the Nosto log in page under http://my.nosto.com and you will have to log in using your Nosto credentials.

Log in and you will be redirected to your store through a secure encrypted identifier. You can observe that you are correctly authenticated as the parameter as part of the Debug Toolbar parameter changes to a unique identifier. If you are already logged in to the Nosto admin panel in a separate tab, you don’t have to log in and the authentication is done automatically.

Unique identifier 370382 as part of the Debug Toolbar parameter ?nostodebug=370382

When you are logged in you have access to the additional Features section.

How to launch the Nosto Debug Toolbar?

The Debug Toolbar can be triggered when adding ?nostodebug=true as a parameter of the store’s url. To be correctly triggered, the host must match the host as set under the Nosto’s Account Settings.

With the example above, the Debug Toolbar would be triggered via http://www.store.com?nostodebug=true or http://m.store.com?nostodebug=true.

Mini mode

If you want to reduce the size of the Debug Toolbar, our wizards here at Nosto have designed a mini mode that can be triggered if you click the reduce button above the Nosto logo at the top of the toolbar.

When the Debug Toolbar is triggered, it behaves as a floating element over the page.

Let’s discover the 5 sections of the Nosto Debug Toolbar:

Overview

Account ID – Identifier of the Nosto account

Nosto Plugin Version – If you are using one of the Nosto platform plugins, the version of the plugin installed is displayed here.

Page type – Page type loaded on-site as sent via the Page Type Nosto tagging. If the page type tagging is missing, a “No page type!” notification is displayed.

Log in – When clicking “Log in for more”, you will be authenticated through a redirection to your Nosto Admin Panel. Demo example:

JS Errors

The Nosto Debug Toolbar outputs possible javascript errors in your recommendation templates as well as all client side Javascript errors. If no Javascript error has been found, the section is empty.

Tagging

In the Tagging section, you can observe the information sent through Nosto in context of a page load. This is crucial information to index and update product information and track behavioral events on-site.

Product – The Product tab reveals all information related to the products on your store. This is tracked by Nosto through the Nosto Product pages tagging.

Category – The Category tab displays information related to the category currently viewed by the user. This is sent to Nosto via the Nosto Category pages tagging. It shows also the exact spelling that Nosto is using in any of the filter settings.

Cart – The Cart tab shows the items currently in cart. The information is sent through the Nosto Cart page tagging

Customer – The Customer tab shows the customer information (email address, name and surname of the logged in user). If the customer reference is set, the ID is displayed below the email address.

Order – When users land on the order confirmation page, this initiates the order content tagging. Content of the order is reflected under this Order tab.

Search – This reflects the terms searched by one user when he lands on the search result page.

Features

Recommendations – Under the Recommendations tab, you will find the information related to the on-site recommendation slots. Div ID & Status provides you with the list of Nosto placeholders present in the source code of the page and being served with Primary recommendations or Fallbacks and if no recommendations has been served, it is statued as “Not available”.

If you expand one recommendation slot, you can observe whether the recommendation slot is disabled in the Nosto Admin Panel or not, if some filters are applied or if the product recommendations served display real products or mock-ups.

Pop-ups – The pop-ups tab allows you to see the list of campaigns created in your Nosto Admin Panel, review the status and the settings of each campaign.

In the example above, two campaigns have been set but only one is currently enabled.

If you click to expand one campaign, you are able to review the ID of the campaign and the device type set.

In the example above, the “Welcome New Customers” campaign will not be shown on mobile.

Visitor

The visitor section in the Debug Toolbar allows you to identify your detected affinities and their associated score. The higher the score, the high​​er the affinity. This can be very useful when validating and adjusting Nosto's setup, like checking segments, merchandising rules, and variant affinities. Note that while most affinities such as brand, category, and variant (e.g., size and color) are available, not all affinities, such as discount affinity, are displayed in the Debug Toolbar. Learn more about the scoring system for affinities.

Preview

When switched on, the Preview function allows you to visualize the Nosto on-site recommendations even if the slots are currently disabled. It is an useful tool for anyone implementing and styling the Nosto recommendation templates as a final validation can be done using real live data.

The recommendation slots now appears within a blue or pink dotted frame.

The blue dotted frame inform about recommendation slots being enabled and the pink dotted frame about recommendation slots being disabled in the Nosto Admin Panel. On the top right corner, informative notes guide you to understand what is currently displayed. We have also added on the top left corner the product ID of each products recommended in a recommendation slot.

Did this answer your question?