Microsoft Clarity for a Better Understanding of How People Use Your MyListing Website

Build Better MyListing Websites. One Guide at a Time.

Table of Contents

Overview

Guide Updated: 10/13/2021

Our Microsoft Clarity for a Better Understanding of How People Use Your MyListing Website guide covers the usage of this excellent, no-cost solution.

This FREE, but powerful solution allows for the replaying of user sessions and the exploration of heatmaps to make your website works better for your customers, and to get started, all you need is a Microsoft, Facebook, or Google account.

Why Use Clarity?

The unique features of Clarity, which help you understand user behavior include:

  • Simple and easy customization.
  • Won’t get in the way of your site’s performance.
  • Data is analyzed and ready to view in near real-time.
  • No limits on the number of sites per account.
  • Limitless scalability.
  • No traffic limits on these sites.
  • Deep AI and Machine Learning.
  • No sampling.

Clarity Usage Scenarios

Clarity can be best used but not limited to:

  • Helping make data-driven decisions based on what strategies work on your website and those that do not.
  • Test what content works best and where to place it on your page.
  • Understand confusing elements of your webpage.
  • Identify user behavior and add required content to your page.
  • Test and publish new ideas on to your webpage.
  • Study user clicks and scrutinize the requirements.

Initial Setup

  1. Visit the Microsoft Clarity website and click ‘Get Started’.
  2. Confirm your email, accept the terms, and click ‘Continue’.
  3. Name your project, enter your website address, select a category, and click ‘Create’.

At this point, you’re ready to set up the method you’ll use for tracking your visitors, and the path you choose for tracking basically comes down to personal preference and your specific environment, but we’ll cover each of the options.

Data Masking

Masking is the prevention of sending a text to the Microsoft servers, and by default, Microsoft Clarity operates in Balanced mode, masking all sensitive text, such as email addresses and info entered by users, like passwords, address info, payment info, etc.

Clarity makes it easy to flip between Strict, Balanced, and Relaxed mode, depending on your needs.

Furthermore, you can mask any element on your website, by targeting a particular CSS selector.

For example, if you had a Single Listing block that contained information you didn’t want to send to Microsoft, you could assign a CSS ID or CSS Class to it, and then specify that assignment in Clarity.

IMPORTANT: Clarity should not be used on sites that contain sensitive data including user health care, financial services, or government-related information, and in most cases, this will not apply to MyListing-based websites or WordPress sites in general.

Tracking Setup

As always, we advise keeping the overall number of plugins to a minimum, so with that in +mind, we’ve listed the options below in the order of our recommendation.

Once you have completed your desired implementation path, please note that it may take up to 2 hours to start seeing your website visitor data populating in your Clarity dashboard.

Google Tag Manager

As we mention in our Google Tag Manager (GTM) guide, you would use GTM over Google Analytics (GA) when you need to track multiple entities, like GA, FB Pixel, etc.

If you have yet to set up Google Tag Manager for your website, be sure to check out our Google Tag Manager for MyListing Websites guide.

Since we use and recommend SEOPress for MyListing websites, going the Google Tag Manager route is super easy to implement, as you can drop your tracking codes into the ‘Analytics’ area of the plugin, and be on your way.

  1. Sign into Google Tag Manager.
  2. Click on the ‘Tags’ tab.
  3. Click ‘New’.
  4. Name your Tag ‘Microsoft Clarity’ or similar, for easy future reference.
  5. Click on the ‘Tag Configuration’ card.
  6. Under Choose Tag Type > Custom, choose ‘Custom HTML’.
  7. Paste in your Clarity Tracking Code, which can be found in your Microsoft Clarity dashboard, under the ‘Install tracking code on third-party platforms’ section.
  8. Click the ‘Triggering’ Card’ and click ‘All Pages’.
  9. Click ‘Save’.
  10. In the top-right portion of your Tag Manager dashboard, click ‘Submit’, click ‘Publish’, and then click ‘Skip’.

At this point, we know that Google Analytics (GA) is correctly working on your website, so that also means Microsoft Clarity is successfully tracking, as it’s piggy-backing off of GA.

Google Analytics

As we mention in our Google Analytics (GA) guide, you would use GA over Google Tag Manager (GTM) when you only need to track a single entity…Google Analytics.

If you have yet to set up Google Analytics for your website, be sure to check out our Google Analytics for MyListing Websites guide.

Since we use and recommend SEOPress for MyListing websites, going the Google Tag Manager route is super easy to implement, as you can drop your tracking codes into the ‘Analytics’ area of the plugin, and be on your way.

  1. From the ‘Setup’ tab of your Microsoft Clarity dashboard, scroll to the bottom section click on ‘Get Started’, under the Google Analytics Integration.
  2. Sign into the Google account used to manage Google Analytics for your website.
  3. Grant permissions to Microsoft Clarity, by clicking ‘Allow’, three times.
  4. Choose the website to connect to and click ‘Save’.

