Installing Microsoft Clarity

Installing Microsoft Clarity

Before you start installing Microsoft Clarity, it is useful to check the speed of your website. How to do that, we explain here.

Installing Microsoft Clarity is easiest via Google Tag Manager (GTM). To do this, however, you must have Google Tag Manager already installed on your website. Don't know how to do that? Don't worry, you can read about it here.

For a successful installation, you need a properly configured cookie banner or Consent Management Platform (CMP). This must pass the visitor’s consent choice on to Microsoft Clarity.

1. If you’re using a CMP with built-in integration:
   
   Various CMPs, such as Cookiebot, can automatically pass consent data to Microsoft Clarity. In this case, you don’t need to set up or program the Clarity Consent API yourself. You do need to enable Clarity Consent Mode, however. To do this, go to Settings → Installation within your Clarity project and enable the cookie setting. You can find a list of CMPs that support this here: Cookie CMPs
   
   
2. Are you using a CMP without built-in integration?
   
   Does your CMP lack built-in integration with Microsoft Clarity? If so, you’ll need to manually pass the appropriate consent using code. In that case, you’ll need adstorage (marketing cookies). Link this to the corresponding consent trigger. In many cases, this is `cookieconsent_update`, but the name of this trigger varies by CMP. Therefore, always check which trigger your CMP uses.

Step 1: Create Account

Start by creating an account with Microsoft Clarity. Visit the Clarity website and click the button to register. Then follow the instructions to set up your account.

Step 2: Add a new project

Once logged into Clarity, add a new project in the upper left corner. This is your first step toward collecting data about your website.

Step 3: Enter the name and website URL

On the new project screen, enter the name of your project and the URL of your website. Then click "Add new project" to continue.

Step 4: Check the Consent Mode

Within your Clarity project, go to:

Settings → Installation

Which setting you choose depends on the CMP you're using.

• Are you using a CMP with built-in integration with Microsoft Clarity? If so, enable the cookie setting. The CMP can automatically pass visitors' consent on to Clarity.

• Are you using a CMP without built-in integration? If so, you’ll need to manually provide the appropriate permission using code. Be sure to carefully check which setting is required for your CMP and implementation.

Step 5: Copy your project ID

To install via Google Tag Manager, you'll need the Clarity project ID. You can find the project ID in the URL of your Clarity project.

Step 5: Open Google Tag Manager

Next, open Google Tag Manager and log in. Next, select the domain for which you would like to set up Clarity.

Step 6: Add a new tag

Within Google Tag Manager, go to "Tags" and click "New Tag" to add the Microsoft Clarity tracking code to your website.

Step 7: Name the tag

Give your new tag a name. Make sure this is a name that is easily recognizable to yourself, for example, "Microsoft Clarity."

Step 8: Select the official Clarity template

Click on Tag Configuration. Then, under “Choose tag type,” select “Discover more tag types in the Community Template Gallery.”

Search the gallery for Clarity and select Microsoft Clarity – Official. Then add the official Microsoft template to your workspace.

Once added, the official Clarity template will open immediately within the tag you are creating.

Step 9: Enter your project ID

Paste the project ID you copied earlier into the appropriate field. Make sure you've entered only the ID and not the project's full URL.

Step 10: Configure the trigger and consent settings

The trigger and consent settings you use depend on your CMP.

• You’re using a CMP with a built-in integration
  At the bottom of the page, select the “All Pages” trigger. This will load the Clarity tag on every page.
  Next, go to Consent Settings within the tag and select “No additional consent required.” The CMP automatically passes the visitor’s consent to Microsoft Clarity.

• You’re using a CMP without built-in integration
  In that case, link the Clarity tag to the corresponding consent trigger. In many cases, this is `cookie_consent_update`, but the name of this trigger varies by CMP.
  In addition, under Consent Settings, configure the system so that consent for `ad_storage` is required to activate the tag. Always verify which consent trigger your CMP uses.

Step 11: Test the installation

Before you publish the changes, it's important to thoroughly test the installation.

Open your website in an incognito window and use the developer tools to check which cookies are set and when. Also, use Google Tag Manager's preview mode to check when the Clarity tag is triggered.

Test at least the following scenarios:

• You haven't made a selection in the cookie banner yet;
• You are rejecting all non-essential cookies;
• You only accept analytical cookies;
• You accept all cookies;
• You can adjust your cookie preferences later.

In every situation, verify that Clarity cookies are only set after the appropriate consent has been given.

Check the Microsoft Clarity documentation to see which cookies you need to check during the test:

Step 12: Submit the changes

Once you’ve correctly set up the tag and trigger and tested them, it’s time to publish the changes. Click “Submit” to put your new configuration live.

Step 13: Open Clarity

In Clarity, go to your account settings. And hit "ip-blocking.

Step 14: Block your IP address

Click on "+ block IP address. Enter a recognizable name and enter your own IP address here. This ensures that if you yourself are on the website, this will not be counted in the data. How to find your IP address is explained here.

Step 15: Check your website's speed

As a final step, check the speed of your website again. See if using Clarity isn't having too much of an impact. Is that the case? Then you might want to remove it from your website again and optimize your website for faster loading time first.

And that was him already! Very easy! Keep in mind that it can take up to two hours before the first data is visible and you can use Microsoft Clarity!