Microsoft Clarity Integrations | Blue Frog Docs

Microsoft Clarity Integrations

Connect Microsoft Clarity with Google Analytics, WordPress, Shopify, and other platforms to enhance your analytics capabilities

Microsoft Clarity Integrations

Overview

Microsoft Clarity is designed to work alongside your existing analytics and marketing tools, not replace them. While Clarity excels at showing you how users behave, integrating it with platforms like Google Analytics, content management systems, and e-commerce solutions creates a more complete picture of user experience and business performance.

This guide covers the major integrations available, how to set them up, and how to get the most value from combining Clarity with other tools.

Google Analytics Integration

The Google Analytics integration is Clarity's most powerful connection, bridging quantitative metrics with qualitative behavior insights.

What the Integration Provides

In Clarity Dashboard:

  • Filter session recordings by GA4 traffic sources (organic, paid, social, direct, referral)
  • Segment by GA4 campaigns and campaign parameters (utm_source, utm_medium, utm_campaign)
  • View user properties and custom dimensions from GA4
  • See conversion events from GA4 alongside session recordings

In Google Analytics Dashboard:

  • Direct links to Clarity session recordings from GA4 reports
  • Clarity recording URLs in GA4 Explorations
  • Ability to watch session recordings for specific user cohorts identified in GA4

Setup Process

Step 1: Connect Accounts

  1. Log into your Clarity dashboard
  2. Navigate to Settings > Integrations
  3. Click Google Analytics
  4. Sign in with the Google account that has access to your GA4 property
  5. Select the GA4 property you want to link
  6. Grant permissions for data sharing
  7. Confirm the connection

The integration typically activates within a few hours. Historical data is not backfilled, only new sessions will include GA data.

Step 2: Verify Connection

  1. In Clarity, go to Recordings
  2. Add a filter and check if GA dimensions appear (Source, Medium, Campaign)
  3. If they appear, the integration is working
  4. In GA4, navigate to a user-level report and look for Clarity session URLs (may take 24-48 hours to appear)

Step 3: Configure GA4 Custom Dimension (Optional)

To make Clarity session URLs appear more prominently in GA4:

  1. In GA4, go to Admin > Custom Definitions > Custom Dimensions
  2. Create a new dimension:
    • Dimension name: Clarity Session URL
    • Scope: Event or User
    • Event parameter: clarity_session_url (this parameter is sent automatically by Clarity)
  3. Save the dimension

Now you can use Clarity Session URL as a dimension in reports and explorations.

Use Cases

Debug High-Bounce Traffic Sources

Scenario: GA4 shows that traffic from Facebook ads has a 75% bounce rate, but you don't know why.

Workflow:

  1. In Clarity, filter recordings: Source = facebook, Medium = cpc
  2. Further filter by Quick Backs or high bounce indicators
  3. Watch sessions to see what's causing immediate exits
  4. Common findings: landing page doesn't match ad messaging, slow load times, confusing navigation

Analyze Campaign Performance

Scenario: A specific campaign is driving traffic but not converting.

Workflow:

  1. In GA4, identify the underperforming campaign
  2. In Clarity, filter by Campaign = [campaign name]
  3. Compare behavior of this campaign's users vs. high-converting campaigns
  4. Look for differences in scroll depth, rage clicks, or page navigation patterns

Understand Device-Specific Issues

Scenario: GA4 shows mobile conversion rate is half of desktop, but doesn't tell you why.

Workflow:

  1. In Clarity, filter: Device = Mobile, Page = Checkout
  2. Watch recordings to identify mobile-specific friction (small buttons, text input issues, layout problems)
  3. Cross-reference with GA4 to quantify the impact of fixes

Limitations

  • Data delay: GA data in Clarity may lag by a few hours
  • Sampling: If your GA4 property uses sampling, Clarity integration reflects sampled data
  • Historical data: Only new sessions post-integration include GA dimensions
  • Universal Analytics: Integration works with GA4 only, not the deprecated Universal Analytics

Content Management System Integrations

Clarity provides native integrations and plugins for major CMS platforms, making installation quick and code-free.

WordPress

Via Official Plugin

  1. In WordPress admin, go to Plugins > Add New
  2. Search for "Microsoft Clarity"
  3. Install and activate the Microsoft Clarity plugin by Microsoft
  4. Go to Settings > Clarity
  5. Paste your Clarity Project ID (found in Clarity dashboard under Settings > Setup)
  6. Save settings

The plugin automatically adds the Clarity tracking code to all pages.

Manual Installation

If you prefer manual control or the plugin isn't compatible with your theme:

  1. Get your Clarity tracking code from the Clarity dashboard
  2. In WordPress, go to Appearance > Theme File Editor
  3. Edit header.php or use a plugin like Insert Headers and Footers
  4. Paste the Clarity script in the <head> section
  5. Save changes

Shopify

