Toolbar
Open My Journey Analytics on top of your own website to inspect elements, view heatmaps, create actions and test feature flags.
The toolbar brings My Journey Analytics onto your live website. It floats over your pages, visible only to you, and lets you:
- Inspect clickable elements and see how often they are used
- view Heatmaps of clicks, rage clicks, mouse movement and scroll depth
- create Actions by pointing at the elements that matter
- override Feature flags for yourself while you test
- watch your own events arrive in the Event debugger
- check the page's Web vitals and preview Experiments
Your visitors never see the toolbar. It only appears for signed-in members of your project who launch it.
Before you start
- The web snippet must be installed on the site.
- The site's address must be an authorized URL for your project.
Launch the toolbar
- In the app, open Toolbar from the navigation.
- Under Authorized URLs, select Add authorized URL, enter your site's address, for example
https://www.example.com, and select Save URL. - Select Launch next to the URL.
Your site opens in a new tab with the toolbar on the page. The first time, select the toolbar's logo to sign in and allow it to use your account. The toolbar is remembered in that browser, so it stays open as you move between pages until you close it from its menu.
Authorized URLs are shared by everyone in the project. Adding or changing them needs edit access to web analytics. The app also suggests URLs it has seen in your recent events, which you can approve with one click.
URLs with a wildcard, such as https://*.example.com, authorize every matching site, but cannot be launched directly: add the exact address you want to open as well.
1. Inspect elements
Select the magnifying glass to inspect. Hover over the page to highlight clickable elements; select one to see its Stats, the actions that include it, and to Create a new action from it.
2. Element filters
The toolbar identifies elements with a CSS selector. Selectors built from generated class names or positions on the page break easily when your site changes, and the toolbar warns you about such a Fragile selector.
The most reliable fix is to give important elements their own data- attribute:
<button data-analytics="signup-button">Sign up</button>Then list that attribute under Settings → Project → Autocapture → Data attributes, for example data-analytics. The toolbar and actions then use it to match the element, whatever else changes on the page. Use * as a wildcard, for example data-*.
3. Heatmaps
See Heatmaps.
4. Actions
See Create actions with the toolbar.
5. Feature flags
The flags menu lists your project's feature flags. Override a flag to see your site as someone with a different value would. Overrides apply only in your browser, and you can clear them at any time.
6. Event debugger
The event debugger shows the events your own browser sends while the toolbar is open, so you can check that tracking works as you click through your site.
Hide personal data while you share your screen
Open the toolbar menu and choose Hide PII to mask personal data on the page, for example during a demo or screen share. Choose Show PII to bring it back.
Close or sign out
Open the toolbar menu (the logo) and choose Close toolbar. Sign out disconnects the toolbar from your account in this browser.
Troubleshooting
The toolbar does not appear. Check that the snippet is on the page, and that the address you opened is in Authorized URLs. If your site redirects on load, for example to a sign-in page, the link that starts the toolbar can get lost: sign in to your site first, then launch the toolbar again.
Launch from the console. If launching from the app does not work on your site, open the menu next to Launch and choose Copy manual launch code. Open your site, paste the code into the browser's developer console and press Enter.
"My Journey Analytics could not be reached". This happens when your snippet sends data through a custom tracking domain and does not say where the app is. Add ui_host to the snippet's options:
myjourney.init("<project token>", {
api_host: "https://t.example.com",
ui_host: "https://app.myjourneyanalytics.com",
});The snippet in Settings → Project → General → SDK setup includes ui_host automatically when you use a custom tracking domain.
Can't find what you need? Contact support