Knowledge base | mouseflow

Combining Several Pages in One Heatmap

If you want to combine several web pages into one heatmap, you can do so via two different methods: either with a simple line of JavaScript code or by using our Merge URLs feature (under Settings > Advanced settings > Merge URLs).

How It Works

Mouseflow generates a heatmap for every unique URL path affiliated with your website (e.g. www.website.com/pg1 and www.website.com/pg2 get their own heatmap). To combine the pages into one heatmap, a Mouseflow variable can be used to create a new common path shared by both pages. Alternatively, you can set up a Merge URL rule which will apply to all pages that follow the pattern.

Query-String Variables and the Javascript approach

If you use query-string variables (e.g. www.website.com/pg1.php?pg_id=1) 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';

JavaScript 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 = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
</script>

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 (asterisk) either at the beginning or end of this partial path, like this:

/shop/product/*

--OR--

*/success/

You can set up Merge Rules by following these steps:

  1. Log in to your Mouseflow Account

  2. Select the website you want to work on.

  3. In the left menu, click "Settings", then "Advanced settings".

  4. Find the Merge URLs field and input your desired merge rules with each new rule separated by a comma.

  5. Click "Save".

From here forward, 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, 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 live page 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/*.