Microsoft Clarity Tutorial: Free Heatmaps and Behaviour Analytics

Understanding how visitors interact with your website is essential for improving conversions, reducing bounce rates, and delivering better user experiences. While tools like Hotjar and Crazy Egg have long dominated the behaviour analytics space, Microsoft Clarity offers a compelling alternative — it is completely free, has no traffic limits, and provides heatmaps, session recordings, and AI-powered insights that rival paid platforms. For Singapore businesses watching their marketing budgets, it is an invaluable addition to the analytics toolkit.

Clarity launched as a free product from Microsoft and has matured rapidly. In 2026, it processes billions of sessions per month globally and has become a standard tool for pemasaran digital professionals who want to go beyond pageview metrics and understand actual user behaviour. Singapore marketers managing e-commerce sites, lead generation pages, and corporate websites are using Clarity to identify UX issues, validate design decisions, and optimise conversion funnels — all without spending a dollar on software.

This Microsoft Clarity tutorial walks you through every aspect of the platform, from initial setup to advanced analysis techniques. You will learn how to install the tracking code, navigate the dashboard, interpret heatmaps and session recordings, use the AI-powered Copilot insights, compare Clarity against Hotjar, and integrate with Google Analytics 4 for a comprehensive analytics setup. Follow along step by step and you will be extracting actionable insights from your website within the hour.

Setting Up and Installing Microsoft Clarity

Setting up Microsoft Clarity takes less than ten minutes. The platform is entirely free — no credit card required, no trial period, and no traffic limitations. Here is the step-by-step process.

Step 1: Create your account. Visit clarity.microsoft.com and sign in with your Microsoft, Google, or Facebook account. If you do not have any of these, create a free Microsoft account first. Once signed in, you will be prompted to create your first project.

Step 2: Create a project. Click “New Project” and enter your project name (typically your website or business name), your website URL, and select the site category. Choose the appropriate category — options include E-commerce, SaaS, Blog/Content, and others. This helps Clarity tailor its insights to your site type. Set your project timezone to SGT (UTC+8) for Singapore.

Step 3: Install the tracking code. Clarity provides a JavaScript snippet that you need to add to every page of your website. You have several installation options:

  • Manual installation: Copy the JavaScript snippet and paste it into the <head> section of your website’s HTML, before the closing </head> tag. This works for any website but requires access to your site’s code.
  • Google Tag Manager: If you use GTM, click the Google Tag Manager installation option. Clarity provides a custom HTML tag that you can add to your GTM container. Set the trigger to “All Pages” and publish the container. This is the recommended approach for most Singapore businesses as it keeps your tracking tags centralised.
  • Platform integrations: Clarity offers direct plugins and integrations for WordPress, Shopify, Wix, and other popular platforms. For WordPress, install the Microsoft Clarity plugin from the WordPress plugin repository, activate it, and enter your Clarity project ID.

Step 4: Verify installation. After installing the code, return to the Clarity dashboard. It typically takes 30 minutes to two hours for the first data to appear. You can verify the installation is working by checking the “Setup” page in your project settings, which will show a green checkmark once tracking is active. Visit your website in a browser to generate test traffic and confirm data collection.

Step 5: Configure IP blocking. Navigate to Settings and add your office IP addresses to the block list. This prevents internal traffic from skewing your analytics data. For Singapore teams working from multiple locations (office, home, co-working spaces), you may need to add several IP addresses. You can also block specific countries or user agents if needed.

Navigating the Clarity Dashboard

The Clarity dashboard provides an overview of your website’s performance and user behaviour metrics. Understanding each section helps you quickly identify areas that need attention.

The Overview tab is your landing page after logging in. It displays key metrics including total sessions, pages per session, scroll depth, engagement time, and interaction rates. The “Dead Clicks” metric shows how often users click on non-clickable elements — a clear indicator of UX confusion. “Rage Clicks” tracks rapid repeated clicks on the same area, suggesting frustration. “Quick Backs” measures how often users navigate to a page and immediately return, indicating the page did not meet expectations.

The date range selector at the top lets you analyse any time period. Compare date ranges to track improvements — for example, compare this week’s metrics to last week’s after implementing website design changes. The comparison view shows percentage changes for each metric, making it easy to quantify the impact of optimisations.

