💡This feature is available on Advanced, Premium & Enterprise plans.
What are Interactive Heatmaps?
Mouseflow also provides two core types of heatmaps: Static Heatmaps and Interactive Heatmaps, offering tailored approaches to analyzing user interactions based on your needs. Static Heatmaps capture fixed elements perfect for non-interactive content, while Interactive Heatmaps emphasize dynamic, ever-changing elements for a comprehensive analysis.
Introduction to Interactive Heatmaps in 1 minute
Get a clear overview of Mouseflow's Interactive Heatmaps (Previously Live Heatmap) feature in this tutorial:
Support for Dynamic Elements:
Interactive Heatmaps overlay your active website, accommodating dynamic features like Single Page Applications (SPA), Lazy Load, dropdown menus, revolution sliders, parallax scrolling, and more. Essentially, they let you see interactions with dynamic content that static heatmaps can't show.
However, Static Heatmaps are limited to capturing a snapshot at one moment in time and lack interactivity with dynamic elements.
Analysis of Dynamic Content:
With Interactive Heatmaps, you get real-time insights. For example, as you add products to a cart or apply filters on a product page, the heatmap updates instantly. Imagine placing 100 items in your cart and observing how user interactions change — do they scroll further? Does a button become less visible? Interactive Heatmaps allow these on-the-go customizations, providing a holistic view of user behavior.
On the other hand, elements like temporary banners or changes that require interaction might still not display unless they are live and active during analysis with Interactive Heatmaps.
Advocating for Design Tweaks:
When proposing design changes, being able to showcase real-time heatmap data directly on your site can be compelling for stakeholders. Instead of just discussing abstractly, you're illustrating with live data.
Interactive Heatmaps' main advantages lie in their ability to handle dynamic elements and offer immediate customizations. They let you see your site through the lens of your users but with the aggregate data of countless interactions to guide your decisions.
Challenges with Analyzing Dynamic Elements
Dynamic elements, such as carousels or modals, can create unique challenges. Static Heatmaps only provide a fixed snapshot, missing out on their interactions entirely. Interactive Heatmaps allow interaction with live elements but are reliant on the specific state of elements during review. For example, if a temporary promotion has ended, it cannot be analyzed post-activity unless recorded.
Form-Based Element Analysis
Interactive Heatmaps help analyze form field interactions without compromising user privacy. While they do not display user-submitted data directly, form fields can be interacted with to understand user engagement and locate hidden fields critical to reviewing dynamic content.
Accessing the Interactive Heatmaps
There are two main pathways to open the Interactive Heatmaps:
From the Sidebar Menu:
Navigate to the left-hand side of your screen.
Find and click on the "Heatmap" button.
A submenu will appear. From there, select "Interactive Heatmaps" to open it.
Inside An Open Heatmap:
If you're already within a heatmap view, Click on the current heatmap type. From there, select "Interactive Heatmap" to open it.
Note 💡: By default, the Interactive Heatmaps displays data for all devices. If you're interested in viewing data for a specific device type, such as desktop, tablet, or mobile, you'll need to apply a filter in the heatmap section. Additionally, applying a date range filter matching the period when dynamic content was live can yield more precise and relevant insights when reviewing interactions.
FAQ
What are the best practices for Heatmap Analysis of dynamic content?
What are the best practices for Heatmap Analysis of dynamic content?
Select the Right Heatmap Type: Use Static Heatmaps for non-interactive, fixed elements and Interactive Heatmaps for dynamic content.
Analyze Time-Sensitive Content Promptly: Review heatmap data shortly after publishing temporary or promotional elements.
Apply Accurate Filters: Utilize date range filters for results relevant to specific timeframes.
Understand Platform Limitations: Be aware of the different capabilities and limits of each heatmap type in reflecting dynamic or static elements.
Can I view mobile data in Interactive Heatmaps?
Can I view mobile data in Interactive Heatmaps?
Yes, you can view mobile data for the Interactive Heatmap! Here is how:
Open your Interactive Heatmaps list.
Add a filter where Device = Mobile & Tablet or Mobile only.
Select your page and wait for it to load (accept cookies if asked).
Right-click anywhere > select Inspect > click the Toggle device toolbar icon (looks like a phone/tablet).
Refresh the page and you should see the mobile clicks now and interact with the page
Need more help? Please reach out to our Support Team