Via Shopify App Store

  1. Visit the Shopify App Store
  2. Search for "Microsoft Clarity"
  3. Install the Clarity app
  4. During setup, sign into your Clarity account
  5. Select the Clarity project to connect
  6. Authorize the connection

The app automatically adds tracking to your store and provides e-commerce-specific insights.

Manual Installation

  1. In Shopify admin, go to Online Store > Themes
  2. Click Actions > Edit Code for your active theme
  3. Open theme.liquid
  4. Paste the Clarity tracking code just before the closing </head> tag
  5. Save

Wix

  1. In Wix Editor, go to Settings > Custom Code
  2. Click + Add Custom Code
  3. Paste your Clarity tracking code
  4. Set it to load on All Pages in the Head section
  5. Save and publish

Squarespace

  1. In Squarespace dashboard, go to Settings > Advanced > Code Injection
  2. Paste your Clarity tracking code in the Header section
  3. Save
  4. Clarity will now track all pages

Webflow

  1. In Webflow project settings, go to Custom Code
  2. Paste Clarity tracking code in Head Code
  3. Publish your site
  4. Tracking begins immediately on the published domain

Drupal, Joomla, and Others

For CMS platforms without official plugins:

  1. Locate the global header template (usually header.php, page.html.twig, or similar)
  2. Add the Clarity tracking code before the closing </head> tag
  3. Save and clear cache

E-Commerce Platforms

Shopify (Detailed)

Beyond basic tracking, Clarity on Shopify captures:

  • Product page interactions and scroll behavior
  • Add-to-cart click patterns
  • Checkout funnel navigation
  • Mobile vs. desktop shopping behavior differences

Pro Tips:

  • Filter recordings by "checkout" page to find abandonment friction
  • Use heatmaps on product pages to optimize image and description placement
  • Watch sessions with rage clicks to identify broken buttons or slow-loading elements

WooCommerce (WordPress)

Use the WordPress Clarity plugin or manually add the tracking code.

E-commerce Insights:

  • Track cart page interactions
  • Identify confusing checkout form fields
  • Watch sessions where users abandon at specific steps
  • Optimize mobile shopping experience

Magento

  1. Go to Content > Configuration
  2. Select your store view
  3. Expand HTML Head
  4. Add Clarity tracking code to Scripts and Style Sheets
  5. Save configuration
  6. Clear cache

BigCommerce

  1. Go to Storefront > Script Manager
  2. Click Create a Script
  3. Name it "Microsoft Clarity"
  4. Select Script location: Head
  5. Paste your Clarity tracking code
  6. Set to All Pages
  7. Save

Google Tag Manager Integration

For teams managing multiple marketing tags, GTM provides a centralized way to deploy Clarity without touching code directly.

Setup Process

Step 1: Create Clarity Tag in GTM

  1. In GTM, go to Tags > New
  2. Name the tag "Microsoft Clarity"
  3. Click Tag Configuration > Custom HTML
  4. Paste your Clarity tracking code (full script from Clarity dashboard)
  5. Save tag configuration

Step 2: Set Trigger

  1. Click Triggering
  2. Select All Pages (or create a custom trigger if you only want Clarity on specific pages)
  3. Save

Step 3: Test and Publish

  1. Click Preview in GTM
  2. Visit your website in the preview window
  3. Verify that the Clarity tag fires on page load
  4. Check GTM debug panel to ensure no errors
  5. In Clarity dashboard, verify that sessions are being recorded
  6. Publish the GTM container

Advanced GTM Setup

Conditional Loading

Only load Clarity on specific pages:

// Trigger: Custom Event
// Trigger fires on: Some Pages
// Condition: Page Path contains "/checkout"

Sampling

Track only a percentage of sessions to reduce data volume on high-traffic sites:

// Custom HTML Tag
<script type="text/javascript">
  if (Math.random() < 0.5) { // 50% sampling
    (function(c,l,a,r,i,t,y){
      // Rest of Clarity tracking code
    })(window,document,"clarity","script","YOUR_PROJECT_ID");
  }
</script>

API Integration

Clarity doesn't offer a full REST API for programmatic access to session data, but it does provide a JavaScript API for custom event tracking and session tagging.

JavaScript API

Track Custom Events

// Fire custom event
clarity("event", "feature_used");

// Set custom tags for filtering
clarity("set", "user_type", "premium");
clarity("set", "experiment_variant", "B");

Identify Users

// Set custom user ID (use hashed ID, not PII)
clarity("identify", "user_abc123");

Upgrade User Session

// Force current session to be recorded even if sampling is enabled
clarity("upgrade", "session_priority");

Use Cases

Segment by User Type:

// After user login
if (userIsPremium) {
  clarity("set", "subscription", "premium");
} else {
  clarity("set", "subscription", "free");
}

Tag A/B Test Variants:

// After assigning user to experiment
clarity("set", "experiment", "homepage_redesign");
clarity("set", "variant", userVariant); // "A" or "B"

