---
title: "Microsoft Clarity for ecommerce: heatmaps and recordings"
author: "Performetic Ekibi"
url: "https://www.performetic.com/en/blog/microsoft-clarity-for-ecommerce"
published: "2026-10-27T12:00:00.000Z"
updated: "2026-10-27T12:00:07.430Z"
---

# Microsoft Clarity for ecommerce: heatmaps and recordings

> Microsoft Clarity is a free analytics tool that offers heatmaps, session recordings and behaviour signals such as dead clicks and rage clicks. In ecommerce, you find the page where GA4 shows a drop, then use Clarity's signals and recordings for that page to spot what is costing you sales. Fix bugs fast and test design changes.

## How do you use Microsoft Clarity for ecommerce analysis?

Microsoft Clarity is a free tool that collects heatmaps, session recordings and behaviour signals once you add its tracking code to your store. The most productive ecommerce workflow is simple: find the page where GA4 shows a drop, check that page's dead clicks and rage clicks in Clarity, watch the related recordings and fix the cause.

GA4 tells you where visitors leave. Clarity gives you clues about why. A store that doesn't use both usually ends up guessing at its conversion problems.

## What is Microsoft Clarity, and is it free?

Clarity is Microsoft's behaviour analytics tool. Its official site describes it as "free forever" with no traffic limits, which matters for mid-sized stores compared with paid tools like Hotjar. Its core features are:

- **Session recordings:** watch a video-like replay of how real visitors move through your site.
- **Heatmaps:** click and scroll maps show which parts of a page get attention.
- **Behaviour signals:** dead clicks, rage clicks, excessive scrolling, quick backs and JavaScript errors are flagged automatically.
- **AI summaries:** Clarity also offers AI features that summarise behaviour trends for a page.

One limit to know: according to Microsoft's documentation, each heatmap processes up to 100,000 page views. On very high-traffic pages, a shorter date range gives a cleaner picture.

## How do you install Clarity on an ecommerce site?

Setup usually takes less than ten minutes. Microsoft's setup page lists three routes: supported platform integrations such as Shopify, WordPress and Wix, pasting the code manually into your site's head section, or the NPM package. If you use Google Tag Manager, Clarity detects it and lets you publish to your container directly.

1. Create a project at clarity.microsoft.com and enter your store's URL.
2. In the setup section under Settings, choose the platform integration, GTM or the manual code.
3. If your platform isn't listed, add the code through GTM or your platform's custom code field.
4. Verify the install: you should see live users in Clarity, or find requests to clarity.ms/collect in your browser's network tab.
5. Turn on the GA4 integration so you can connect recordings with GA4 segments.
6. Check masking. Clarity masks sensitive content by default, but confirm it on checkout and account pages.

## What do Clarity's behaviour signals mean?

Clarity's most useful trick is flagging problem sessions so you don't have to watch thousands of recordings. Based on Microsoft's definitions, here is what each signal usually means in a store:

| Signal | Clarity's definition | Typical ecommerce cause | Where to look first |
|---|---|---|---|
| Dead click | The clicked element gives no response in a reasonable time | Product images, badges or shipping info that look clickable | Product pages, category cards |
| Rage click | Several rapid clicks in the same small area | Slow cart drawer, broken size selector, coupon field | Cart and checkout |
| Excessive scrolling | More vertical scrolling than the expected average | Can't find what they want, long cluttered product page | Category and product pages |
| Quick back | Visiting a page and returning within a short time | Ad promise doesn't match the page, irrelevant product | Ad landing pages |
| JavaScript error | Code errors in the browser; errors right after a click are flagged separately | Payment plugins, theme updates, third-party scripts | Checkout and cart |

None of these signals proves a problem on its own. But if rage clicks on one page jump suddenly, something on that page has probably broken.

## How do you read a heatmap for an online store?

Clarity's click maps can show all clicks, dead clicks, rage clicks, error clicks, first clicks and last clicks separately, with desktop, tablet and mobile views. Most ecommerce traffic is mobile, so start there.

