How to Add Microsoft Clarity to WordPress with WPCode

In this conversation, we walk through integrating Microsoft Clarity on your WordPress site using the WPCode plugin. You’ll see how to retrieve your project ID, paste the JavaScript snippet into headers, and confirm the installation. With this approach, you’ll access session recordings and heatmaps to optimize user engagement.

How does microsoft clarity work and how to set it up

Microsoft Clarity is a tool that helps you understand how visitors interact with your website. It records user sessions and provides insights through heatmaps, session recordings, and other analytics. You can use this data to improve your site’s design, identify areas of confusion, and optimize user experience.

Steps to Set Up MS Clarity

Create a Clarity Account: Go to the Microsoft Clarity website (https://clarity.microsoft.com/) and sign in or create an account.
Add Your Website: In the Clarity dashboard, add your WordPress site by entering its URL.
Get the Tracking Code: Clarity will provide a unique JavaScript snippet (tracking code) after you add your site.
Install the Tracking Code on WordPress: You have several options:
- Use a Plugin: Install a header/footer insertion plugin, then paste the Clarity snippet into the header section.
- Manually Edit Your Theme: Add the snippet to your theme’s header.php (use a child theme to avoid losing changes on updates).
- Use Google Tag Manager: If you use GTM, add the Clarity snippet as a new tag.
Verify Installation: Return to the Clarity site and click the verify button to confirm the snippet is live on your pages.

After Setup

Heatmaps: See where visitors click, scroll, and move their mouse.
Session Recordings: Watch individual visitor sessions to uncover usability issues.
Dashboard Insights: Review key metrics and trends over time.

Give me an example of what the code snippet would look like if I were to use WPCode

If you’re using the WPCode plugin (formerly Insert Headers and Footers), you would paste the following Clarity snippet into the plugin’s header section:

<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_CLARITY_PROJECT_ID");
</script>

Be sure to:

Replace YOUR_CLARITY_PROJECT_ID with your actual project ID.
Save and activate the WPCode snippet.
Then verify the installation in your Clarity dashboard.

How to Add Microsoft Clarity to WordPress with WPCode

Related