Your pages are templates

Most websites use templates for their pages. This means that it is likely you have many pages where the content such as images or text is just swapped out, but the arrangement of the page does not change. A common example would be a shopping website that has thousands of different product pages all using the same template with the product title, image, and description all in the same placement for each individual page.

Mouseflow creates a heatmap for each URL

Mouseflow generates a heatmap for every unique URL path you've recorded on your website.

For example, the URLs www.website.com/products/foo-123 and www.website.com/products/bar-456 each gets its own heatmap.

If you have a shopping website with thousands of products, each with its own URL like above, you may want just one "Product Page" heatmap instead of a thousand separate heatmaps.

Patterns are everywhere

Every website has patterns in its URLs. These patterns are essential for combining the pages of your websites into a single heatmap.

Getting Started

To combine the pages into one heatmap, you either use the Advanced Settings in the Mouseflow UI or apply your changes through custom code.

Important: When merging URLs, the changes apply to new data coming in and will not affect/merge your existing data and heatmaps in a retrospective way.

Tip: In order to keep the ability to see individual heatmaps for the pages you merge, you need to use tagging as a filtering method for specific versions of your page templates.

Using the Mouseflow UI to merge heatmaps

You can adjust your settings within Mouseflow in order to merge multiple pages into a single heatmap. To do this, create a Merge URL rule which will apply to all pages that follow a given pattern.


Let's take the above example with a shopping site and two randomly picked product pages with the URLs www.example.com/products/foo-123 and www.example.com/products/bar-456

In the "Type" field, we have the type of pattern we are going to use to merge pages. Here, "Starts with" is an easy choice since all product pages (and only product pages) on my site start with a unique pattern.

Note: Mouseflow usually displays only what's called the location.pathname - which means that it automatically removes the 'www.example.com' part of the URL to make identifying individual pages easier. One example of this could be that www.example.com/products/foo-123 is shortened to /products/foo-123 in Mouseflow.

Next, we have the "Pattern" field. Here we enter the specific pattern.

This is the pattern that my product pages follow.



So we can enter "/products/" into that field because all my product URLs start with /products/. At this point, you're probably beginning to see how these rules work.

Lastly, we have the option to provide an alias to the heatmap. This is optional but recommended. The alias will appear in your heatmap list and is used to add this merged page to your funnels and form analytics.

If the Merge URL rule is working, you will see this alias in your heatmap list

After a merge rule has been created, all recorded pages that match the rule will from then on be merged into a single page in Mouseflow for use in heatmaps, funnels, and forms.

When setting up Merge Rules, it's important that you enter the more specific rules first and the more general rules last, for example, you should enter /shop/category/product/* before /shop/*.

Using RegEx to merge pages

If you want to target more complex URLs or URLs that don't start with or end with the pattern you want to match you can use Regular Expressions (or RegEx for short) to do so. In this case, please check out our guide on how to target pages using RegEx.

Using custom code to merge pages

You can use plain JavaScript on your pages to override the default behavior of Mouseflow. To do this, you will need to add the mouseflowPath variable on your pages. You must add the mouseflowPath variable to all of the pages you want to combine.

Note: The mouseflowPath variable is only used by Mouseflow. It won’t affect the URL or title of your live page in any way.

By default, Mouseflow will only track the pathname of your website's URLs. However, you can override this by manually setting the URL Mouseflow assigns to a pageview. In this case, please check out our guide on how to set up Mouseflow to record pages based on the query-string, URL fragment, or other parameters.

Note: If you use URL parameters to separate your pages, then it is likely that your heatmaps are already combined.


Merge the product pages on your site by modifying the code of the product page template to include this HTML script tag

var mouseflowPath = "Product Page";

Important: Make sure to only include the above code on the pages you want to merge under the single name "Product Page"

You can use the mouseflowPath variable to have more control over the way your heatmap data is aggregated in Mouseflow, but be careful because these changes are not retroactive and cannot be reversed.

Did this answer your question?