How to Integrate Microsoft Clarity and Google Analytics (GA4)

You may wonder, “Is it possible to integrate Microsoft Clarity with GA4?” The answer is a resounding “Yes.” However, the follow-up question might be, “What could possibly go wrong?” And that is what we’ll also discuss in this article. And if you might also be pondering, “Is there a more optimal approach?” Rest assured, I will also address that in this blog post. You’ll learn how to integrate Microsoft Clarity and Google Analytics (and beyond).

After publishing a detailed Microsoft Clarity tutorial, I’m back with another article that provides comprehensive documentation on integrating Microsoft Clarity and Google Analytics. It outlines both the “native” and “manual” approaches while discussing the challenges inherent in native integration and its corresponding benefits.

Additionally, I will briefly explore the Microsoft Clarity integration capabilities and the possibilities that exist when dealing with the need to integrate “Microsoft Clarity” with other analytics platforms like Piwik Pro, Mixpanel, and so on. You can integrate Microsoft Clarity seamlessly with these platforms, even when the tool isn’t listed with the list of tools that you can natively integrate with Microsoft Clarity.

Overview of Integration Capability In Microsoft Clarity

On the Microsoft Clarity integration page, you will find that the tool offers integration with various platforms, such as AB testing, landing page optimisation, web development, marketing, e-commerce, Conversion Rate Optimisation (CRO), and tag management. These integrations serve various purposes: installation, optimisation, and insight generation.

How To “Natively” Integrate Microsoft Clarity and Google Analytics (GA4)

The “native” method for integrating Microsoft Clarity with your GA4 begins in the Clarity interface, accessible through the “Setup” tab within the “Settings” section.

Once you’ve successfully established the integration of both tools, it will create a new “Google Analytics” tab, generating a reporting dashboard with your Google Analytics data as the primary data source.

The process of integrating Microsoft Clarity and Google Analytics 4 through the Native Integration involves the following steps:

1. Navigate to the “Settings” view and proceed to the “Setup” tab. Here, click on the “Get Started” button.
2. Sign in or select the Google account with access to the GA4 property.
3. Continue the authorization process and select the desired GA4 property from the dropdown menu.
4. Save the settings to finalize the connection.
5. Register the event parameter responsible for holding the session recording playback URL as a custom dimension in Google Analytics.

Authenticate your Google account with access to the GA4 property.

Select the GA4 property from the dropdown you wish to connect with your Microsoft Clarity project. Click the “Save” button to integrate both platforms seamlessly.

Once both tools are successfully linked, you will observe a “Connected” status within your Google Analytics integration card.

Additionally, you will gain access to the “Google Analytics” report, which I will explain shortly in this tutorial.

Further steps are necessary within GA4 to register “claritydimension” as an “event scoped” custom dimension. This connection enables access to session recording playback URLs within GA4.

Benefits of Natively Integration GA4 and Microsoft Clarity

The successful integration of Microsoft Clarity and Google Analytics (GA4) and registration of the custom dimension allow you to use the Microsoft Clarity session URL playback data for your analyses in the standard reports within GA4.

The data is also usable in your Google Analytics (GA4) explorations.

It is crucial to be aware of the limitations and issues associated with automatic native integration of Google Analytics and Microsoft Clarity.

Introduction of A New Google Analytics Dashboard Inside Clarity

This dashboard offers valuable visualizations and analyses of Google Analytics (GA4) data using Clarity features, including heatmaps and session recordings.

The report is categorized into various sections:

• Audience Overview: This section presents trends in sessions and session durations.
• Acquisition Report: It provides insights into user acquisition based on traffic channel, source, and medium, all of which are session-scoped dimensions.
• Page Performance by Views: This section analyzes the performance of pages based on views.
• Country Performance by Sessions: It examines the performance of different countries based on sessions.
• Device Performance by Sessions: This part provides insights into device performance based on sessions.

To understand some of the issues with native integration and how the “manual” integration approach can help resolve them, keep reading, as I’ll expose you to how to do this in this article.

