i  have added mspoft clairoty in my site by using gppgle le anitycs intregration otoopn but aftr sconnected ot doesnt show dashbord and ll - Skip to main contentSkip to Ask Learn chat experience
Learn
Sign in
Clarity
Search
Filter by title
Back to Clarity Documentation
About Clarity
Installation Dock
How to sign up for Clarity?
How to install Clarity?
Clarity Content Security Policy
Troubleshooting Installation
Learn  Back to Clarity Documentation  Installation 
Setup Clarity
12/17/2024
Install tracking code
 Tip

Want to check out what Clarity is? Try our live Demo.

You need to install the tracking code to start using Clarity on your website. Each website you add to your Clarity account has its unique tracking code to install. You can add the same script to multiple subdomains of your website.

Select a project and go to Settings -> Setup. Learn how to add a project here.

Choose an installation method with which you would like to proceed further.

Choose an installation method.

There are three ways to install Clarity:

Install on a third-party platform
Install manually
Install using NPM
You can also share code with your team member who can help you with the installation.

 Note

Clarity shouldn't be used on any websites/apps targeting users under the age of 18 globally.
You can instantly start viewing data in the project as soon as you add the code.
By default, Clarity masks all sensitive content on your site.
Install on a third-party platform
You can install Clarity tracking code on third-party platforms like Shopify, SquareSpace, Wix, WordPress, and more. Refer to the list of supported third-party platforms.

Select View all platforms for a list of supported platforms.

Select view all platforms.

Setup Clarity using any of the listed platforms. Follow the setup instructions on each platform as you select one.

View supported platforms.

If your platform isn't listed, select I don't see my platform to submit a request.

Select I don't see my platform.

Enter the platform name and select Submit. While we'll try to support your platform in the future, you can install the code manually to start using Clarity immediately.

Submit platform request.

Install manually
 Note

To set up Clarity, you need access to your website's <head> section.

To manually install, select Get tracking code.

Select get tracking code.

Copy the code and paste it into the <head> section of your website or web app.

Copy tracking code.

Install using NPM
The NPM integration enables you to seamlessly incorporate advanced analytics into your JavaScript projects, offering features like heatmaps, session recordings, and much more. To get started, use the Clarity package available on NPM and follow the provided instructions to add the initialization code to your site. Refer to the NPM documentation to learn more.

View NPM installation instructions.

Share code with your team member
Choose this method if you like to share the code with a team member who can help you set up Clarity.

Select Share code.

Select share code.

Enter your team member's email ID and select Submit. An email with the tracking code and setup instructions is sent to your teammate.

Enter email ID and select submit.

Verify your Installation
There are two ways to verify if Clarity is installed correctly:

View your Clarity project
Once the script is added, find your project's Recordings and Dashboard data instantly. As soon you add the tracking code, you can view real time data with the number of current live users as shown:

View number of live recordings.

Select Watch now to start viewing the live users.

Check POST requests
See POST requests to https://www.clarity.ms/collect while interacting with your site. Here are the steps to view the request:

Right-click on your website and select Inspect.

Right click and select inspect.

Go to the Network tab and select collect file. You can view the POST request as shown.

Go to network and select collect.

Once you see the data on your project dashboard, explore Heatmaps to see how users interact with your website.

Setup Integrations
Optionally, using this section, you can integrate and manage Google Analytics, and Google Tag Manager.

Google Analytics Integration
Google Analytics integration allows Clarity to link session playbacks with your Google Analytics dashboard.

Select Getting started if you wish to integrate and learn more about Google Analytics integration.

Select getting started in GA integration.

Google Tag Manager Integration
Google Tag Manager integration is automatically detected.

Select Finish setup if you wish to integrate.

Select finish setup on GTM.

If you wish not to integrate, select Sign in with a different account.

Select a GTM account, GTM container from the drop-down, and select Create and publish.

Select create and publish.

 Note

Learn more on two other ways to integrate Google Tag Manager.

Advanced Settings
Manage cookies and fraud detection through advanced settings.

Cookies
Clarity uses cookies to gather session data. Toggle the button to turn on cookies.

Cookies in advanced settings.

Recordings won't be linked together into multi-page sessions if this setting is turned off. Learn how to customize the usage of cookies.

Turn off cookies.

Bot Detection
By default, Clarity detects bot traffic and excludes it from total session count and analytics. You can view the number of excluded bot sessions at the top of your dashboard.

Bots excluded in dashboard.

Toggle the button to turn bot detection off or back on again. When bot detection is turned off, Clarity is unable to detect bot traffic and exclude this from your total session count.

Turn on bot detection.

Clarity Compatibility
Clarity works on most sites with little code. It requires some modern browser APIs but should never throw exceptions on older browsers.

Though any site architecture is supported, Clarity can't capture what's inside your website's Canvas or third-party iFrame elements.

FAQ
For answers to common questions, refer to Setup FAQ.

Next steps
Team management

How to mask and unmask content?

How to use Clarity on third-party platforms?

Explore more
Recordings overview

Heatmaps overview

Insights overview

Visit Clarity
Case studies

Demo

Sign in

Blog

Benchmarks

Additional resources
Documentation

Troubleshooting Installation

Learn how to troubleshoot installation.

Sample wording for Clarity Site and Privacy Policy Disclosure

Sample wording for Disclosure on Clarity's Site and Privacy Policy.

Getting started

Getting started with Clarity.

Show 3 more
In this article
Install tracking code
Verify your Installation
Setup Integrations
Advanced Settings
Clarity Compatibility
FAQ
Next steps
Explore more
Visit Clarity
Previous Versions
Blog
Contribute
Privacy
Terms of Use
Trademarks
© Microsoft 2025