Skip to content
095 430-06-28Consultation095 430-06-28

Integration with Microsoft Clarity and Hotjar for a website and online store

Microsoft Clarity and Hotjar show how people use your website: where they click, how far down the page they scroll and at which step they abandon a form or the cart. Session recordings and heatmaps help you find the reasons why some visitors never get to sending a request.

  • session recordings with clicks, scrolling and cursor movement on the page;
  • click and scroll heatmaps for the home page, categories and the product card;
  • masking of fields with personal data: phone, e-mail, address, payment;
  • session filters by source, device and page;
  • tags for key actions: the buy button, a form, checkout;
  • connection via Google Tag Manager or a code snippet on every page.

Why a website needs Microsoft Clarity and Hotjar

Google Analytics 4 shows numbers: how many people came and how many bought. Microsoft Clarity and Hotjar show behavior: where a visitor clicks, where they stop and what they try to press. Integration with Microsoft Clarity and Hotjar adds these tools to your website and configures them so that customers' personal data stays out of the recordings.

Owners search for website heatmap, visitor session recording and Hotjar or Clarity. Under the services' terms Clarity is free, and Hotjar plans depend on session volume, so we check the current terms before we start.

What connecting Clarity and Hotjar includes

  • installing the script of one or both tools with page speed in mind;
  • masking sensitive fields: phone, e-mail, address, payment details;
  • excluding payment pages and the customer account from recording;
  • event tags: a click on the buy button, a form submission, checkout;
  • linking recordings to traffic sources where the tool allows it;
  • cookie consent and a mention of the tools in the privacy policy;
  • a review of the first recordings and heatmaps with a list of hypotheses.

We draw conclusions once a sufficient sample has built up: individual recordings suggest a hypothesis, and GA4 data and orders confirm it.

How we connect Clarity and Hotjar

From you we need a Microsoft Clarity or Hotjar account (we will help you create one), access to the website settings and a list of pages worth recording. On Horoshop the script is added as a code snippet or via Google Tag Manager. On WordPress and a custom website we connect it in the template so that it loads after the main page content.

First we check the masking on test sessions and only then turn on recording for all visitors. The work goes in four steps:

  1. choosing the tool for your tasks;
  2. installing the script and masking fields;
  3. a test on real sessions;
  4. launch and a first review of the recordings.

Cost of connecting Clarity and Hotjar

We calculate the cost of the setup after a free consultation and a review of your website: it depends on the platform, the number of pages and the tools you choose. The Hotjar plan, if you need one, is paid directly to the service under its current terms. If you don't have a website yet, a template website costs from $500, and a corporate website – from $1,350. A consultation is available on the contacts page.

Questions and answers

Which to choose: Clarity or Hotjar?

To start, one tool is often enough, since both have recordings and heatmaps. Hotjar adds surveys and feedback widgets depending on the plan. The choice depends on your tasks, and we check the services' terms before we start.

Are passwords and card details recorded?

We mask sensitive fields and exclude payment pages and the customer account from recording. We check the masking on test sessions before launch.

Is cookie consent required?

Yes, we run the scripts according to the visitor's consent and describe them in the privacy policy. Data protection law applies.

How many recordings do you need to draw conclusions?

It depends on the page traffic and the question you are testing. We recommend waiting for a sufficient sample of sessions and comparing observations with GA4 data and orders.