The Filters panel on the left side of the dashboard is one of Clarity’s most powerful features. You can filter data by device type (desktop, mobile, tablet), browser, operating system, country, page URL, traffic source, user segment, and more. For Singapore marketers, filtering by device type is especially important — mobile traffic typically accounts for 60 to 70 per cent of visits to Singapore websites, and mobile user behaviour often differs dramatically from desktop.

The Popular Pages section shows which pages receive the most traffic and engagement. Click on any page to drill down into its specific heatmaps and recordings. The Referrers section shows where your traffic comes from, helping you understand which channels drive the most engaged visitors. These insights complement your Google Analytics data by adding a behavioural dimension to your traffic analysis.

Understanding and Using Heatmaps

Heatmaps visualise how users interact with your web pages using colour-coded overlays. Areas with high interaction appear in warm colours (red, orange), while low-interaction areas appear in cool colours (blue, green). Clarity offers three types of heatmaps, each revealing different aspects of user behaviour.

Click heatmaps show where users click on a page. They reveal which buttons, links, and elements attract the most attention — and which ones are ignored. Common findings include navigation items that receive almost no clicks (suggesting they can be removed or repositioned), body text links that outperform sidebar CTAs, and non-clickable elements that users try to click on (indicating a design issue). For e-commerce sites, click heatmaps often reveal that users click on product images expecting a zoom function, or click on price text expecting to see a breakdown.

Scroll heatmaps show how far users scroll down a page. A colour gradient indicates the percentage of users who reach each section — 100 per cent of users see the top of the page, but typically only 20 to 40 per cent reach the bottom of a long page. Scroll heatmaps help you determine where to place your most important content and CTAs. If your primary call to action is below the fold and only 30 per cent of users scroll that far, you need to move it higher or add an earlier CTA.

Area heatmaps aggregate click data by page sections rather than individual clicks. They show you which areas of a page receive the most interaction overall, which is useful for evaluating page layout effectiveness and section-level engagement.

To access heatmaps, click the “Heatmaps” tab in the top navigation and enter the URL of the page you want to analyse. Clarity generates heatmaps automatically for any page that receives traffic — you do not need to set up individual page tracking. Toggle between Click, Scroll, and Area views using the buttons above the heatmap. Use the device selector to compare heatmaps across desktop, mobile, and tablet — the click patterns often differ significantly between devices.

Heatmaps are particularly valuable after making changes to landing pages or key conversion pages. Compare heatmaps from before and after a design change to verify that the update achieved the intended behavioural shift. If you have redesigned a landing page for a SEO-driven campaign, heatmaps show whether organic visitors are engaging with the new layout as expected.

Analysing Session Recordings

Session recordings capture real user sessions on your website, showing every mouse movement, click, scroll, and page navigation. Watching recordings is one of the most insightful (and sometimes humbling) exercises in marketing — you see exactly how users experience your site, including all the confusion, frustration, and unexpected navigation paths.

Navigate to the “Recordings” tab to access your session library. Clarity records sessions automatically once the tracking code is installed. Each recording shows the user’s device type, browser, location, session duration, pages visited, and any notable interactions (dead clicks, rage clicks, or JavaScript errors).

Filtering recordings is essential — watching random recordings is inefficient. Use filters to find the most insightful sessions:

  • Rage clicks: Filter for sessions with rage clicks to find frustrated users. Watch these recordings to identify the UX issues causing frustration — broken buttons, confusing forms, slow-loading elements, or misleading links.
  • Specific pages: Filter for sessions that visited your most important conversion pages (pricing page, checkout, contact form) to see how users interact with your revenue-critical pages.
  • Exit pages: Filter for sessions that ended on a specific page to understand why users leave at that point.
  • Duration: Filter for unusually long sessions (potential confusion) or very short sessions (potential bounce issues).
  • Device type: Filter for mobile sessions specifically, as mobile UX issues are common and easy to overlook when you primarily test on desktop.

When watching recordings, take notes on recurring patterns. If five out of ten users struggle to find the navigation menu on mobile, that is a clear design problem. If users repeatedly scroll past your pricing section without engaging, the visual hierarchy may need adjustment. These qualitative insights are powerful complements to quantitative data from Google Analytics.

