Microsoft Clarity Integration
Add heatmaps, session recordings, and rage click detection to understand user behavior.
Microsoft Clarity is a free behavioral analytics tool that shows you how users actually interact with your website through heatmaps and session recordings.
What is Clarity?
Microsoft Clarity provides visual analytics that complement your conversion data:
| Feature | What It Shows |
|---|---|
| Heatmaps | Where users click, scroll, and focus |
| Session Recordings | Full video replays of user sessions |
| Rage Clicks | Frustrated repeated clicking |
| Dead Clicks | Clicks on non-interactive elements |
| Quick Backs | Users who immediately leave a page |
Why Use Clarity?
Traditional analytics tell you what happened (user left at checkout). Clarity shows you why (form was confusing, button didn't work, user got frustrated).
Key Features
Heatmaps
****` Click Heatmap: Shows where users click most š“ Hot zones = high click areas šµ Cold zones = ignored areas
Scroll Heatmap: Shows how far users scroll š¢ 100% see this area š” 50% reach here š“ Only 10% scroll this far ****`
Session Recordings
Watch real user sessions:
- See exactly what users do on your site
- Identify where they get stuck
- Understand the customer journey
- GDPR-compliant (masks sensitive data automatically)
Behavioral Signals
| Signal | Meaning | Action |
|---|---|---|
| Rage Click | User frustrated | Fix broken element |
| Dead Click | Expected interaction | Add link or button |
| Excessive Scrolling | User searching | Improve navigation |
| Quick Back | Wrong page | Fix navigation/SEO |
Setup Guide
Step 1: Create Clarity Project
- Go to clarity.microsoft.com
- Sign in with Microsoft account
- Click Add new project
- Enter your website URL
- Copy the Project ID (from the tracking code)
Step 2: Connect in AdsMAA
- Go to Integrations ā Analytics
- Find Microsoft Clarity card
- Click Connect
- Enter your Project ID
- Click Connect
That's it! Our SDK now automatically loads Clarity on all tracked pages.
No Code Changes Needed
If you already have our Unified SDK installed: ****`html
<script src="https://cdn.adsmai.com/sdk/ct.min.js" data-org="YOUR_ORG_ID"></script>****`
Clarity will be loaded automatically. No additional scripts needed.
How It Works
Automatic Loading
When Clarity is connected, our SDK:
- Detects Clarity configuration
- Loads Microsoft's clarity.js script
- Initializes with your Project ID
- Forwards relevant events as custom tags
Event Forwarding
| SDK Event | Clarity Action |
|---|---|
| PageView | Page visit recorded |
| ViewContent | Custom tag: "view_content" |
| AddToCart | Custom tag: "add_to_cart" |
| Purchase | Custom tag: "purchase" |
| Identify | clarity("identify", userId) |
User Identification
When you identify a user in the SDK: ****
javascript adsmai('identify', { email: '[email protected]', externalId: 'user-123' }); ****Clarity receives this and links all their sessions together, letting you follow individual user journeys.
Using Clarity Insights
Finding Problem Areas
- Go to Clarity Dashboard
- Click Recordings with filter "Rage clicks"
- Watch sessions with frustrated users
- Identify common pain points
Optimizing Conversions
| If You See... | Consider... |
|---|---|
| Rage clicks on CTA | Button might not be working |
| Low scroll depth | Content above fold isn't engaging |
| Dead clicks on images | Users expect them to be links |
| Quick backs from product page | Listing doesn't match product |
Integration with AdsMAA
Clarity data complements your conversion tracking:
****
AdsMAA: "Checkout abandonment is 65%" Clarity: Shows users confused by shipping options Action: Simplify shipping selection Result: Abandonment drops to 45% ****Recap
Microsoft Clarity provides:
- Visual insights that numbers can't show
- Free with no limits on traffic
- Automatic via our Unified SDK
- Privacy-first with built-in masking
Connect Clarity to understand the why behind your conversion data.
Next step: View your heatmaps after a few hours of traffic.
Key Takeaways
- 1100% free analytics tool from Microsoft
- 2Automatic session recordings and heatmaps
- 3Rage click and dead click detection
- 4Auto-loaded by our SDK when connected
Frequently Asked Questions
Is Microsoft Clarity really free?
Does Clarity slow down my website?
Is Clarity GDPR compliant?
Why is Clarity client-side only?
Was this article helpful?
Continue Reading
Unified JavaScript SDK
One SDK for all platforms. Auto-loads Meta Pixel, GA4, and Clarity based on your connected integrations.
integrationsGoogle Analytics 4 (Dual-Track)
Complete GA4 integration: server-side Measurement Protocol + automatic client-side gtag.js loading.
trackingConversion Tracking Deep Dive
Understand how server-side tracking works and why it captures 2x more data than browser pixels.