Share via

Setup Clarity

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.

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

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

    Choose an installation method.

There are three ways to install Clarity:

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.

  1. Select View all platforms for a list of supported platforms.

    Select view all platforms.

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

    View supported platforms.

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

    Select I don't see my platform.

  4. 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.

  1. To manually install, select Get tracking code.

    Select get tracking code.

  2. 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.

  1. Select Share code.

    Select share code.

  2. 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:

  1. Right-click on your website and select Inspect.

    Right click and select inspect.

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

    Go to network and select collect.

  3. 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.

  1. Select Finish setup if you wish to integrate.

    Select finish setup on GTM.

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

  3. 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