Overview

Microsoft Clarity competes directly with applications like Hotjar by offering a straightforward and no-cost solution for generating screen recordings and heat maps. It excels in segmenting recordings, allowing users to focus precisely on desired interactions. For instance, at Elevar, we often implement click tracking for clients upon launching new site features. This enables our clients to gauge user engagement with these features. For example, if a merchant launches a new product comparison tool and wishes to analyze customer interactions, Microsoft Clarity allows us to employ GTM triggers to track events specifically related to this feature. Within the Clarity interface, users can then filter recordings and heat maps to focus exclusively on this targeted behavior. This capability empowers us to analyze and optimize user experiences with precision.

Furthermore, Microsoft Clarity offers integration with Google Analytics 4. It seamlessly sends each session's screen recording link to GA4 via a custom dimension. This integration enables users to leverage GA4's robust segmentation tools to view recordings based on specific criteria of interest.

For more information on how Clarity and Elevar work together please review this article prepared by Clarity.

Prerequisites:

• If you have not installed our Shopify Source in your Elevar App. Follow our guide on how to Implement the Shopify Source.

Download the Pre-Built Microsoft Clarity Tags

Locate Microsoft Clarity Container:

• Begin on the homepage of your Elevar app. Use the left-hand navigation menu and click on the tab titled "Pre-Build Tags".
• Use the search function to locate and click on the Microsoft Clarity Pixel Container.
  • (See Figure 1)

Figure 1

Download Microsoft Clarity Container:

• Once in the Microsoft Clarity Container, navigate to the box titled "Download Container".
  • Add in your Microsoft Clarity ID [How to find this?].
• Click on the button labeled "Download Container".
  • (See Figure 2)

Figure 2

Import the Pre-Built Microsoft Clarity Tags into GTM

Import Container:

• Log in to your Google Tag Manager Account.
• Select your GTM Web Container.
• Click on the "Admin" button located in the upper menu bar.
  • Use the right-hand menu under the "Container" section and click on the tab labeled "Import Container".
    • (See Figure 3)

Figure 3

Import Container Information:

• Under the "Select file to import" section, click on the "Select File" button and choose the Microsoft Clarity Container that was previously downloaded.
• Under the "Choose workplace" section, either create a new workplace titled "Microsoft Clarity Tracking" or select your "Default Workspace"/
• Next be sure to select the "Merge" option first, then the "Overwrite conflicting tags, triggers, and variables" option second.
• Once you have completed filling out the necessary details for this container, click on the "Confirm" button located at the bottom of the page.
  • (See Figure 4)

Figure 4

[Optional] QA the New Tags with Google Tag Manager's Preview Mode

• Follow our guide to QA your tags in Google Tag Manager (GTM) preview mode.

Publish the Pre-Built Tags

• After importing the Microsoft Clarity tag container, you will be brought back to the Google Tag Manager homepage.
• In your workspace, click on the "Submit" button in the upper right hand corner of the page.
  • An additional confirmation page will appear. Be sure to click on the "Publish" button in the upper right-hand corner of the page.
  • (See Figure 5)

Figure 5