Then filter recordings in Clarity by these custom tags to analyze behavior differences.

Collaboration Tools

While Clarity doesn't have formal integrations with Slack, Jira, or Asana, you can leverage session URLs for collaboration:

Slack

Share session recordings directly in Slack channels:

  1. In Clarity, find a session of interest
  2. Copy the session URL
  3. Paste in Slack with context: "Found mobile checkout bug: [URL]"

Team members can click and watch without needing Clarity access (as long as they're invited to the Clarity project).

Jira / Bug Tracking

Attach Clarity session URLs to bug tickets:

  1. Reproduce the bug or find a user session exhibiting the issue
  2. Copy the Clarity session URL
  3. Paste it into the Jira ticket description or comments
  4. Developers can watch the session to understand the exact user experience

Microsoft Teams

Since Clarity is a Microsoft product, sharing in Teams is seamless:

  1. Copy session URL from Clarity
  2. Paste in Teams chat or channel
  3. Teams automatically unfurls a preview
  4. Team can discuss the session inline

Analytics Platform Alternatives

While Clarity integrates officially with Google Analytics, you can use it alongside other analytics platforms:

Adobe Analytics

No official integration, but you can:

  • Use both tools in parallel
  • Manually cross-reference Adobe data with Clarity sessions by time ranges and pages
  • Tag Clarity sessions with Adobe campaign IDs using custom events

Mixpanel / Amplitude

Behavior analytics platforms like Mixpanel and Amplitude track events, while Clarity shows sessions:

  • Use Mixpanel/Amplitude for quantitative funnel analysis
  • Use Clarity to watch sessions of users who dropped off at specific funnel steps
  • Tag Clarity sessions with Mixpanel user IDs for cross-referencing

Matomo / Plausible

Privacy-focused analytics work well with Clarity:

  • Both tools respect user privacy
  • Clarity provides session context that event-based analytics don't capture
  • Use together for a complete privacy-conscious analytics stack

Content Delivery Networks (CDNs)

Clarity's tracking script is hosted on Microsoft's global CDN, ensuring fast load times worldwide. No special CDN configuration is needed.

Cloudflare

Clarity works seamlessly with Cloudflare. No conflicts with:

  • Rocket Loader
  • Minification
  • Bot management
  • DDoS protection

Custom CDN Configurations

If you host the Clarity script on your own CDN:

  1. Download the Clarity script from Microsoft's CDN
  2. Host it on your CDN
  3. Update the script tag source URL
  4. Ensure your CDN supports frequent updates (Clarity occasionally updates the script)

Note: Microsoft recommends using their hosted version to automatically receive updates and optimizations.

Clarity respects user privacy and works with consent management platforms:

OneTrust

// Only load Clarity after consent
OptanonWrapper = function() {
  if (OptanonActiveGroups.indexOf('C0002') > -1) {
    // User consented to performance cookies
    // Load Clarity script
  }
}

Cookiebot

// Conditional loading based on consent
if (Cookiebot.consent.statistics) {
  // Load Clarity
}

// Check your custom consent flag
if (userConsent.analytics === true) {
  (function(c,l,a,r,i,t,y){
    // Clarity tracking code
  })(window,document,"clarity","script","YOUR_PROJECT_ID");
}

Limitations and Workarounds

No Server-Side Integration

Clarity is client-side only. You can't send events from server-side code. For server-side tracking, use Google Analytics Measurement Protocol or similar, then cross-reference with Clarity sessions.

No Real-Time API

You can't programmatically query Clarity for real-time session data. All insights are accessed through the Clarity dashboard.

Limited Export Options

Clarity doesn't offer bulk session export or CSV downloads. Insights are meant to be consumed in the dashboard through recordings and heatmaps.

Workaround: Integrate with GA4 to get quantitative data exports, then use Clarity for qualitative deep dives.

Best Practices

✅ Do:

  • Integrate Clarity with Google Analytics for maximum insight
  • Use GTM for easier tag management across multiple marketing tools
  • Tag sessions with custom events to enable filtering by business context
  • Share session URLs with team members for collaborative debugging
  • Respect user consent by loading Clarity only after approval

❌ Don't:

  • Expect Clarity to replace your primary analytics platform (it's complementary)
  • Send PII through custom events or user identification
  • Over-engineer integrations; Clarity is designed to be simple
  • Ignore consent requirements in privacy-regulated regions

Key Takeaways

Microsoft Clarity integrates seamlessly with:

  • Google Analytics for combined quantitative + qualitative insights
  • CMS platforms (WordPress, Shopify, Wix, etc.) via plugins and manual installation
  • Google Tag Manager for centralized tag management
  • Collaboration tools via shareable session URLs
  • Consent management platforms for privacy compliance

The most valuable integration is Google Analytics, which transforms both tools into a more powerful analytics stack. Start there, then expand to CMS and GTM integrations as needed.

Additional Resources:

↑ Back to top
// SYS.FOOTER