Behavioral Analytics: Microsoft Clarity & Google Analytics Integration

Introduction to Behavioral Analytics#

Behavioral Analytics is insights gathered by tool/or data generated with each user engagement on web properties/apps or other respective digital channels. The data aggregated helps to determine the potential UI/UX issues, this framework helps to determine the user flow for in-depth analysis

Without behavioral data, most of the analysis is based upon the clickstream data, which helps us determine UI/UX strategies based upon raw metrics. The optimization programs also leverage this clickstream data for cro strategies.

Adding an additional layer of behavioral data will use visual insights on click maps/ heatmaps, scroll depths, and replay user session recordings to determine the deeper insights into the user journey.

Microsoft Clarity#

Clarity is a free analytics tool offered by Microsoft, it enables us to better understand visitor behavior to improve user experiences. It has a low impact on page load times and ensures smooth user navigation, It is free and scalable so even if our site generates hundreds to hundred thousand visitors we will still be able to track user engagements.

The primary features offered by Microsoft Clarity:

  • Filtering Mechanism
  • Click Heatmaps
  • Scroll Depths
  • Dead Clicks
  • User Session Recordings

Implementing Microsoft Clarity#

Once we create our free account, We can set up our first project. It is basically like setting a web-property where each property will have a unique tracking javascript embed.

Once we have property setup we can navigate to the settings > setup tab to access our web property/project tracking code. Sample tracking code script below -

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

We will need to place this javascript embed in top of our HTMLtag. We will be using Google Tag Manager to implement this tag to fire on all pages.

Ingtegarating Google Analytics#

Microsoft clarity provides out of box integration with Google Analytics, this is easy to set up one-click integration that can be turned on under Settings Tab under the Setup tab.

Testing our Integration#

This integration will automatically set up the next available custom dimension in your GA web property which will capture ‘Clarity Playback URL’ for user session recording reference, Once we have integration active we can see another non-interactive event hitpost our pageview calls on blog site.

Microsoft Clarity Cookies and Playback URL#

Playback URLs for each sessions are generated and set in a custom dimentsion when GA integration is enabled. Below is a sample playback URL tracked in Google Analytics -

Sample Value - https://clarity.microsoft.com/player/3vv2t0j1eu/eegqop/cef7yn

Understanding Playback URL components

  • Property ID = [3vv2t0j1eu] This is unique tracking code provided by Microsoft Clarity for each unique property we setup in our account. Each tracking code has this property code available for tracking web properties.

  • USER ID = [eegqop] USER ID is generated for each user for the purpose of user identification and stored in a first-party cookie.

  • Session ID = [cef7yn] Each user session is tracked using session ID. It is stored in browser sessionStorage and a new sessionID is generated for user when browser session is closed.

Cookies and Expiration

In order to imtegrate with other analytics tools - We can get these values in datalayer and set varaibles as required for analytics tracking integration as well:

Enhanced Reports#

We can now leverage our Google Analytics metrics concerning Microsoft clarity playback session recordings, this will enable us to watch user sessions for cart abandonment/form abandonment and understand our UI/UX improvements.

Closing Notes#

Setting up a free tool with low page load for behavior analytics data generation along with integration with google analytics is very useful for our optimization programs to help us build and test better user experience and improve our conversion rates.

If you enjoyed this post, I’d be very grateful if you’d help it spread by sharing it on Twitter/LinkedIn. Thank you!

©2020-2022 abhinavpuri.com