In this article, you will learn how to combine multiple heatmaps into one.


Overview

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 which has thousands of different product pages all using the same template with the product title, image and description all in the same place.


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 get their own heatmap.


If you have a shopping website with thousands of products, each with their 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 their 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 have a couple options


Use custom code on your page (advanced)

or

Use the Mouseflow UI (recommended)


Important: In order to keep the ability to see individual heatmaps for the pages you’ve combined, you will need to use Tagging to filter for specific versions of your page templates


Using the Mouseflow UI to merge pages

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.


Example

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


To combine pages like these, you will configure a Merge URL rule like so

This is the type of pattern. Here, "Starts with" is an easy choice since all product pages (and only product pages) on my site start with a unique pattern.

This is the pattern that my product pages follow.


/products/foo-123 

/products/bar-456 


An alias to give the resulting "merged heatmap"



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 heatmap for the use of 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 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.


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


Example

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


<script>
var mouseflowPath = "Product Page";
</script>


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 the way your heatmap data is aggregated in Mouseflow, but be careful because these changes are not retroactive.