How to manually set up Clarity with ReactJS

A few texts back I wrote about this new tool that came around to be an option beyond the famous Hotjar. Today I come with a text a little more focused on the technical part.

If you still don’t know the advantages of Clarity, take a look at the other text: Reasons to use Microsoft’s Clarity

Despite Clarity’s documentation being very easy to understand, particularly for those who don’t code as much or needs to install it in platforms without a programmer’s help, I missed a better explanation for the ones who need to set it up in some other language, which in my case is ReactJS.

For that reason, I decided to bring it here how I did it, in order to help those who need it ;)

First thing you need to do is install react-microsoft-clarity in your project using the following command:

npm install react-microsoft-clarity --save

After the installation is complete, import into the App file of your project:

import { clarity } from 'react-microsoft-clarity';

Afterwards, add it into the function App the following line of code:

clarity.init('id-da-conta');

Now access Clarity and go to Setting and choose the option Install Manually. On the next page we’ll have the script where we have the information we need.

On the image below is indicated what is the id inside the script.

This script is what Clarity uses as an example ;)

Copy the id of your script and paste it inside the command. In the case of our example script, here’s what it would look like:

clarity.init('ckyi29i4x1');

I recommend adding an “if production” before calling the Clarity command, in order to not collect data from your development environment. For that, I suggest using environment variables. You can see how to create those variables in Using environment variables with React.

After your environment variable is created, our final code would look like this:

if (process.env.NODE_ENV === 'production') clarity.init('ckyi29i4x1');

There you go! Now, we just deploy it to production. In a little while, Clarity will start to collect data from your website or platform.

In case there’s any question left, suggestion or feedback, leave it on the comment section ;)

Follow our blog on Medium and stay inside everything that happens in Ateliê.

Say hello to us! And join us on social networks:
→ E-mail: contato@atelie.software
→ Site
→ Facebook
→ Instagram
→ LinkedIn