Mouseflow Help & Support

Combine Several Pages in One Heatmap


If you want to combine several web pages into one heatmap, you can do so in two different ways:
Either with a simple line of JavaScript code or by using our Merge URL feature.

How It Works

Mouseflow generates a heatmap for every unique URL path affiliated with your website (e.g. and get their own heatmap). To combine the pages into one heatmap, a Mouseflow variable can used to create a new common path that both pages will use. Or you can set up a Merge Rule under your website setting which will save all pages that follow the rule.

Query-String Variables and the Javascript approach

If you use query-string variables (e.g. you can control whether they make your pages unique. But if they have different URL paths, two heatmaps will be generated.

You can change the path that Mouseflow sees by adding the following line of JavaScript to your site:

// The path you specify must start with a '/'
var mouseflowPath = '/your/new/path';

JavaScrip Example

The pages ‘/shop/products/product1’ and ‘/shop/products/product2’ (and all other product pages) should have one combined heatmap.

If you add the ‘mouseflowPath’ variable and set it to ‘ var mouseflowPath = ‘/shop/products/productdetail;’ on these pages, Mouseflow will treat all of these pages as one unique page and only generate one heatmap under the URL ‘/shop/products/productdetail’.

<script type="text/javascript">
window._mfq = window._mfq || [];
var mouseflowPath = '/shop/products/productdetail';
(function() {
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true;
mf.src = "//";


Setting up a Merge Rule for Merge URLs

If your website's URLs follow a certain structure, it can sometimes be easier to set up a merge rule rather than having to add a line of code to a few specific pages on your site, especially if you want to merge together a large amount of pages like a product catalog or similar.

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

A merge rule consists of a partial pathname and a wildcard character(the asterisk, *) either at the beginning or end of this partial path, like so: /shop/product/* or */success/

You can set up Merge Rules by following these steps:

- Log in to your Mouseflow Account

- Select the Website where you want to add a merge rule

- Go to the "Website Settings" page and click the "Advanced Settings" button at the bottom of the page.

- Find the Merge URLs field and input your desired merge rules, each new rule separated by a comma(,).

- Press the "Save" button at the bottom of the page.

From here on out, your Merge Rules are in effect and all future visits to your site will now merge the different pages on your site as dictated by the rules you set up.

Merge URL Example

There is a webshop that has hundreds of product entries, all of which have an identical design and follow the same URL structure but each separate product page ends with a unique product ID. To merge all of these product pages together, a merge rule can be used.

The product pages all follow this URL structure: /shop/category/product/[Unique ID]

From this path structure, you can construct the following merge rule: /shop/category/product/*

Once that Merge Rule has been saved under the website settings, all visits to any product page will be saved under the same name and the data will be added together.

Important notes:

  • The mouseflowPath variable is only used by Mouseflow. It won’t affect the URL or title of your livepage in any way.
  • If you use this technique you will no longer be able to see individual heatmaps for the pages you’ve combined
  • You must add the ‘mouseflowPath’ variable to all of the pages you want to combine
  • The mouseflowPath variable must be declared in the global scope.
  • 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/*.


Tags: combine heatmaps change path query string

Have more questions? Submit a request


Powered by Zendesk