{"id":45,"date":"2021-06-01T22:13:00","date_gmt":"2021-06-01T22:13:00","guid":{"rendered":"http:\/\/clarity-blog-staging.blog.p.azurewebsites.net\/?p=45"},"modified":"2025-07-30T08:32:23","modified_gmt":"2025-07-30T15:32:23","slug":"what-is-a-heatmap","status":"publish","type":"post","link":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/","title":{"rendered":"Mastering Microsoft Clarity Heatmaps: Insights and Best Practices"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">What is a Heatmap?<\/h1>\n\n\n\n<p>A <a href=\"https:\/\/clarity.microsoft.com\/heatmaps?utm_source=blog&amp;utm_medium=organic&amp;utm_campaign=heatmapblog\" title=\"\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">heatmap <\/a>is a way of showing aggregated data in a visual way. It uses colors to show different levels of user activity on a website, such as clicks, scrolls, mouse movements, etc. Warmer colors (reds) show higher activity while cooler colors (blues) represent lower activity. There are three main types of heatmaps within Clarity: click, scroll, and area. Each one gives a unique insight into how users behave on a website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Click Heatmaps<\/h2>\n\n\n\n<p><a href=\"https:\/\/clarity.microsoft.com\/blog\/clarity-click-maps-what-can-they-do-for-you\/\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">Click heatmaps<\/a> help you understand the critical content on the page. They allow you to identify parts of the page design where your users are clicking and help determine what users may mistake for links. On PC, Clarity tracks your user clicks and on mobile or tablet, Clarity tracks your user taps. You can also view click maps for a&nbsp;single&nbsp;<a href=\"https:\/\/learn.microsoft.com\/en-us\/clarity\/setup-and-installation\/glossary-of-terms\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">page<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/learn.microsoft.com\/en-us\/clarity\/heatmaps\/heatmaps-features#heatmaps-for-a-group-of-pages\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">group of pages<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1816\" height=\"958\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering.png\" alt=\"\" class=\"wp-image-8668\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering.png 1816w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering-300x158.png 300w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering-1024x540.png 1024w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering-768x405.png 768w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering-1536x810.png 1536w\" sizes=\"auto, (max-width: 1816px) 100vw, 1816px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Scroll Heatmaps<\/h2>\n\n\n\n<p><a href=\"https:\/\/clarity.microsoft.com\/blog\/what-can-clarity-scroll-maps-do-for-you\/\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">Scroll heatmaps<\/a> indicate how far users scroll on average. This data helps determine whether your users see the most important content and indicates where to put your essential calls to action. As you hover over the Scroll map, you can view the exact % of users who reached that point of your webpage or group of pages. It displays the Average fold which indicates the average location visible on a webpage before the user starts scrolling. Scroll maps are useful for longer, text-based content. If users aren&#8217;t scrolling past the first few paragraphs, you might want to move important information higher up on the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1814\" height=\"956\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering2.png\" alt=\"\" class=\"wp-image-8669\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering2.png 1814w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering2-300x158.png 300w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering2-1024x540.png 1024w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering2-768x405.png 768w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering2-1536x809.png 1536w\" sizes=\"auto, (max-width: 1814px) 100vw, 1814px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Area Heatmaps<\/h2>\n\n\n\n<p>Area Maps show the number of clicks across different, editable, regions of your webpage. You can easily see the number of clicks within an area as well as the click through rate, which represents the percentage of all clicks that occurred in the area. Unlike a click map, you can choose the area and view the heat for all the elements within the area.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2340\" height=\"1136\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3.png\" alt=\"\" class=\"wp-image-8671\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3.png 2340w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3-300x146.png 300w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3-1024x497.png 1024w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3-768x373.png 768w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3-1536x746.png 1536w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering3-2048x994.png 2048w\" sizes=\"auto, (max-width: 2340px) 100vw, 2340px\" \/><\/figure>\n\n\n\n<p>Across each of the heatmaps, you can toggle between the different devices that Clarity supports such as: desktops, tablets, and mobile devices.&nbsp;<\/p>\n\n\n\n<p>You can also <a href=\"https:\/\/learn.microsoft.com\/en-us\/clarity\/heatmaps\/heatmaps-compare\" title=\"\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">compare two heatmaps<\/a> side by side. This is perfect for A\/B testing, as it allows you to visually assess which design changes drive more engagement.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1812\" height=\"956\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering4.png\" alt=\"\" class=\"wp-image-8672\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering4.png 1812w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering4-300x158.png 300w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering4-1024x540.png 1024w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering4-768x405.png 768w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering4-1536x810.png 1536w\" sizes=\"auto, (max-width: 1812px) 100vw, 1812px\" \/><\/figure>\n\n\n\n<p>Another useful feature is <a href=\"https:\/\/learn.microsoft.com\/en-us\/clarity\/heatmaps\/heatmaps-screenshots\" title=\"\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\">switching screenshots<\/a>. You can switch between different screenshots of the same heatmap to see how user interactions vary across different versions of your page. This feature is particularly useful for analyzing dynamic content and ensuring consistent user experience. For instance, see how a seasonal promotion affects user behavior compared to your standard layout.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1814\" height=\"960\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering5.png\" alt=\"\" class=\"wp-image-8673\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering5.png 1814w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering5-300x159.png 300w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering5-1024x542.png 1024w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering5-768x406.png 768w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2021\/06\/mastering5-1536x813.png 1536w\" sizes=\"auto, (max-width: 1814px) 100vw, 1814px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How is a Heatmap Generated?<\/h2>\n\n\n\n<p>Heatmaps are generated from aggregated data, and understanding how this data is aggregated is crucial for interpreting the heatmap representation.<\/p>\n\n\n\n<p>Traditionally, click heatmaps record the X and Y positions of mouse clicks. All clicks at those coordinates contribute to the heat intensity, which is then overlaid on a static website representation. However, this method doesn\u2019t scale well for varying screen resolutions, dynamic HTML elements, single-page apps, or dropdown menus.<\/p>\n\n\n\n<p>In contrast, Clarity employs an advanced process with intelligent HTML element detection based on a website\u2019s DOM. For click maps, Clarity identifies clicks on specific tags, CSS classes, and parent nodes, aggregating them by element. This approach allows heatmaps to be drawn relative to these elements rather than X\/Y coordinates. For scroll maps, Clarity considers page length and user scrolling across multiple pages.<\/p>\n\n\n\n<p>Notably, Clarity\u2019s heatmaps are dynamic, displaying interactions based on elements existing at different points in time. This flexibility enables visualization of clicks during various stages of a page\u2019s existence.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5 Key Takeaways from Heatmaps<\/h2>\n\n\n\n<p><strong>1. Heatmaps can help you measure how your visitors\u2019 experiences change when you update your site.<\/strong><\/p>\n\n\n\n<p>Keep track of progress by comparing your visitors\u2019 experiences on your site before and after making changes. This will help you understand the impact of your site improvements and updates.<\/p>\n\n\n\n<p><strong>2. Heatmaps can help you find out what content your visitors like best.<\/strong><\/p>\n\n\n\n<p>Understand your visitors\u2019 favorite content over time so you can give them more of what they want and less of what they don&#8217;t.<\/p>\n\n\n\n<p><strong>3. Heatmaps can help you design better website layouts.<\/strong><\/p>\n\n\n\n<p>Design more effective website layouts by letting heatmaps tell you how each element on your page ranks in its user engagement.<\/p>\n\n\n\n<p><strong>4. Heatmaps can help you prioritize what to fix when you have limited resources<\/strong>.<\/p>\n\n\n\n<p>Make decisions to prioritize issues that have the greatest impact on user experience and sales conversion.<\/p>\n\n\n\n<p><strong>5. Heatmaps can show you the results of experiments on your site.<\/strong><\/p>\n\n\n\n<p>With heatmaps, you don\u2019t have to guess about which A\/B test performs higher, they visualize it for you.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Microsoft Clarity Heatmaps provide invaluable visual representations of user interactions, shedding light on where users click, move their cursors, and scroll. Clarity\u2019s heatmaps are generated on the fly, with no creation delay, and return within seconds. They aggregate data to quantify behaviors and trends, helping you identify what content works best for your website or app.&nbsp;Plus, Clarity is free forever, making it an accessible tool for understanding user behavior.<\/p>\n\n\n\n<div class=\"wp-block-group reusable-block-upsell-card is-layout-flow wp-block-group-is-layout-flow\">\n<h3>Add Clarity to your site today!<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Use our insights and analytics to wow your website visitors!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-left is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/clarity.microsoft.com?utm_medium=home&amp;utm_source=ClarityBlog&amp;utm_campaign=Growth\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\"> Get Clarity now! <\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn all about Microsoft Clarity heatmaps and how they can help you visualize your data.<\/p>\n","protected":false},"author":2,"featured_media":8923,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2,22,25,27],"tags":[20,21,23,9,24,10,26],"class_list":["post-45","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","category-heat-maps-blogs","category-user-behavior-tool","category-website-analytics-tool","tag-analytics","tag-click-maps","tag-heatmaps","tag-microsoft-clarity","tag-scroll-map","tag-user-behavior","tag-user-experience"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is a heatmap (heat map) and what does it tell you - Microsoft Clarity<\/title>\n<meta name=\"description\" content=\"A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a heatmap (heat map) and what does it tell you - Microsoft Clarity\" \/>\n<meta property=\"og:description\" content=\"A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/\" \/>\n<meta property=\"og:site_name\" content=\"Understand your customers | Microsoft Clarity Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-01T22:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-30T15:32:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"954\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Clarity Staff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Clarity Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/\",\"url\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/\",\"name\":\"What is a heatmap (heat map) and what does it tell you - Microsoft Clarity\",\"isPartOf\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png\",\"datePublished\":\"2021-06-01T22:13:00+00:00\",\"dateModified\":\"2025-07-30T15:32:23+00:00\",\"author\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea\"},\"description\":\"A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color.\",\"breadcrumb\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#primaryimage\",\"url\":\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png\",\"contentUrl\":\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png\",\"width\":1920,\"height\":954,\"caption\":\"cat lying on laptop with clarity heatmap\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/clarity.microsoft.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Microsoft Clarity Heatmaps: Insights and Best Practices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#website\",\"url\":\"https:\/\/clarity.microsoft.com\/blog\/\",\"name\":\"Understand your customers | Microsoft Clarity Blog\",\"description\":\"Find articles, best practices, and solutions to improve user experience\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/clarity.microsoft.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea\",\"name\":\"Clarity Staff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g\",\"caption\":\"Clarity Staff\"},\"url\":\"https:\/\/clarity.microsoft.com\/blog\/author\/v-joeperez\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is a heatmap (heat map) and what does it tell you - Microsoft Clarity","description":"A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/","og_locale":"en_US","og_type":"article","og_title":"What is a heatmap (heat map) and what does it tell you - Microsoft Clarity","og_description":"A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color.","og_url":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/","og_site_name":"Understand your customers | Microsoft Clarity Blog","article_published_time":"2021-06-01T22:13:00+00:00","article_modified_time":"2025-07-30T15:32:23+00:00","og_image":[{"width":1920,"height":954,"url":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png","type":"image\/png"}],"author":"Clarity Staff","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Clarity Staff","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/","url":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/","name":"What is a heatmap (heat map) and what does it tell you - Microsoft Clarity","isPartOf":{"@id":"https:\/\/clarity.microsoft.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#primaryimage"},"image":{"@id":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#primaryimage"},"thumbnailUrl":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png","datePublished":"2021-06-01T22:13:00+00:00","dateModified":"2025-07-30T15:32:23+00:00","author":{"@id":"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea"},"description":"A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color.","breadcrumb":{"@id":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#primaryimage","url":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png","contentUrl":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png","width":1920,"height":954,"caption":"cat lying on laptop with clarity heatmap"},{"@type":"BreadcrumbList","@id":"https:\/\/clarity.microsoft.com\/blog\/what-is-a-heatmap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/clarity.microsoft.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering Microsoft Clarity Heatmaps: Insights and Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/clarity.microsoft.com\/blog\/#website","url":"https:\/\/clarity.microsoft.com\/blog\/","name":"Understand your customers | Microsoft Clarity Blog","description":"Find articles, best practices, and solutions to improve user experience","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/clarity.microsoft.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea","name":"Clarity Staff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g","caption":"Clarity Staff"},"url":"https:\/\/clarity.microsoft.com\/blog\/author\/v-joeperez\/"}]}},"spectra_custom_meta":{"_edit_last":["1"],"_yoast_wpseo_content_score":["90"],"_yoast_wpseo_estimated-reading-time-minutes":["5"],"_yoast_wpseo_primary_category":[""],"_yoast_wpseo_focuskw":["heatmap"],"_yoast_wpseo_linkdex":["75"],"_yoast_wpseo_metadesc":["A heatmap aggregates website data to visually show how visitors are interacting with your site through warm to cool color."],"_wp_old_date":["2021-05-28"],"wp_jv_post_rg":[""],"_wp_old_slug":["what-is-a-heatmap-and-what-does-it-tell-you"],"_yoast_wpseo_title":["What is a heatmap (heat map) and what does it tell you - Microsoft Clarity"],"_aioseo_title":[""],"_aioseo_description":[""],"_aioseo_keywords":["a:0:{}"],"_aioseo_og_title":["#post_title #separator_sa #site_title"],"_aioseo_og_description":["#post_excerpt"],"_aioseo_og_article_section":[""],"_aioseo_og_article_tags":["a:0:{}"],"_aioseo_twitter_title":["#post_title #separator_sa #site_title"],"_aioseo_twitter_description":["#post_excerpt"],"_thumbnail_id":["8923"],"mtm_data":["a:1:{i:0;a:3:{s:9:\"reference\";s:0:\"\";s:4:\"type\";s:0:\"\";s:5:\"value\";s:0:\"\";}}"],"_edit_lock":["1753889544:1"],"_uag_page_assets":["a:9:{s:3:\"css\";s:21896:\".wp-block-uagb-advanced-heading h1,.wp-block-uagb-advanced-heading h2,.wp-block-uagb-advanced-heading h3,.wp-block-uagb-advanced-heading h4,.wp-block-uagb-advanced-heading h5,.wp-block-uagb-advanced-heading h6,.wp-block-uagb-advanced-heading p,.wp-block-uagb-advanced-heading div{word-break:break-word}.wp-block-uagb-advanced-heading .uagb-heading-text{margin:0}.wp-block-uagb-advanced-heading .uagb-desc-text{margin:0}.wp-block-uagb-advanced-heading .uagb-separator{font-size:0;border-top-style:solid;display:inline-block;margin:0 0 10px 0}.wp-block-uagb-advanced-heading .uagb-highlight{color:#f78a0c;border:0;transition:all 0.3s ease}.uag-highlight-toolbar{border-left:0;border-top:0;border-bottom:0;border-radius:0;border-right-color:#1e1e1e}.uag-highlight-toolbar .components-button{border-radius:0;outline:none}.uag-highlight-toolbar .components-button.is-primary{color:#fff}\n.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a:hover{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007 .uagb-heading-text{font-size: 20px;}.uagb-buttons__outer-wrap .uagb-buttons__wrap{display:inline-flex;width:100%}.uagb-buttons__outer-wrap.uagb-btn__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__small-btn .uagb-buttons-repeater.ast-outline-button{padding:5px 10px}.uagb-buttons__outer-wrap.uagb-btn__medium-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__medium-btn .uagb-buttons-repeater.ast-outline-button{padding:12px 24px}.uagb-buttons__outer-wrap.uagb-btn__large-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__large-btn .uagb-buttons-repeater.ast-outline-button{padding:20px 30px}.uagb-buttons__outer-wrap.uagb-btn__extralarge-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__extralarge-btn .uagb-buttons-repeater.ast-outline-button{padding:30px 65px}@media (max-width: 976px){.uagb-buttons__outer-wrap.uagb-btn-tablet__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__small-btn .uagb-buttons-repeater.ast-outline-button{padding:5px 10px}.uagb-buttons__outer-wrap.uagb-btn-tablet__medium-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__medium-btn .uagb-buttons-repeater.ast-outline-button{padding:12px 24px}.uagb-buttons__outer-wrap.uagb-btn-tablet__large-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__large-btn .uagb-buttons-repeater.ast-outline-button{padding:20px 30px}.uagb-buttons__outer-wrap.uagb-btn-tablet__extralarge-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__extralarge-btn .uagb-buttons-repeater.ast-outline-button{padding:30px 65px}}@media (max-width: 767px){.uagb-buttons__outer-wrap.uagb-btn-mobile__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__small-btn .uagb-buttons-repeater.ast-outline-button{padding:5px 10px}.uagb-buttons__outer-wrap.uagb-btn-mobile__medium-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__medium-btn .uagb-buttons-repeater.ast-outline-button{padding:12px 24px}.uagb-buttons__outer-wrap.uagb-btn-mobile__large-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__large-btn .uagb-buttons-repeater.ast-outline-button{padding:20px 30px}.uagb-buttons__outer-wrap.uagb-btn-mobile__extralarge-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__extralarge-btn .uagb-buttons-repeater.ast-outline-button{padding:30px 65px}}\n.uagb-buttons__outer-wrap .uagb-buttons-repeater{display:flex;justify-content:center;align-items:center;transition:box-shadow 0.2s ease}.uagb-buttons__outer-wrap .uagb-buttons-repeater a.uagb-button__link{display:flex;justify-content:center}.uagb-buttons__outer-wrap .uagb-buttons-repeater .uagb-button__icon{font-size:inherit;display:flex;align-items:center}.uagb-buttons__outer-wrap .uagb-buttons-repeater .uagb-button__icon svg{fill:currentColor;width:inherit;height:inherit}\n.uagb-block-0c7e50ad.wp-block-uagb-buttons.uagb-buttons__outer-wrap .uagb-buttons__wrap {gap: 10px;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: right;align-items: center;}.uagb-block-0c7e50ad .uagb-buttons-repeater:not(.wp-block-button__link){font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.ast-outline-button{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-uagb-buttons-child .uagb-buttons-repeater{background: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-ce399d64 .wp-block-button__link{background: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-ce399d64 .wp-block-button__link:hover{background: #eff6fc;}.wp-block-uagb-buttons .uagb-block-ce399d64 .wp-block-button__link:focus{background: #eff6fc;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__wrapper .uagb-buttons-repeater{color: #004578;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link:hover{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #0078d4;border-style: solid;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link:focus{border-color: #333;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #0078d4;border-style: solid;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__link{color: #004578;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__icon > svg{width: 15px;height: 15px;fill: #004578;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__icon-position-after{margin-left: 8px;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__icon-position-before{margin-right: 8px;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__link{text-transform: normal;text-decoration: none;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper .uagb-buttons-repeater{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link:hover{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:focus{border-color: #333;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__link{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon > svg{width: 15px;height: 15px;fill: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-after{margin-left: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-before{margin-right: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__link{text-transform: normal;text-decoration: none;}@media only screen and (max-width: 976px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}@media only screen and (max-width: 767px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}.uagb-block-0c7e50ad.wp-block-uagb-buttons.uagb-buttons__outer-wrap .uagb-buttons__wrap {gap: 10px;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap{width: 100%;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button {width: 100%;}.uagb-block-0c7e50ad .uagb-buttons-repeater:not(.wp-block-button__link){font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.ast-outline-button{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper .uagb-buttons-repeater{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link:hover{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:hover{border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:focus{border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater:hover{border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__link{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon > svg{width: 15px;height: 15px;fill: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-after{margin-left: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-before{margin-right: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__link{text-transform: normal;text-decoration: none;}@media only screen and (max-width: 976px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}@media only screen and (max-width: 767px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: left;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007 .uagb-heading-text{font-size: 20px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a:hover{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007 .uagb-heading-text{font-size: 20px;}@media only screen and (max-width: 976px) {.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading {text-align: left;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}}\";s:2:\"js\";s:359:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'load', function() {\n\tUAGBButtonChild.init( '.uagb-block-ce399d64' );\n});\nwindow.addEventListener( 'load', function() {\n\tUAGBButtonChild.init( '.uagb-block-9730a9e0' );\n});\nwindow.addEventListener( 'load', function() {\n\tUAGBButtonChild.init( '.uagb-block-9730a9e0' );\n});\n });\";s:18:\"current_block_list\";a:17:{i:0;s:12:\"core\/heading\";i:1;s:14:\"core\/paragraph\";i:2;s:10:\"core\/image\";i:3;s:14:\"core\/separator\";i:4;s:10:\"core\/group\";i:5;s:9:\"core\/html\";i:6;s:12:\"core\/buttons\";i:7;s:11:\"core\/button\";i:8;s:11:\"core\/search\";i:9;s:17:\"core\/latest-posts\";i:10;s:20:\"core\/latest-comments\";i:11;s:13:\"core\/archives\";i:12;s:15:\"core\/categories\";i:13;s:21:\"uagb\/advanced-heading\";i:14;s:12:\"uagb\/buttons\";i:15;s:18:\"uagb\/buttons-child\";i:16;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776213682\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-45.css"],"_uag_js_file_name":["uag-js-45.js"]},"uagb_featured_image_src":{"full":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png",1920,954,false],"thumbnail":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices-150x150.png",150,150,true],"medium":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices-300x149.png",300,149,true],"medium_large":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices-768x382.png",768,382,true],"large":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices-1024x509.png",1024,509,true],"1536x1536":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices-1536x763.png",1536,763,true],"2048x2048":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/02\/FI-MasteringMicrosoftClarityHeatmapsInsightsandBestPractices.png",1920,954,false]},"uagb_author_info":{"display_name":"Clarity Staff","author_link":"https:\/\/clarity.microsoft.com\/blog\/author\/v-joeperez\/"},"uagb_comment_info":2,"uagb_excerpt":"Learn all about Microsoft Clarity heatmaps and how they can help you visualize your data.","_links":{"self":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":2,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":9711,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions\/9711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/media\/8923"}],"wp:attachment":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}