Clarity allows you to favourite and tag recordings for future reference. Create tags like “Form Abandonment,” “Navigation Confusion,” or “Conversion Success” to build a categorised library of user behaviour examples. These tagged recordings are invaluable for presenting UX findings to stakeholders or social media and marketing teams who may not regularly review analytics.

AI-Powered Insights and Smart Events

Microsoft Clarity leverages AI to surface insights automatically, saving you the time of manually reviewing hundreds of recordings and heatmaps. In 2026, the Copilot integration provides natural language summaries and recommendations based on your site’s behavioural data.

Copilot insights appear on your dashboard and provide AI-generated analysis of your site’s performance. Copilot can summarise behavioural patterns (“Users on your pricing page frequently rage-click on the feature comparison table, suggesting the table is not interactive as users expect”), identify trends (“Mobile scroll depth on your blog posts has decreased by 15 per cent this month compared to last month”), and suggest improvements (“Consider adding a sticky CTA button to your service pages, as 68 per cent of users do not scroll past the hero section”).

You can also ask Copilot questions directly. Type questions like “What are the biggest UX issues on my homepage?” or “Why do users leave the checkout page?” and Copilot analyses your session recordings, heatmaps, and metrics to provide a data-backed answer. This conversational interface makes behaviour analytics accessible even to team members without deep analytics expertise.

Smart Events allow you to track specific user interactions without adding custom code. Clarity automatically detects common events like form submissions, purchases, sign-ups, and downloads. You can also create custom Smart Events by defining URL-based or click-based triggers. For example, create a Smart Event that tracks when users click the “Request a Quote” button, then filter all your analytics — heatmaps, recordings, and metrics — to show only sessions that triggered that event.

Smart Events are particularly useful for tracking micro-conversions that indicate user intent. Track events like “Viewed Pricing Page,” “Expanded FAQ Item,” “Played Video,” and “Downloaded PDF” to build a picture of how users progress through your conversion funnel. These events can be analysed alongside your paid advertising campaigns to understand post-click behaviour.

Microsoft Clarity vs Hotjar: Which to Choose

Hotjar has been the default behaviour analytics tool for many marketing teams, but Microsoft Clarity has emerged as a strong alternative. Understanding the differences helps you choose the right tool — or decide to use both.

Pricing. Clarity is completely free with no traffic limits or session caps. Hotjar’s free plan limits you to 35 daily sessions and basic heatmaps. Hotjar’s paid plans start at approximately USD $40 per month for 100 daily sessions. For high-traffic Singapore websites, Clarity’s unlimited free plan represents significant cost savings.

Heatmaps. Both tools offer click, scroll, and movement heatmaps. Clarity generates heatmaps automatically for all pages, while Hotjar requires you to set up individual heatmap observations (unlimited on paid plans, limited on free). Clarity’s heatmaps are comparable in quality and visualisation. Hotjar offers a slight edge with its “Move” heatmap, which tracks cursor movement — a feature Clarity does not replicate.

Session recordings. Clarity records all sessions automatically with no cap. Hotjar’s free plan records 35 sessions per day. Clarity’s recordings include rage click, dead click, and JavaScript error detection built in. Both tools allow filtering and searching recordings. For volume of recordings, Clarity wins decisively.

Surveys and feedback. Hotjar includes on-site surveys and feedback widgets, allowing you to collect direct user feedback alongside behavioural data. Clarity does not offer surveys or feedback tools. If gathering qualitative user feedback is important to your workflow, Hotjar provides functionality that Clarity lacks.

AI insights. Clarity’s Copilot integration provides AI-powered analysis and natural language querying, which is ahead of Hotjar’s current AI offerings. Clarity’s AI summarises user behaviour, identifies issues, and suggests improvements — a significant advantage for teams that lack dedicated UX analysts.

Integration depth. Clarity integrates deeply with Google Analytics 4, allowing you to see Clarity recordings and heatmaps filtered by GA4 audience segments. Hotjar integrates with a broader range of third-party tools, including popular product management and customer support platforms.

Our recommendation for Singapore teams: Start with Clarity as your primary behaviour analytics tool — you get unlimited data for free. If you need on-site surveys or user feedback features, add Hotjar’s free plan alongside Clarity for its survey functionality. Running both tools simultaneously has minimal performance impact on your website.