Issues That Are Likely To Arise When You Integrate Microsoft Clarity and GA4 Using the Native Approach

While the native integration provides valuable insights, some issues are prevalent with it, and the known problem is the limitations and challenges of accessing the session recording playback URLs in GA4 and BigQuery. Another potential concern with the Clarity and GA4 integration is the possibility of duplicating users and sessions, in addition to “likely” privacy guideline violations. 

I will shortly delve deeper into these issues. So, if you must use the native integration, exercise caution, and please ensure you complement it with a manual integration, which will be discussed next after highlighting the issues with the native integration.

In contrast to Universal Analytics, the integration of Microsoft Clarity with GA4 does not employ a session-scope custom dimension. This limitation results in the session recording playback URL being available exclusively for the “Clarity” event but not for other events, such as 404 errors, e-commerce or conversion events.

Furthermore, as of the publication time of this article, Google has not introduced the “session-scoped” custom dimension in GA4. Consequently, the issues related to reporting hindrances will likely persist.

Examples Of Reporting Challenges Arising from the Native Integration:

One significant issue with the native integration of Microsoft Clarity and GA4 is the difficulty encountered when accessing the session recording playback URL as a dimension in your Google Analytics property or when working with Big Query. This often necessitates using complex queries, a situation that manual integration can circumvent.

For instance, the image below illustrates that the session recording playback URL is only accessible for the “Clarity” event, while it returns “(not set)” for other events.

However, in your Google Analytics (GA4) property, you may find the session recording in the “Pages and Screens” standard report, as shown in the image below. This is visible when you sort by the “claritydimension,” a custom dimension.

Without sorting by the “Clarity Playback URL” custom dimension, you’ll see “(not set)” in the Clarity URL playback column.

It’s important to note that these pages in your Google Analytics report containing a session recording URL are where the “Clarity” GA4 event was triggered. The GA4 event “Clarity,” executed due to the native integration of both tools, passes an additional parameter called “claritydimension,” containing the Microsoft Clarity session recording playback URL. This explains why “views” and other events are reported as zero in the images below.

When attempting to access the playback URL in Google BigQuery using GA4 data, I have found myself resorting to joins rather than a simpler SQL query. 

The integration between native Google Analytics and Microsoft Clarity can sometimes result in the page path being reported as “(not set),” even when the Clarity playback URL is accessible. To illustrate this issue, here is an example event featuring the “Clarity” GA4 event, which includes the session recording playback URL as a GA4 event parameter.

Here is the same “not set” example but without the “Clarity” event in the report.

Possible Privacy Violations Arising from the Native Integration:

Another concern associated with native integration pertains to privacy compliance, particularly in the context of regulations such as GDPR and DPA. For instance, Microsoft Clarity may fall under the performance or analytics consent category, while GA4 is categorized as part of the analytics and marketing domain.

Since Microsoft Clarity is in charge of the execution of the “Clarity” GA4 event, it basically means that Microsoft Clarity will trigger the GA4 event even when the website visitor has not granted the consent type required to fire the GA4 tag.

You can observe how the “Clarity” GA4 event was triggered on a website visit where the user had declined the execution of the Google Analytics script on their device, rendering the integration non-compliant.

Possibility of Causing Session Split & Data Duplication

An additional concern, which might not be immediately apparent with the native integration between Google Analytics and Microsoft Clarity, is the potential for user duplication and the subsequent risk of session inflation. This could compromise the integrity of the data collected in GA4.

The problem arises when you use server-side tagging with Google Tag Manager to collect data in Google Analytics and you’re utilising the “Server Managed” settings in your GA4 client configuration within your sGTM container. With such a setup, you’ll double-track users and potentially have the user session splitting each time an event gets emitted as a result of the native GA4 and Microsoft Clarity integration.

