Live website testing with Maze allows your team to run usability tests to understand how users are interacting with your live websites.
In this article:
- Before you start
- Who can use this feature
- Install the Maze tracking code on your website
- How to create a live website test in Maze
- Results & Reports
- Security and performance FAQs
Before you start
- For security reasons, your team can only test websites in which your unique code snippet is installed. You won't be able to test websites where your code snippet is not installed. Learn how to install the Maze code on your website
- In-page events (e.g. clicking a toggle) are not captured as steps in the path yet. The URL must change between different screens for the test to be meaningful.
- Native mobile app testing is not currently supported. Learn how you can test on mobile devices
- There are currently some limitations around displaying results data for website testing. Learn more
Who can use this feature?
Live website testing is available for users on all plans.
Install the Maze tracking code on your website
In order to enable usability testing on your live website, you’ll need to install a unique code snippet that enables this feature to run on your website.
You’ll also be prompted to follow these steps from your draft maze if you haven’t added the code to your URL’s domain yet when creating a live website testing block.
Learn how to install the Maze tracking code on your website
How to create a live website test in Maze
To create a live website test:
- Add a live website testing block to your maze
- Enter the starting URL
- Set the device type
- Define paths
- Screenshot anonymization options
- Add more blocks (if needed) and publish your maze
Add a live website testing block
- Open a draft maze.
- Click Add block, then select Live website test.
- Enter the task title and an optional description. Learn best practices for writing tester prompts
Supported languages
You can test websites in any region and language. However, at the moment, the task interface for website testing blocks will only display in English.
Enter the starting URL
Paste the URL of your website and click Set up. Wait a few moments until we verify that the Maze tracking code is correctly installed on the website.
Please note:
- The URL you paste will be the starting page/screen of your test.
- The URL must include a valid scheme (e.g.
https://). - A small floating window will open with a preview of your website. Please don't close this window; this is an important step for Maze to detect whether the snippet is working correctly on your website.
Set the device type
Select the Device type to determine the resolution in which your live website should be opened.
- Desktop: Your website window will open on a desktop resolution (1024px). Testers on smaller screens, such as mobile devices, won’t be able to open the maze at all — in those cases, they’ll see a “This page needs a larger screen” error.
- Mobile: Your website window will open on a mobile resolution (420px). Testers on a desktop will still be able to open the maze; the live website window will simply open on a mobile resolution.
Learn more about the minimum and maximum window sizes for website tests
Define paths (optional)
Paths are the baseline for measuring the success of a mission. If a path is set, each test will automatically be categorized as Direct Success, Indirect Success, or Mission Unfinished.
Unlike prototype tests, you don't have to pre-define paths when setting up a website test.
If no success path is defined, it's not possible for Maze to establish whether each tester path was successful or not. As a result, tester paths will appear in the results as Uncategorized. Why are some paths marked as "Uncategorized"?
To set up a path on your website test:
- In your draft maze, add a website block.
- To start creating your paths, click Create path. A floating window will open with a preview of your website.
- Click through the website to define the path you expect the testers to take in order to complete the task. At the moment, each page change or parameter change counts as a screen in the path. Learn more about paths
- To add more paths, click + Add new path.
- Once you’re done, click Save and close to save the paths and go back to the draft maze.
Screenshot anonymization
When testing on a live website, you may be collecting personally identifiable information (PII) from your testers. For instance, if you ask users to log in to their account as part of your test, the screenshots on your Results dashboard may include anything they’ve entered when logging in, as well as any data on their personal area.
Maze allows you to mask the content of the screenshots in your results in two ways: at the block level, or globally using HTML attributes.
At the block level
When creating a website test, you’ll need to select how text should be displayed in the screenshots on your results page.
- Strict: Hides all text, both in the UI and anything entered in input boxes. The results page will show only the visual elements.
- Balanced: Hides anything entered in input boxes, as well as numbers and email addresses. Generally, this is the option we’d generally recommend, as it allows you to protect your testers’ sensitive data while still being able to see the UI.
- Relaxed: Shows all text, both in the UI and anything entered in input boxes.
Please be mindful that, if you enable Clips, the recording will show all information on the screen — Clips recordings are not anonymized.
Masking/unmasking content by default
You can also add an extra layer of security and mask/reveal certain content globally, regardless of the chosen setting in Maze.
To do so, add one of the following attributes to the relevant HTML blocks:
data-maze-mask="True"
data-maze-unmask="True"
Adding these attributes will either mask or unmask the content of an HTML element in the maze results. These attributes override the anonymization settings set at the block level. For instance:
- If you add
data-maze-mask="True"as an attribute to an HTML element, the content will always be hidden in the results, even if the anonymization setting of the block is set to "Relaxed". - On the other hand, the
data-maze-unmask="True"attribute will always reveal the content in the HTML element, even if the anonymization setting of the block is set to "Strict".
Add more blocks (if needed) and publish your maze
You can add multiple live website tests per maze. To add more tasks, simply create a new Live Website Testing block and repeat the steps above.
Once everything is ready, preview the maze and send it live to start testing.
Results & Reports
As testers complete your live maze, you will start seeing insights on the Results dashboard.
Learn more about your live website test results
Maze reports make it easy to analyze, share, and present your results data. Reports are automatically generated for every live maze tested with at least one tester.
See how reporting looks like for website testing blocks
Current limitations when viewing live website test results
- Due to technical limitations, heatmap screens won’t always capture the live website page in perfect detail.
- Overlays and modals are not captured in heatmaps; only the base page/screen.
Security and performance FAQs
Will the Maze script slow down my website?
The Maze script is designed to have a very minimal impact on the performance of your website. It shouldn't take more than a few milliseconds to load, and this shouldn't be noticeable at all to your website users.
Asynchronous loading
The Maze script loads asynchronously. Your website will continue to load while the Maze script is being executed.
This means that, even if the script fails to load (which is unlikely), your website will still continue to render as expected without the script.
Dynamic loading
The Maze tracking code you install on your website is used to dynamically run a loader that powers the testing on your website. The tracking code is less than 1KB.
The dynamic loader is less than 10KB and only runs in specific circumstances:
- the loader only runs if the API has a valid response;
- the API keys are only valid for each domain you configure;
- the code for either live website testing or the in-product prompt is only triggered if the destination site is opened on a new tab. If this first check is passed, we send a post message to the tab that opened the site, and attach an event listener to wait for the response. The rest of the live website testing code is only triggered if we get the proper response in the first minute. Otherwise, it will have no further impact.
If either of the conditions above is not met, the script is not loaded at all.
Content Delivery Network (CDN)
The dynamic loader is served by a Content Delivery Network (CDN).
A CDN is a distributed network of servers that delivers content based on a user's geographic location. It does this by storing copies of the content on servers located in different places around the world. When someone visits a website using a CDN, the content is delivered to their device from the server closest to them, reducing the distance it needs to travel and making it load faster.
Using a CDN allows us to serve the loader faster, more reliably, securely, and with reduced data usage.
Session-based caching
The script uses session-based caching. The script is loaded only once, even when the user navigates through multiple pages.
Content Security Policy (CSP) directives
A Content Security Policy (CSP) is a security feature that helps protect websites from security threats and vulnerabilities. It does this by specifying the type of content (e.g. scripts, images, videos) that can be loaded on a website, and from which sources they can be loaded. This helps mitigate certain types of malicious attacks, such as cross-site scripting (XSS), clickjacking, and data injection attacks.
If you have a CSP implemented, you'll need to add a directive that allows files to be loaded from Maze in order to allow the Maze script to work on your website.
Default: If using a default CSP, we recommend adding the Maze domain as a trusted source in the default-src rules:
default-src https://*.maze.co/
Stricter: If your organization requires stricter restrictions, we recommend the settings below:
script-src https://*.maze.co/ font-src https://*.maze.co/ style-src https://*.maze.co/ connect-src https://*.maze.co/ img-src https://*.maze.co/ style-src https://*.maze.co/
Strictest: If your CSP requires additional granularity, the following are the minimum rules required for the Maze script to work. Please note that this list is subject to change as this feature evolves. In that case, you'll need to update your CSP directives so that the snippet can continue to work.
script-src https://snippet.maze.co/ font-src https://snippet.maze.co/ style-src https://snippet.maze.co/ img-src https://snippet.maze.co/ style-src https://snippet.maze.co/ connect-src https://api.maze.co/ https://prompts.maze.co/
What measures are in place to ensure the security of the script?
Change control
Any changes to the script are subject to Maze’s change control policy.
Access to code changes is restricted to authorized employees only. All changes must go through code review and testing before deployment.
Hosting
The script is hosted as part of our general platform infrastructure, with access restricted to authorized employees.
To learn more about the steps Maze takes to keep your data safe, please check out maze.co/security and compliance.maze.co.
Is the script open-source?
The Maze tracking script is closed-source. By keeping the source code closed, Maze controls how the script is developed and distributed.
What data does Maze collect from my testers?
You can learn more in our Privacy Policy.
What measures are in place to ensure the privacy of my testers when testing live websites?
Website testing happens on your actual live website. Interactions happen in the “real world”; Maze doesn’t create a dummy/test/staging environment for you.
You should therefore be mindful that you may be collecting personally-identifying information (PII) from your testers. For instance, if you ask users to log in to their account as part of your test, the screenshots on your Results dashboard may include anything they’ve entered when logging in, as well as any data on their personal area.
To ensure the privacy of your testers, Maze offers built-in screenshot anonymization options. Please be mindful that, if you enable Clips, the recording will show all information on the screen — Clips recordings are not anonymized.
Additionally, you can set up your own staging environment, and/or give users test credentials to avoid having them reveal their personal data.
Still need help?
If you have any questions or concerns, please let our Support team know — we'll be happy to help!