In this article, you will learn how to combine multiple heatmaps into one.
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/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.
To combine the pages into one heatmap, you have a couple options
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.
Lets take the above example with a shopping site and two randomly picked product pages with the URLs
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.
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
mouseflowPath variable on your pages. You must add the
mouseflowPath variable to all of the pages you want to combine.
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.
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 the way your heatmap data is aggregated in Mouseflow, but be careful because these changes are not retroactive.