On a product page, check three things. First, how often visitors click on the size chart, delivery time or returns information; heavy clicking means that information should be easier to see. Second, whether people try to zoom the product image; dead clicks on the image mean they want a closer look. Third, whether the add to cart button and the price sit in the area most visitors actually scroll to.

On a category page, filter use and first clicks matter most. If almost nobody clicks the filters, they are either hard to see or not useful.

## How should you watch session recordings?

Watching random recordings wastes time. Start with filters. In Clarity you can filter by device, page path, traffic source and behaviour signal, then save the combination as a segment. A productive routine:

- Filter mobile sessions that added to cart but never reached checkout, watch fifteen or twenty and note the repeated behaviour.
- Isolate quick-back sessions from a specific ad campaign to find the gap between the ad and the landing page.
- Review checkout sessions with rage clicks once a week.

When a recording shows a problem, write down a hypothesis instead of changing the page on the spot, and test it where you can. Our [ecommerce A/B testing guide](/en/blog/ecommerce-ab-testing-guide) explains how.

## What about privacy and consent?

Clarity uses cookies and records user behaviour. Microsoft's setup documentation notes that if you turn cookies off you need to pass consent separately, and recordings won't link into multi-page sessions. Make sure your cookie banner places Clarity in the right category and only loads it after consent where your local rules require that. For stores selling in Turkey we cover the KVKK side in our [KVKK compliance guide](/en/blog/kvkk-compliance-ecommerce-turkey-cookies-consent). Check legal questions with your own lawyer.

Microsoft also states that Clarity shouldn't be used on sites or apps aimed at users under 18.

## What should you change based on Clarity data?

Clarity gives you plenty of observations, and acting on all of them at once makes it impossible to know what worked. Rank findings by impact and effort. Fix technical issues such as a dead button or a checkout error right away. Make layout, copy and image changes through tests.

If you want to rebuild product and checkout pages around real visitor behaviour, our [conversion-focused design](/en/services/conversion-focused-design) service shows how we run that process. To find the biggest leak in your store together, you can request a [free growth audit](/en/contact) from Performetic.

## Key takeaways

- Clarity is a free behaviour analytics tool with heatmaps, session recordings and behaviour signals.
- GA4 shows where you lose visitors; Clarity shows why. Use them together.
- Dead clicks, rage clicks and quick backs are the fastest way to find problem pages.
- Watch recordings through filters and segments, not at random.
- Fix technical bugs immediately, test design changes, and handle consent properly.

## FAQ

### Is Microsoft Clarity free?

Yes. Microsoft presents Clarity on its official site as free forever with no traffic limits. Session recordings, heatmaps and behaviour signals are all included. It helps to know that each heatmap processes up to 100,000 page views, so on very high-traffic pages a shorter date range gives a cleaner view.

### Can Clarity replace GA4?

No. GA4 measures traffic sources, conversions and revenue, and shows where visitors drop off. Clarity uses heatmaps and session recordings to suggest why they drop off. The two complement each other. Turn on Clarity's GA4 integration so you can review recordings alongside your GA4 data.

### Can I install Clarity on a platform that isn't in its integration list?

Yes. If your ecommerce platform has no ready-made integration, add the tracking code to your site's head section through Google Tag Manager or the platform's custom code field. After installing, confirm it works by checking for live users in the Clarity dashboard or for clarity.ms requests in your browser's network tab.

### What does a rage click mean?

A rage click is several rapid clicks in the same small area, and it usually means an element isn't working the way the visitor expects. In online stores it shows up most often on slow cart drawers, broken size or colour selectors and coupon fields. Rage clicks on checkout pages should be reviewed first.

## Sources

- [Microsoft Learn: Clarity click maps](https://learn.microsoft.com/en-us/clarity/heatmaps/click-maps)
- [Microsoft Learn: Clarity semantic metrics](https://learn.microsoft.com/en-us/clarity/insights/semantic-metrics)
- [Microsoft Learn: Clarity setup](https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-setup)
- [Microsoft Clarity official site](https://clarity.microsoft.com/)