Microsoft Clarity and A/B testing for ecommerce: heatmaps and GA4

Microsoft Clarity shows where shoppers in your online store click and how far they scroll, through heatmaps and session recordings. An A/B test then proves whether a change actually lifts orders. Start with the funnel step where you lose the most people. To detect a lift in conversion rate from 2% to 2.4%, you need about 21,100 visits per version.

Written by the CloudCart team, the ecommerce platform for stores selling across the EU. CloudCart facts come from the platform documentation and the Analytics, Checkout and CloudCart Pay pages; Clarity facts come from Microsoft's own documentation.

What Microsoft Clarity is and what a heatmap shows

Microsoft Clarity is a behaviour analytics tool: it records sessions, builds heatmaps and flags the moments when a shopper struggled. It has no subscription and no traffic limit, and it does not sample your traffic, so every visit can be recorded (Microsoft Clarity FAQ).

A heatmap is an image of a page where areas with many clicks or long attention are coloured in warm tones. For an online store the two most useful are the click map and the scroll map, which shows how far down the page people get. A session recording replays a single visit: one shopper's mouse movements, taps, clicks and scrolling from landing to leaving.

Clarity flags three signals that in a store almost always point to a problem:

• Rage clicks. The shopper clicks the same spot many times in quick succession. Usually a button responds slowly or not at all.
• Dead clicks. The shopper clicks something that looks clickable and the page does nothing. Typical case: a product photo that does not enlarge.
• Excessive scrolling. The shopper scrolls much faster than normal reading speed, because they are looking for something and cannot find it.

Your store analytics tell you at which step you lose shoppers; Clarity shows you why. The funnel numbers and benchmarks are in the guide to ecommerce conversion rate: formula, benchmarks and 20 fixes.

Clarity limits worth knowing

What	Limit
Session recordings	up to 100,000 sessions per project per day
Recording retention	30 days; favourites and a random sample up to 9 months
Heatmaps	up to 100,000 page views per heatmap; available for up to 9 months
Projects	unlimited per website
Input fields (email, phone, address)	always masked, never uploaded to Clarity

Source: Microsoft Clarity FAQ (linked above). Mark the recordings you will need for a before and after comparison as favourites.

How to install Microsoft Clarity in CloudCart with Google Tag Manager

The safest way to add Clarity to a CloudCart store is the Google Tag Manager app: the code is managed in one place and the shopper's consent choice reaches it. The app is included in every plan, from Baby Pack up. The place for each step is in brackets:

1. Create a Clarity project (clarity.microsoft.com). Sign in and add a new project with your store's domain. The project ID is in the browser address bar: clarity.microsoft.com/projects/view/ID/.
2. Create a GTM container (tagmanager.google.com). If you do not have one yet, create a Web container for the domain. Copy the ID in the format GTM-XXXXXXX.
3. Connect the app in CloudCart (admin). Apps → Google Tag Manager → paste the GTM ID and save. CloudCart adds the container code to every storefront page. The full setup with GA4 is in Google Tag Manager and GA4 for an online store.
4. Add the Clarity tag (GTM). There are two ways. Quick: in Clarity open Settings → Setup → Google Tag Manager → Finish setup, sign in with your Google account, choose the account and container and click Create and publish. Manual: in GTM click New Tag, pick the Microsoft Clarity - Official template from the Community Template Gallery, enter the project ID and set the trigger to All pages.
5. Publish (GTM). Click Submit → Publish and name the version "Clarity".
6. Check (storefront). Open the store in a new window and browse two or three pages. Recordings appear in Clarity almost at once.

The steps follow Microsoft's Clarity documentation for Google Tag Manager. You can also paste the code into Design → Custom CSS/JS, but nothing checks it there and a broken script stops the storefront immediately, so GTM is the better choice.

Does Microsoft Clarity need consent? GDPR, cookies and masking

Yes. For visitors from the EU, Clarity needs a consent signal. Since October 31, 2025 Clarity enforces this for page visits from the European Economic Area, the United Kingdom and Switzerland: for those visitors consent mode is on by default, and Clarity waits for a valid signal before it sets cookies (Microsoft Learn: Consent Mode in Clarity).

Without consent Clarity does not set its _clck and _clsk cookies, and _clsk is the one that links the pages of a visit into one recording. If a shopper opens a product and then the cart, Clarity sees two separate sessions.

