|
This article covers the following: |
What are Heatmaps in Wingify?
A heatmap is a visual representation of data that uses color-coding to represent how users browse through your website. From clicking elements to selecting an option from a modal box to browsing page content, a heatmap is a true representation of all visitor actions. The Heatmaps report offers a visual, data-driven understanding of how visitors interact with your web pages. It reveals where users click, hover, and scroll, helping you assess whether key CTAs, links, or content sections are receiving the attention they should. By highlighting high-engagement zones and areas of friction, heatmaps make it easier to uncover usability gaps, validate design decisions, and identify opportunities to optimize the overall user experience. Based on your heatmap reports, you can determine where to place your most important CTA buttons and links.
Using Wingify, you can analyze click patterns and behavior of your website visitors by generating different report types like- Clickmap, Scrollmap, ClickArea, Frictionmap, Hovermap, and Element List. Additionally, you can compare heatmaps side-by-side within a single view to spot differences in user behavior across variations, devices, or time periods.
Types of Heatmaps
Wingify consists of the following types of heatmaps:
| Heatmaps | A heatmap is a visual representation of visitor clicks on your website. It uses color-coding to indicate different levels of activities. The brighter or hotter an area is, the more interaction it represents. Red areas are the areas with the most interactions, yellow indicates average activity, green indicates areas with less activity and blue indicates the areas with least interaction. You can use a heatmap report to improve your website performance by determining which elements are receiving maximum visitor attention and which ones are not getting noticed. For example, you can determine which CTA button or section gets maximum clicks by your website visitors. Analyzing a heatmap report can help you determine where maximum attention is drawn on the page and rethink the layout of elements. |
| Clickmaps | Clickmaps display the exact number of clicks on specific elements or links on a page, images, text, and other elements. With every modification you implement on a page, you can compare and measure if the number increases. Clickmaps display the number of clicks when you hover your mouse over an element, clickable, or button. In addition to the number of clicks, clickmaps give you the percentage of click on an element compared to the total number of clicks on a page. |
| Scrollmaps | Scrollmap is a visual representation of the scrolling behavior of your visitors’ on your webpage. You can find out how many visitors scrolled through a page, made it to the middle or bottom of a page, or where they abandoned a page. A Scrollmap report highlights the most active and scrolled sections of your website page in different colors. Red indicates areas of high engagement, yellow indicate average activity, and blue indicates little user interaction. Scrollmaps help determines how deep visitors generally scroll on-page and help determine an optimal length of the webpage, below which most visitors don't scroll. Using scroll map data, you can identify the most visited sections of the page, where to add important content, key information, and CTA buttons. |
| Click Area | Click Area data helps you compare engagement between two sections of the same webpage. You can compare the elements/sections within a page. Simply select areas by drawing two or more squares on the webpage, and reports are generated in real-time to compare them. |
| Element List | Using the Element List option, you can view clicks on each element of your webpage in a tabular form. Here, you can view the activities on each element on your website, including links, headers, list items, div, and hidden elements such as elements inside a drop-down menu, and so on. |
| Frictionmaps | A frictionmap visualizes visitors’ frustration through dead clicks and rage clicks, helping you identify problematic sections of your webpage that may impact conversions. By using frictionmaps, you can quickly identify and fix areas causing visitor friction, ultimately improving visitor experience and conversions. |
| Hovermaps |
A hovermap reveals how visitors move their cursor across your webpage, highlighting the areas where users tend to pause, linger, or explore with their mouse. This helps you understand which sections attract the most attention, even if they don’t receive clicks. By visualizing cursor density and engagement patterns, hovermaps uncover misleading design cues, overlooked content, or sections that draw attention unintentionally. With these insights, you can refine layout, reposition key elements, and improve the overall clarity and flow of your page.
Note: Hovermaps are supported only on desktop devices.
|
| Zonalmaps | Zonal heatmaps quickly reveal high and low engagement areas on your website by automatically dividing the page into zones based on structure and click data. Each zone displays aggregated interaction data, such as clicks and metric conversions, providing insights into user behavior within specific areas of the page. By selecting different metrics, you can further customize your analysis and gain deeper insights into user engagement and conversion patterns. |
Things to Consider While Working with Heatmaps
This section describes the things that you need to consider while setting up Heatmaps in Wingify.
- You must first enable the Wingify heatmaps to collect data for your website before you can view heatmap reports.
- You must install the SmartCode on all the web pages for which you plan to generate the heatmap.
- By default, the Safari browser blocks third-party cookies. To load the heatmaps data correctly, go to Safari > Settings > Privacy and disable the Prevent cross-site tracking option.
- For heatmaps created as part of a test, the maximum number of clicks that can be plotted on the heatmap report is 100k. However, there is no limit to the number of clicks plotted on standalone Advanced Heatmaps created.
- Wingify records only the first ten clicks from a user for every page on any of their visits for generating a heatmap or clickmap report.
- Use the navigate option to access a section of your websites that only appear after clicking on an element. This can be useful to reach pages behind logins.
- Heatmaps for testing campaigns are tracked for all visitors who become part of the campaign.
- Heatmaps in Wingify collect the data only from the sampled visitors. To know more about sampling in Wingify, refer to How Wingify Sampling Works.
- Wingify captures a hover event in heatmaps only when the visitor’s cursor remains still for at least 350 milliseconds or more. This helps ensure that hovermaps reflect intentional attention, not incidental cursor movement.
- For hovermaps, by default, the hover scope is set to show only the latest 5,000 hovers. This means the hovermap loads only the most recent 5,000 hover events to ensure faster performance. You can disable this option if you want to load and view all recorded hovers. For more information, see Control Hover Scope.
- Similarly, for heatmaps, the scope is set to show only the latest 5,000 clicks. This means the heatmap loads only the most recent 5,000 click events to ensure faster performance. You can disable this option if you want to load and view all recorded clicks.
- While viewing the heatmap for a URL, if the bar at the bottom hides any content or a portion of your page, we recommend you toggle its visibility. To do this, set your focus to the page and press Command+Shift+2 (MacOS) or Control+Shift+2 (other operating systems).
Need more help?
For more information or further assistance, contact Wingify Support.