WordPress Plugin

  1. From the ‘Setup’ tab of your Microsoft Clarity dashboard, expand the ‘Install Tracking Code on Third-Party Platforms’ option.
  2. Click on ‘WordPresss / WooCommerce’.
  3. Take note of our ‘Clarity Project ID’ at the top of the page.
  4. On your MyListing website, install and activate the Microsoft Clarity plugin.
  5. From the settings of the plugin, paste in your Project ID from above and click ‘Save Changes’.

Team Member Access

Clarity makes it super simple to add more team members to your project, for times when you are part of a multiple-member team, you want to give access to a consultant, etc.

  1. From the ‘Team’ tab of your Microsoft Clarity dashboard, click ‘Add Team Member’.
  2. Enter the email address of the team member.
  3. Click ‘Add’.

At this point, the new team member will receive an invite email, and they will have access to the project by simply clicking on the link within the invite.

Note: Just as we covered with the initial setup, the new team member will need to log in with a Microsoft, Facebook, or Google Account.

By default, new team members will essentially be given read-only access, but you can easily make them an admin, using the role dropdown next to their account name.

Clarity Dashboard

The Clarity Dashboard gives you an overview of everything that’s going with your website, as far as the data that Clarity collects, and looking at the screenshot below, you can see all of the available data points, but we’ve also listed those below.

  • Total Distinct User Sessions
  • Pages Per Session Average (i.e. How many posts/pages the visitor views during their visit to your website.)
  • Scroll Depth Average (i.e. How far down the page the visitor goes.)
  • Active Engagement 
  • Inactive Engagement (i.e. Visitor is sitting idle.)
  • Dead Clicks (i.e. User clicked on something but nothing happened.)
  • Rage Clicks (i.e. User rapidly clicked on the same or nearly the same items in a small space.)
  • Excessive Scrolling (i.e. User scrolled a post/page not seemingly knowing where to go, possibly indicating a missing CTA.)
  • Quick Backs (i.e. User quickly navigates back to the previous page, which could indicate they are not finding what they are looking for.)
  • Popular Pages
  • Referrers (i.e. Where are the visitors coming from before hitting your site.)
  • JavaScript Errors
  • Browsers
  • Devices
  • Operating Systems

Launching Heatmaps

We cover heatmaps in the next section, but would quickly like to point out that you can easily view a heatmap for a particular item, by clicking on the heatmap icon next to it.

Launching Recordings

As with heatmaps (see screenshot from the previous section), recordings can be easily viewed by clicking on the recordings icon next to an item.

Heatmaps

Clarity tracks all visitor clicks and scrolls on mobile, desktop, tablet and automatically generates a heatmap. 

In Plain English: Heatmaps give you a visual map of how visitors interact (clicks, scrolls, etc.) with your website content.

In the screenshot below, we are showing an example engagement on a MyListing Single Listing, where the visitor interaction was to click on the Quick Actions and then later click on the website logo to go back to the Home page.

On the left-hand side, we also see a nice ranking of the elements that received the most clicks.

Heatmap Click View

The default view of any heatmap in Clarity is Click view, which as the name eludes to, shows the visitor’s clicks on your website, and if you hover over an area that has some designated click activity, as shown in the screenshot, you’ll find some additional information.

Heatmap Scroll View

While viewing a heatmap, you can quickly toggle from Click view, over to Scroll view, using the buttons towards the top of the Clarity dashboard, and as seen in our screenshot below, 100% of the visitors scrolled to the bottom of this particular Single Listing.

You can quickly see how valuable this type of information would be in regards to all areas of your website, as it allows you to see where to focus your most important content, find weaknesses in the user journey you’ve built, and so much more.

Recordings

One of the great attractions of Clarity is that all sessions are recorded, including mouse movements, scrolling, and clicks of every visitor to the site, and this can be viewed and replayed at any time in the future, using the recordings feature.

We might do our own video showing this on a MyListing website, but until then, this video from Microsoft is a fun way to see how recordings work.

Wrap Up

Clarity is purposely not trying to establish itself as the be-all-end-all analytics solution, and that is not a bad thing, because there are plenty of well-established solutions out there, that individually do an excellent job of offering what Clarity does.

Google Analytics, for example, has a massive foothold on web analytics, while HotJar has the heat mapping market cornered.

Microsoft Clarity provides both of those solutions in one platform, with performance and privacy in mind, and given the FREE price tag that Clarity has, it really is a no-brainer to implement it, as the payoff can be huge.

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)