How to Install and Use Microsoft Clarity on WordPress
WordPress powers over 40% of the web, and Microsoft Clarity is the best free behavior analytics tool you can add to it. This guide covers three installation methods, WooCommerce-specific tips, and how to fix common issues that trip up most WordPress users.
Why add Microsoft Clarity to WordPress?
Google Analytics tells you what happened. Clarity shows you why. With session recordings, heatmaps, and frustration signals (rage clicks, dead clicks, quick backs), you can see exactly how visitors interact with your WordPress site — for free, with no traffic limits.
For WordPress sites specifically, Clarity helps you answer questions like:
- Are visitors actually reading your blog posts, or bouncing after the first paragraph?
- Is your contact form confusing people? (Look for rage clicks on submit buttons.)
- Do WooCommerce shoppers abandon cart because of a UX problem you can't see in analytics?
- Which sidebar widgets get clicks, and which are dead weight?
Method 1: The official Microsoft Clarity WordPress plugin
This is the easiest approach and works for 90% of WordPress sites.
Step-by-step installation
- Go to Plugins → Add New in your WordPress admin.
- Search for "Microsoft Clarity".
- Click Install Now, then Activate.
- Navigate to Settings → Clarity.
- Sign in with your Microsoft account (or create a Clarity project at
clarity.msfirst). - Select your Clarity project from the dropdown.
- Click Save Changes.
The plugin automatically injects the Clarity tracking script into every page of your site. No code editing required.
Tip: The official plugin also gives you a Clarity dashboard widget right inside WordPress admin, so you can glance at heatmaps and session counts without leaving your site.
When to use the plugin
Use the official plugin when you want the simplest setup, don't have a Tag Manager workflow, and want the integrated WordPress dashboard. It's maintained by Microsoft, so compatibility updates come quickly.
Method 2: Manual code installation
If you prefer not to install another plugin, you can add the Clarity tracking code manually.
Option A: Using your theme's functions.php
Add this snippet to your child theme's functions.php:
function add_clarity_tracking() {
?>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;
t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window,document,"clarity","script","YOUR_PROJECT_ID");
</script>
<?php
}
add_action('wp_head', 'add_clarity_tracking');Replace YOUR_PROJECT_ID with your actual Clarity project ID (found in your Clarity dashboard URL: clarity.ms/app/xyz123/dashboard).
Option B: Using a header/footer plugin
Plugins like Insert Headers and Footers (by WPCode) let you paste the Clarity script into the <head> section without editing theme files. This survives theme updates and doesn't require a child theme.
Tip: Always use a child theme when editing functions.php. Otherwise, your tracking code disappears on the next theme update.
Method 3: Via Google Tag Manager (GTM)
If you already use GTM on your WordPress site, adding Clarity through it keeps all your tags organized in one place.
- In GTM, create a new Custom HTML tag.
- Paste the Clarity tracking script (the same
<script>block from Method 2). - Set the trigger to All Pages.
- Publish your GTM container.
This method is ideal if you manage multiple tracking tools and want a single point of control. It also lets you fire Clarity conditionally — for example, only on specific page paths or for logged-in users.
Configuring Clarity for WordPress sites
Once installed, log into your Clarity dashboard and configure these settings:
IP blocking
Go to Settings → IP Blocking and add your own IP address (and your team's). This prevents your editing sessions from polluting the data — especially important on WordPress where you spend a lot of time in the admin.
Masking sensitive content
Clarity masks sensitive input fields by default, but check your forms. If you have custom contact forms, membership registration pages, or checkout fields, verify that personal data is masked in recordings. You can adjust masking levels under Settings → Masking.
Google Analytics integration
Connect Clarity to Google Analytics under Settings → Google Analytics integration. This adds Clarity session playback links directly into your GA reports, so you can jump from a metric anomaly to the actual user session that caused it.
What to track on WordPress sites
WordPress sites have specific patterns worth monitoring in Clarity:
Blog content engagement
Use scroll depth heatmaps on your most important posts. If 70% of readers drop off before reaching your CTA or email signup form, move it higher. Clarity's scroll maps show exact percentages at every point on the page.
Navigation and menu usage
Click heatmaps reveal which menu items actually get used. Many WordPress themes have mega menus with dozens of links — Clarity shows you which ones are dead weight and can be removed to simplify the UX.
Form interactions
Watch session recordings of users interacting with Contact Form 7, Gravity Forms, or WPForms. Look for hesitation, rage clicks on submit buttons, or users abandoning forms mid-way. These insights are invisible in Google Analytics.
WooCommerce integration tips
If you run a WooCommerce store, Clarity becomes especially valuable for understanding the shopping experience.
Track the full purchase funnel
Use Clarity's filtering to segment recordings by page URL:
/product/*— Product page browsing behavior/cart/— Cart page interactions/checkout/— Checkout form completion/my-account/orders/— Post-purchase behavior
Watch recordings of users who reached checkout but didn't complete the purchase. Common WooCommerce issues you'll spot: confusing coupon fields, unclear shipping options, and payment gateway errors.
Product page heatmaps
Run heatmaps on your top product pages. Check whether users scroll past the fold to see product descriptions, reviews, and related products. If they don't, consider restructuring the layout or adding anchor links.
Custom event tracking
You can send custom events to Clarity using the JavaScript API:
// Track "Add to Cart" clicks
document.querySelector('.add_to_cart_button')
.addEventListener('click', function() {
clarity("set", "action", "add_to_cart");
});This lets you filter sessions in Clarity by specific WooCommerce actions, making it much easier to find relevant recordings. Tools like ClarityInsights can then surface these events automatically in weekly reports.
Common issues and fixes
Caching plugins blocking Clarity
Caching plugins like WP Super Cache, W3 Total Cache, and LiteSpeed Cache can interfere with Clarity in two ways:
- JavaScript minification/combination — If your caching plugin combines JS files, it may break the Clarity script. Solution: exclude the Clarity script URL (
clarity.ms) from minification. - Full-page caching serving stale HTML — After installing Clarity, purge your entire cache so the tracking script appears on all pages.
Lazy loading and heatmap accuracy
WordPress themes that use lazy loading for images can cause Clarity heatmaps to misalign. The page layout shifts as images load, and click coordinates become inaccurate. Fix this by setting explicit width and height attributes on images, or using CSS aspect-ratio to prevent layout shift.
Clarity not recording admin pages
By design, Clarity only tracks the front-end of your site. If you need to track wp-admin interactions (for example, for a SaaS built on WordPress), you'll need to manually add the tracking script to your admin header using the admin_head action hook.
Conflict with other analytics plugins
Clarity generally plays well with other tools (Hotjar, Google Analytics, MonsterInsights). However, if you have multiple heatmap tools running simultaneously, the performance overhead can slow down page loads. Pick one heatmap tool and stick with it — Clarity's unlimited free tier makes it the obvious choice.
Best practices for WordPress + Clarity
- Block your own traffic — Add IP blocking for yourself and your team.
- Check weekly, not daily — Clarity data becomes meaningful with volume. A weekly review cadence is ideal. Better yet, set up automated reporting with a tool like ClarityInsights to get AI-powered summaries delivered to your inbox.
- Focus on frustration signals first — Rage clicks and dead clicks are the fastest path to actionable improvements.
- Use URL filters — WordPress sites often have hundreds of pages. Filter by post type or category to focus your analysis.
- Test after every theme/plugin update — Verify Clarity is still firing correctly after major updates. Check the Clarity dashboard for data gaps.
Stop analyzing Clarity data manually
ClarityInsights sends you AI-powered weekly reports with per-page analysis, frustration signals, and prioritized recommendations.
Join the Waitlist