Microsoft Clarity

What Is Microsoft Clarity?

Microsoft Clarity is a free behavior analytics platform that helps you understand how visitors actually use your website. Launched by Microsoft in 2020, it has rapidly grown to over 2 million websites because it offers enterprise-grade session recording and heatmap functionality with no traffic limits, no pricing tiers, and no cookies. For PrestaShop store owners, this means you can analyze every visitor session on your store — from homepage to checkout — without paying a cent for the analytics platform itself.

While Google Analytics tells you metrics (bounce rate, page views, conversion rate), Clarity answers the why behind those numbers. A 70% bounce rate on your product page means nothing until you watch 20 sessions and realize visitors can't find the "Add to Cart" button on mobile, or that your image gallery is broken in Safari, or that your size chart opens in a way that covers the buy button.

Core Features That Matter for Ecommerce

Session Recordings

Every visitor session is recorded and available for playback in the Clarity dashboard. You can filter recordings by:

• Pages visited — watch sessions that included your checkout page to find abandonment causes
• Device type — isolate mobile sessions where UX issues are most common
• Frustration signals — Clarity automatically tags sessions with rage clicks, dead clicks, and excessive scrolling
• Country and browser — identify if issues are localized to specific markets or browsers

Session recordings are anonymized — form fields, credit card inputs, and other sensitive data are automatically masked. You see the interaction patterns, not personal information.

Heatmaps

Clarity generates three types of heatmaps for every page on your store:

• Click heatmaps — show where visitors click most (and where they click but shouldn't, indicating confusing UI elements)
• Scroll heatmaps — reveal how far down visitors scroll, helping you position key content (CTAs, trust badges, offers) where people actually see it
• Area heatmaps — aggregate engagement by page section, showing which areas get the most interaction

For product pages, this data is gold. You can see if visitors are engaging with your product descriptions, if they notice your upsell sections, and whether your "Add to Cart" button is positioned optimally for the way people actually browse your pages.

Smart Insights — Automatic Issue Detection

One of Clarity's most powerful features is its automatic insight detection. The platform uses machine learning to identify patterns in your visitor data and surface issues proactively:

• Dead clicks — visitors clicking on elements that aren't interactive (images that look like buttons, text that looks like links). Each dead click is a potential lost sale.
• Rage clicks — rapid repeated clicking on the same element, indicating frustration. Common with slow-loading add-to-cart buttons or unresponsive dropdown menus.
• Excessive scrolling — visitors scrolling up and down repeatedly, suggesting they can't find what they're looking for.
• Quick backs — visitors who navigate to a page and immediately return, indicating the page didn't match their expectation.

These insights are surfaced in your Clarity dashboard automatically — you don't need to manually review hundreds of sessions to find problems.

Google Analytics Integration

Clarity integrates directly with Google Analytics (both Universal Analytics and GA4). Once connected, you can launch session recordings directly from your GA reports — click on a metric in GA and watch the actual sessions behind it. This bridges the gap between quantitative data (GA) and qualitative understanding (Clarity).

Privacy and GDPR

Microsoft Clarity is designed with privacy at its core:

• No cookies by default — Clarity uses a cookieless tracking approach, which means it doesn't require cookie consent for basic functionality under most GDPR interpretations. However, consult your legal advisor for your specific situation.
• Sensitive data masking — all form inputs, including checkout fields, are automatically masked in recordings. You see that a visitor typed in a field, but not what they typed.
• Data processing — Microsoft processes Clarity data under their standard privacy terms. Data is stored in Microsoft Azure data centers.
• No data selling — Microsoft does not sell Clarity data or use it for advertising targeting outside the Clarity product.

Technical Implementation

The module injects Clarity's JavaScript tracking code asynchronously in the <head> of your store. The script is:

• ~16KB compressed — one of the smallest analytics scripts available
• Async and non-blocking — loads in parallel with your page, never delays rendering
• Automatically handles SPAs and dynamic content — captures interactions even on AJAX-loaded elements
• No external dependencies — no jQuery, no additional libraries

Setup

1. Create a free account at clarity.microsoft.com and set up a new project.
2. Copy your Clarity Project ID (a string like abc123xyz).
3. Install this module in PrestaShop, paste the Project ID, and save.
4. Clarity starts collecting data immediately — heatmaps and recordings appear within 2 hours.