This issue is primarily due to the sGTM’s GA4 implementation using a server cookie referred to as “FPID,” which utilises a new Client ID stored in a secure HttpOnly cookie. This contrasts the Microsoft Clarity event triggered on the web because the integration uses the standard Google Analytics JavaScript cookie.

Furthermore, suppose you have made customisations to the Client ID in your Google Analytics configuration tag even for implementations not done using sGTM (Server Google Tag Manager). In that case, the automatic events tracked by Clarity in GA4 may not adhere to your GA4 configuration settings but instead utilise different config settings. This problem is more likely to occur when Clarity gets loaded before GA4. In some cases, it has even been reported to overwrite your GA4 configuration settings, potentially significantly impacting the quality of your Google Analytics data.

It’s essential to note that these issues are not caused by installing the Microsoft Clarity script on your website but rather result from using the native integration. In situations where manual integration of GA4 and Microsoft Clarity is adopted, these concerns are generally mitigated.

Please be aware that these native integration issues will likely arise when integrating GA4 with products outside of Google’s ecosystem, which I covered in another blog post about what could possibly go wrong when integrating Google Analytics with non-Google products.

How To “Manually” Integrate Microsoft Clarity and Google Analytics (GA4)

I always recommend opting for the manual integration of Microsoft Clarity and GA4. However, if you’ve diligently assessed the situation and are confident that the native integration won’t pose any issues, it’s advisable to complement the native integration with a manual one. To achieve this, you will need to:

• Capture the Microsoft Clarity session recording playback URL
• Send it as a GA4 event parameter.
• Registering the parameter as a custom dimension in Google Analytics
• The Microsoft Clarity userID (optional and only used in unique cases)

Here is how to do it:

1. Capture the Session Recording Playback URL:

1. Create two 1st Party Cookie variables for the session and user IDs: “_clsk” for Session ID and “_clck” for the user ID.
2. In Google Tag Manager, navigate to the variables section and create new variables under “User Defined Variables.”
3. Choose “1st Party Cookie” as the variable type and enter “_clsk” and “_clck” as the cookie names.
4. Ensure the “URL-decode cookie” option is selected.
5. Save the newly created variables.

The “User ID” cookie variable configuration.

The “Session ID” cookie variable configuration.

2. Obtain the Recording for the User’s Session:

The Microsoft Clarity session playback URL follows this format: “https://clarity.microsoft.com/player/” + Clarity_Project_ID + “/” + Clarity_User_ID + “/” + Session_ID.

You can use custom JavaScript and the first-party variable cookies created in the previous step to retrieve the recording playback URL for the user’s session.

function() {
  var mclarityUUID = '{{1PC - Clarity User ID -_clck}}';
  var mclaritySessionID = '{{1PC - Clarity Session ID - _clsk}}';
  var RealmclarityUUID = mclarityUUID.split("|")[0];
  var RealmclaritySessionID = mclaritySessionID.split("|")[0];
  var ThemclarityTagID = "<Project ID>"
  var mclarityPlayBackURL = "https://clarity.microsoft.com/player/" + ThemclarityTagID + "/" + RealmclarityUUID + "/" + RealmclaritySessionID
  return mclarityPlayBackURL;
}

*Ensure that “<Project ID>” gets updated with your business’s actual Microsoft Clarity project ID.

3. Sending the Data to Google Analytics (GA4)

The manual integration of Microsoft Clarity with Google Analytics (GA4) has become much simpler with the introduction of Google Tag and the two new event settings and config variables. In this guide, I will walk you through the process and provide my personal tip for seamlessly integrating both tools.

You have two options to ensure that the Microsoft Clarity session playback URL gets included in all user session events. You can take the more challenging path of adding it as a parameter to all your GA4 event tags in Google Tag Manager. Alternatively, take the best and recommended route, where you can leverage the capabilities of the Google Tag event settings variable.

You can create one if you are not using a “Google Tag event settings” variable in your GA4 Event tag. If you already have one, you can simply update it with the new event parameter you’ll add shortly.