Integrating Clarity with Google Analytics 4

The integration between Microsoft Clarity and Google Analytics 4 is one of Clarity’s most powerful features. It connects behavioural data (what users do) with acquisition and conversion data (where users come from and what they achieve), creating a comprehensive analytics setup.

Setting up the integration. In your Clarity project, navigate to Settings, then Integrations, and click “Google Analytics.” Sign in with your Google account and select the GA4 property you want to connect. Clarity will request read-only access to your GA4 data. Approve the connection and the integration takes effect within a few hours.

What the integration enables. Once connected, you can filter Clarity data by GA4 dimensions. View heatmaps and recordings for users who arrived through specific channels (organic search, paid ads, social media, email), users in specific GA4 audience segments, users who completed specific conversion events, or users from specific geographic regions. This filtering is transformative — instead of watching random recordings, you can watch recordings of users who abandoned their cart, users who came from a specific Google Ads campaign, or users who bounced from a key landing page.

Viewing Clarity data in GA4. The integration also works in reverse. Clarity sends engagement data back to GA4 as custom dimensions, including dead clicks, rage clicks, excessive scrolling, and quick backs. In GA4, you can create exploration reports that segment users by these Clarity metrics. For example, create a report comparing conversion rates between users who experienced rage clicks and users who did not — this quantifies the revenue impact of UX issues.

Practical workflow for Singapore marketers. Here is how to use the integrated setup for maximum impact. Start your weekly analysis in GA4 by reviewing traffic and conversion metrics. Identify pages with high traffic but low conversion rates. Switch to Clarity and pull up heatmaps and recordings for those specific pages, filtered by the relevant traffic source. Watch five to ten recordings to identify UX issues. Document the findings and prioritise fixes. After implementing changes, compare the before-and-after data in both tools to measure improvement. This workflow connects the “what” (GA4 metrics) with the “why” (Clarity behaviour data), enabling data-driven optimisation of your pemasaran kandungan pages and conversion funnels.

Soalan Lazim

Is Microsoft Clarity really completely free?

Yes, Microsoft Clarity is 100 per cent free with no paid tiers, no traffic limits, and no session recording caps. Microsoft monetises the aggregated, anonymised behavioural data to improve its own products (such as Bing search results), which is how they sustain the free offering. You can opt out of data sharing in your project settings if preferred.

Does Clarity slow down my website?

Clarity’s tracking script is lightweight and loads asynchronously, meaning it does not block page rendering. Independent performance tests show negligible impact on page load times — typically less than 50 milliseconds. The script size is approximately 10 KB compressed. For most Singapore websites, the performance impact is undetectable by users. If you are concerned, test your page speed with and without the script using Google PageSpeed Insights.

Is Clarity compliant with Singapore’s PDPA?

Clarity is designed with privacy in mind. It automatically masks sensitive content like input fields, personal data, and images by default. It does not capture keystrokes in password fields or sensitive form inputs. However, as a website owner, you are responsible for ensuring your overall analytics setup complies with the PDPA. Include Clarity in your website’s privacy policy, inform users about behaviour tracking through your cookie consent mechanism, and enable Clarity’s content masking settings to protect personal data.

How long does Clarity retain my data?

Clarity retains session recording data for 30 days by default. Dashboard metrics and aggregated data are retained for longer periods. If you need to retain specific recordings beyond 30 days, favourite them — favourited recordings are retained indefinitely. Heatmap data is available for as long as the page receives traffic and the tracking code is active.

Can I use Clarity and Hotjar at the same time?

Yes, you can run both Clarity and Hotjar simultaneously on the same website. The two scripts do not conflict with each other. The combined performance impact is still minimal for most websites. Many marketing teams use Clarity for unlimited heatmaps and recordings and Hotjar for its survey and feedback features, getting the best of both platforms.

Does Clarity work on single-page applications and SPAs?

Yes, Clarity supports single-page applications built with frameworks like React, Angular, and Vue.js. It detects virtual page navigations and records them as separate page views within a session. For SPAs, ensure the Clarity script is loaded once in the root HTML file. If your SPA uses client-side routing, Clarity automatically tracks route changes without additional configuration.