Background⌗

We always try to make various adjustments to UI or functionality, but often we don’t know what users really need. For us, this is like crossing a river by feeling the stones - each adjustment we make doesn’t have sufficient data to support our next decision.

Coincidence⌗

On a coincidental afternoon, we received a message from our Japanese colleagues asking if we could integrate Clarity into our website. After some research, we found that its functionality was exactly what we wanted, and most importantly:

Clarity: It’s free—forever. Enjoy all the features of Clarity at absolutely zero cost. You’ll never run into traffic limits or be forced to upgrade to a paid version.

This truly shocked me. I had previously looked into similar data analysis platforms, but the quotes they provided often exceeded our expectations.

Preparing for Integration⌗

We quickly registered an account on Clarity and began trying to integrate it with our website. There are two methods of integration, both relatively simple.

Integration via Google Analytics⌗

This method is relatively simple, but it requires that your website already uses Google Tag Manager and Google Analytics.

Create a new project on Clarity, then in Setup, select Google Tag Manager from the Install tracking code on third-party platforms group.

An operation interface will pop up on the right side of the page. Click the Connect Now. button to jump to Google for authorization.

After completion, you only need to authorize Clarity, but that’s not the end. You still need to connect Google Analytics, and the operation steps are similar to the above.

Note that after integration, it takes about 2 hours to generate statistical data, and this data has a certain delay!

The principle of this integration method is that Google Tag Manager’s statistical code allows third-party service providers to insert their own statistical code, so all user actions on the webpage will be sent to Microsoft’s servers, not Google’s servers.

Manually Injecting Code into Webpages⌗

This method is suitable for websites that haven’t integrated Google Analytics and requires developers to insert statistical code into the webpage source code.

In Clarity’s Setup page, copy the statistical code from the Install tracking code manually group into your project.

Advanced Settings⌗

Masking⌗

This setting is to prevent sending sensitive information entered by users to Microsoft Clarity, to avoid illegal use. Such as account passwords and other data when users register and log in.

IP blocking⌗

This setting is used to filter out IP addresses that you don’t want to track, such as the user behavior of developers or internal company personnel.

Final Effect⌗

Here you can see the distribution of user click hotspots. In Recordings, you can view the screen recordings of users staying on the page, which currently seems to have some errors. Perhaps it will improve in the future!

With this tool, we can use data analysis to make decisions, thereby achieving data-driven development and design!

I hope this is helpful, Happy hacking…