The legal basis is the same for every analytics cookie in the EU. Under the ePrivacy rules a website has to get the visitor's consent before installing a cookie, unless the cookie is strictly necessary for a service the visitor asked for, such as the shopping basket (Your Europe: data protection and online privacy). Session recordings and heatmaps are not strictly necessary, so they wait for consent in every member state. What your cookie banner and policy need is covered in cookies and GDPR for an online store.

How to pass consent to Clarity in CloudCart

Clarity reads Google Consent Mode signals (ad_storage and analytics_storage) with no extra setup (Microsoft Learn: Google Consent Mode in Clarity). The GDPR app in CloudCart sends exactly these signals, so consent reaches Clarity without code:

1. The GDPR app (admin). Apps → GDPR, activate it and in the Cookies tab choose a cookie bar or a cookie wall.
2. The Google Consent Mode group (admin). In the same tab switch on the Google Consent Mode group. It is off by default, and you confirm your choice when you switch it on. The storefront then sends the consent signals before Google Tag Manager loads.
3. Clarity's cookies in your policy (admin). CloudCart does not scan cookies on its own. In the Performance Cookies group add a cookie named "Microsoft Clarity", a short description ("session recordings and heatmaps") and the technical names _clck, _clsk.
4. Default cookies (Clarity). In your Clarity project open Settings → Setup and turn off setting cookies by default. Clarity then waits for consent from every visitor, wherever they come from.
5. Check (storefront). Clear your cookies, open the store and decline. In the browser console run clarity('metadata', (d, upgrade, consent) => { console.log(consent); }, false, true, true);. You should see analytics_storage: "DENIED" and no _clck or _clsk cookies. After "Accept" the values change to GRANTED.

Masking: what Clarity does not record

Clarity masks sensitive content in the browser, and masked data never reaches its servers. The default mode is Balanced, which masks numbers and email addresses in the text. Strict masks all text, Relaxed masks no text. Input fields and drop-down menus are masked in every mode (Microsoft Learn: Masking content).

If your thank-you page or customer account shows a name and address as plain text, add those blocks under Settings → Masking → Mask by element with their CSS selector. The change applies to new recordings within about an hour and does not mask older ones.

How to read heatmaps and recordings to find the problem

The heatmap shows where the problem is on a page; the recording shows why. Work in this order:

1. Find the step with the biggest loss. In CloudCart open Analytics and in the conversion funnel compare Desktop and Mobile: Cart → Checkout started → Orders. The step that loses the most shoppers is the first to look at.
2. Open the heatmap for exactly that page. On a product page look at the scroll map on mobile: what share of shoppers reaches the buy button. In the cart look at clicks around delivery cost and the promo code field.
3. Filter the recordings. Pick sessions that visited the cart, placed no order, were on a phone and had rage or dead clicks. Watch 20 to 30 in a row.
4. Write down what repeats. After about ten recordings the pattern shows: a field that throws an error, a button below the fold, a delivery price that only appears at the last step.
5. Write a hypothesis. In the form "If we [change], [metric] will rise, because [what the recordings show]".

If the recordings show slow loading (a blank screen, images that appear late), fix speed first. The steps are in the guide to online store speed and Core Web Vitals.

What to A/B test first in an online store

Test first the change at the step with the biggest loss that affects the most visitors and is quickest to make. The table links a typical Clarity signal to a hypothesis and to the place in CloudCart where you make the change:

What you see in Clarity	Hypothesis	What you change in CloudCart	What you measure
Rage clicks on the delivery cost in the cart	The shopper does not know what they will pay or how far they are from free shipping	A free shipping threshold and BumpCart, which shows how much is left to reach it	Cart → checkout started; average order value
On mobile, under 50% reach the buy button	The important part is below the fold	Product page layout in the design; a shorter description at the top	Add-to-carts per 100 product page visits
Dead clicks on the product photo	Shoppers want to see the detail	More and larger photos in the catalogue	Add-to-carts
Drop-off at the payment step	The shopper's preferred payment method is missing	Card, Apple Pay and Google Pay with CloudCart Pay; the express button on the product page	Checkout started → order
Excessive scrolling in a category and searches with no click	The shopper cannot find the product	Category filters; the Aura Search report on searches with no result	Searches with a click; orders after search
Abandoned cart after the email is entered	The shopper is leaving for now, not for good	The timing of the abandoned cart email and the code inside it	Recovered carts

