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 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 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.

Getting Started

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.

Example

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.

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

This is the pattern that my product pages follow.

/products/foo-123

/products/bar-456

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 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 and cannot be reversed.

Did this answer your question?