To create a new “Google Tag Event Settings Variable,” go to the variables section of GTM, click the “new” button to create a new variable, and select the “Google Tag Event Settings” variable type. If you already have one, find and select it.

In the event parameter section, add a new field. For consistency, you can name the event parameter “claritydimension” and use the Microsoft Clarity session playback URL you created in GTM as the value.

Your final configuration should be similar to what I have below.

The image below shows how I added it to an existing Google Tag Settings I had in my GTM container that is applied to all my GA4 event tags.

The next step is to add the event settings variable to all your GA4 event tags in that Google Tag Manager container. If you are using more than one Google Tag settings variable, be sure to include the GA4 event parameter and value, as we did earlier.

Clicking into the dropdown gives you the opportunity to select the event settings variable with the playback URL parameter.

You should ensure that it applies to all your GA4 events, and in cases where you are using more than one event settings variable, ensure to update each variable with the clarity playback event parameter.

Yes, there is still one required action to take, and you’ll start by navigating to your Google Analytics config tag in your “Google Tag” within the GTM container. Select the tag, expand the “Shared event settings” tab, and choose the Google Tag settings variable we created earlier.

As a personal preference and considering its importance for reporting, I recommend an additional step. You can set up a GA4 event trigger for “Window Loaded” with the event name “Clarity.” Apply the GTM Google Tag settings variable we created to capture session recording playback URLs, especially for users with a single-page visit who didn’t spend much time on the website.

4. Registering the Parameter in Google Analytics 4

Suppose you haven’t registered the event scope custom dimension “claritydimension,” which is a parameter passed by the native Microsoft Clarity and GA4 integration and used in GA4 events. In that case, you’ll need to register it in GA4. Access the GA4 admin, navigate to the custom dimension section, and add the parameter there.

Add the “claritydimension” as the event parameter and select “Event” as your scope.

Integrating Microsoft Clarity With Other Stacks (CRM, Piwik Pro, Mixpanel, etc.)

The range of integration possibilities for Microsoft Clarity extends beyond the tools mentioned on the integration page. Following the same manual integration principle, you can seamlessly integrate Microsoft Clarity with your marketing stack. This is contingent on a mechanism allowing you to access the session playback URL or Microsoft Clarity-related data points like “user ID” or “session ID” for further analysis.

And in some cases, utilizing “Custom Tags” is all you need when integrating Microsoft Clarity with your AB testing tool or other categories of stacks that aren’t listed on the Microsoft Clarity integration page. To go further, you can read this article about using custom tags in Clarity. 

With the recent introduction of Microsoft Clarity and Zapier integration, you now have the option to integrate your business stack with Microsoft Clarity seamlessly. Opting for this method provides you with greater flexibility regarding the data you can extract from Microsoft Clarity for your business software applications, including CRM, chat, ticketing software, and more.

For scenarios where you’re seeking to integrate Microsoft Clarity with other measurement stacks, business CRMs, and ticketing software, a comprehensive blog post titled “Linking Session Recording Tools with Your Analytics Tool” is available. This resource provides code examples and step-by-step instructions for integrating Microsoft Clarity with platforms like Piwik Pro, Mixpanel, business CRMs, and ticketing systems.

Closing Remark

You can seamlessly integrate Microsoft Clarity with Google Analytics 4 through the Setup interface. If you choose to use the native integration, it is advisable to have manual integration methods in place as well. The native integration will create a reporting interface named “Google Analytics.”

I recommend that if you decide to utilise the native integration (which, in most cases, I have turned off), exercise caution and ensure that you either complement it with manual integration or solely rely on manual integration to address these limitations.

Finally, if you’re facing challenges in understanding how to implement Microsoft Clarity or leverage the insights it offers efficiently, you can explore the comprehensive guide on Microsoft Clarity.

If there’s anything you’d like to contribute or remove, please add it to the comment section or feel free to reach out to me on LinkedIn. I would appreciate hearing your thoughts. Until then, best wishes for your optimization efforts and quest for clarity.