A delivery price that shoppers see too late is one of the first things to check in cart recordings, especially when shipping differs by country. How to set the threshold from your average order and carrier rates is in the free shipping threshold guide. CloudCart's cart and checkout steps are on the Checkout page, and the emails for unfinished orders are on the Abandoned carts page.

How much traffic you need for an A/B test

An A/B test (also called a split test) compares two versions of one page, shown at the same time to two random groups of visitors. The smaller the effect you want to detect, the more traffic you need.

Current conversion rate	+20% effect	+30% effect	+50% effect
1% (orders per visit)	42,700	19,800	7,750
2%	21,100	9,800	3,830
3%	13,900	6,460	2,520
10% (add to cart)	3,840	1,770	690
30% (cart → order)	960	440	160

The figures are visits for each of the two versions, calculated with the standard formula for comparing two proportions at a 95% confidence level and 80% statistical power. A +20% effect on a 2% conversion rate means a rise to 2.4%.

How to use the table

• Work out the duration. Visits per version × 2, divided by daily visits to the page. A store with 1,000 visits a day and a 2% conversion rate needs about 42 days to detect +20%.
• Measure the nearer step. When you test the product page, measure add to cart (around 10%) instead of orders from all visits. The traffic you need drops about five times.
• Test bold changes. A small store cannot prove +5%. It can prove +30% to +50%, and effects that size come from changes to delivery, payment and the first screen on mobile.
• Run at least 2 full weeks. That way the test covers every day of the week.

If your traffic is too low for a true A/B test, compare sequentially: 4 weeks before and 4 weeks after the change, in Analytics, separately for mobile and desktop. Choose both periods in the date picker, or use "Compare: previous period" if your plan includes it. The method is described in detail in the conversion rate guide. If the traffic comes from ads, tag it with UTM parameters so that you compare the same sources before and after: UTM parameters and attribution for an online store.

How to run an A/B test with GA4 after Google Optimize

GA4 measures the result of an A/B test, but it does not split visitors into groups. Google Optimize, Google's A/B testing tool, stopped being available on September 30, 2023, and every experiment still running ended that day. Google points to third-party testing tools that integrate with Google Analytics, such as AB Tasty, Optimizely and VWO (Google Optimize Help: sunset).

Job	Where it happens
Splitting visitors into version A and B and showing the version	The A/B testing tool; its script is added through GTM in CloudCart
Orders, add-to-carts, checkouts started	GA4, which receives ecommerce events from the Google Analytics app in CloudCart
Why a version wins or loses	Clarity: recordings and heatmaps of both versions
Checking that the store's overall numbers went up	CloudCart Analytics: conversion rate, funnel, average order value

To watch recordings of each version separately, add a custom tag in the Clarity template in GTM (the Custom tag Key and Value fields), for example the key "variant", whose value ("A" or "B") comes from the testing tool through a GTM variable, then filter recordings by it.

The testing tool's script must sit in the same consent group as Clarity and GA4. Otherwise a shopper who declined analytics is still assigned to a version and skews the comparison.

Common mistakes with A/B tests and heatmaps

• Stopping after the first good week. Early results swing. Decide only when you reach the traffic in the table and at least 2 full weeks.
• Testing during a promotion. Black Friday, the holidays and a new ad campaign change behaviour more than any fix. Make checkout changes at least 2 weeks before a big promotion and do not start a new test in the promotion week.
• Heatmaps on desktop only. On a phone the fold sits elsewhere, and a button visible on desktop may be below it. Check the share of mobile in the sessions by device report in Analytics and look at the Mobile maps separately.
• Clarity without consent. Without the Google Consent Mode group, sessions from the EU break into single pages and you lose the path to the cart.
• Mixing countries in one test. If you run a separate store per country with its own language and currency, shoppers in each market behave differently. Test one store at a time, or read the results per country.
• Deciding on one recording. A problem is something you see in at least 5 out of 20 recordings.

Frequently asked questions

Questions about Clarity, Google Tag Manager or consent in your store? Write to us at support@cloudcart.com.