What are Live Heatmaps?
Live Heatmaps work as an overlay on your Live website, offering complete support for all dynamic elements - essentially showing the Mouseflow data on top of your site as it looks and works when you visit it live.
This includes all dynamic elements:
SPA’s (Single Page Applications)
Drop Down Menus
XHR / AJAX
Supports showing content in Iframes (which is a big limitation with current Heatmaps)
Parallax Scrolling ( background images moving more slowly than images in the foreground)
just to mention a few.
As for all functionality within Mouseflow, you don’t need to prepare heatmaps in advance. So, activate Mouseflow and start collecting visitor data. You can always build your heatmaps, conversion funnels, and form analytic reports whenever you like!
How are Live Heatmaps better than regular Static Heatmaps?
There are quite a few ways in which Live Heatmaps are superior to regular Static Heatmaps. to give you an easy overview of how the different heatmaps compare, we have prepared the matrix you can see below.
Perhaps the two greatest improvements in Live Heatmaps are that they support most dynamic elements - and that you can easily customize the heatmap view by for example adding more products to the cart, or toggling filters on your live site.
When should I use Live Heatmaps?
1. When seeking insights into the performance of Dynamic elements
Because Live Heatmaps work as an overlay on your live website they offer complete support for dynamic elements (such as Single Page Applications (SPA), Lazy Load, Drop Down Menus, Revolutions Sliders, Parallax Scrolling and other dynamic technologies). This means that using Live Heatmaps you can now view all the dynamic content that can't be displayed on traditional static heatmaps.
2. Investigating Dynamic Content such as product pages and pages with filter options
Changing the content on your live site (eg. by adding products to a cart or checkout page) will update the data you see in the heatmap to reflect the content on the page.
This makes Live Heatmaps fully customizable, allowing you to navigate through your site as if you were testing the functionality - but you'll have the data from hundreds, or even thousands, of users, follow you as you go.
You can place 100 items in your cart and see how the heatmap conforms to this - how far down the page does the average user scroll? Does the ‘Next’ button disappear below the fold? Or you can filter for a specific category of products on your product page and see exactly where users are clicking or where their attention is focussed.
3. Arguing for design change
Heatmaps as an argument become even more relevant when you can show stakeholders the heatmap data and insights - directly on your live site.
How do I set up Live Heatmaps?
Live Heatmaps doesn't require any setup - it's ready to go! Just like the Mouseflow heatmaps you already know, our Live Heatmaps work out of the box.
Where do I find Live Heatmaps?
You'll find Live Heatmaps under Heatmaps in the Mouseflow app (see screenshot below).
I'm having some issues using Live Heatmaps - where can I get help?
Right here :) At this time there are 3 known issues and 5 features that are not included in the first version of Live Heatmaps. We are currently working on solving all 7 issues for version 2.
Issue #1: Live Heatmap opens my live site - but there is no overlay or heatmap data
Unfortunately, Live heatmaps won’t work if the Tracking Code is not on the page you are attempting to load a heatmap for. What happens here is that our Live heatmaps are using the Mouseflow Tracking Code to show the heatmap data on top of your site - if the Tracking Code is not installed there will be nothing to show the data.
To resolve the issue and get the Live heatmaps to load on your site, please re-install the Mouseflow Tracking Code on your site.
Issue #2: Live heatmaps won’t open and I get the error message shown below
Similarly to Issue #1 Live heatmaps won’t work if the Tracking Code isn't active - that is if you have paused or stopped recording - for the site you're attempting to launch Live Heatmaps on.
What happens here is that our Live heatmaps are using the Mouseflow Tracking Code to show the heatmap data on top of your site - if the Tracking Code is not actively recording, it will not be able to show the data.
Issue #3: I can see content but no heatmap data in iframes on my site
Features not included version 1 of the Live Heatmaps
1. No support for custom date ranges or filters inside the Live heatmaps.
But both filters and date ranges can be defined from the heat map list before opening a Live Heatmap.
2. It’s not possible to select device type in the heatmap itself.
But you can do so by using filters on the heatmap list and then Dev-tools once you’ve opened the heatmap. Please find our detailed guide here.
3. Merge URLs won’t work in the first version of Live Heatmaps.
Unfortunately, there is no workaround for this issue, but we are working to include it in Version 2 of the Live Heatmaps
4. The 'Download Heatmap Function' is not working.
If you want to download a Live Heatmap we recommend downloading and using the Chrome plugin: Full-Screen Page Capture.
5. Missing click counters on non-clickable elements.
This issue can be resolved by adding the class 'mf-listen' on the elements that are missing link analytics, on your live site. Please find our guide to adding 'mf-listen' to HTML elements here.