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/bar-456 each gets its 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 in 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 of options:
Tip: 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 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
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 doesn'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
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. 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 the way your heatmap data is aggregated in Mouseflow, but be careful because these changes are not retroactive and cannot be reversed.