Set Up Heatmaps and Session Recordings on Your Website

Analytics tells you what happened. Heatmaps show you why: the button nobody sees, the image everyone tries to click, the form people give up on.

30 minutes – 1 hour

Verified by Hassan Rawther ·

Hassan Rawther is the Founder, Unlearn Academy. Written by the Unlearn Academy team.

0 of 5 doneContinue →

The short answer

To set up heatmaps on your website, create a free Microsoft Clarity project, install it through Google Tag Manager or by pasting its code in your site’s <head>, and wait a day for data. Open Heatmaps to see clicks and scroll depth for any page, and Recordings to watch real sessions. Log each finding with a hypothesis and next step.

Before you start

By the end of this SOP

Heatmaps and recordings are collecting on your key pages, and your first findings are logged.

Time
30 minutes – 1 hour
You’ll need
Google Tag Manager on your site (SOP 004) and a Microsoft account. Hotjar works too.
Who does this
The person responsible for analytics or conversion rate optimisation (CRO).
About this SOP: why it matters, where and when

Why it matters: You can’t fix a page until you see how real people use it.

Where: In Microsoft Clarity, Google Tag Manager and a Google Sheet.

When: On key pages from day one, and before and after any redesign.

Stage 1

Choose the pages to watch

  1. 1

    Core pages people pass through before converting: homepage, main service or course page, pricing, contact or checkout.

  2. 2

    Supporting pages that show what people care about: FAQs, portfolio, features.

  3. 3

    Problem pages: lots of traffic but unusually high exits or low conversions in GA4 (SOP 009).

Stage 2

Install Microsoft Clarity

  1. 1

    Go to clarity.microsoft.com, sign in, and click “New project”. Enter the site name and URL.

  2. 2

    Choose to install via Google Tag Manager and connect your GTM account and container. Or, in GTM, add a Custom HTML tag with the Clarity code on “Initialization – All Pages”, then Submit and Publish.

  3. 3

    Open your site, then check Clarity’s Settings → Setup. It should confirm tracking is installed within a couple of hours.

  4. 4

    In Settings → IP blocking, block your office and home IP addresses so your own visits don’t pollute the data.

  5. 5

    Connect Clarity to your consent banner. If you use Google Consent Mode (SOP 004), turn on Clarity’s Consent Mode in Settings so it follows the visitor’s choice. Otherwise call Clarity’s consent API from your banner.

    Note

    Session recording counts as handling personal data. Mention Clarity in the privacy policy and consent notice; India’s DPDP Rules 2025 make clear consent notices the norm.

Stage 3

Read heatmaps and recordings

Give it at least a few days or a few hundred visits per page before drawing conclusions.

  1. 1

    Heatmaps → choose a page:

    • Click map: are people clicking things that aren’t links (images, headings)? Ignoring the main button?
    • Scroll map: how far do most people get? Is the call to action below the point where most stop?
  2. 2

    Recordings: watch 10 sessions that converted and 10 that didn’t. What do converters do differently?

  3. 3

    Filter by rage clicks, dead clicks and quick backs to find frustrating moments fast.

    Tip

    Always check mobile and desktop separately. Most Kerala traffic is mobile, and problems are often mobile-only.

Stage 4

Log findings and next steps

  1. 1

    For each finding, add a row in a Google Sheet:

    • Page and date range (don’t change the page while collecting).
    • Finding, e.g. “60% of mobile users never reach the Enquire button.”
    • Hypothesis, e.g. “The button is too far down.”
    • Next step, e.g. “Add a sticky Enquire button on mobile, then A/B test it (SOP 060).”

Agency playbook

Doing this for a paying client

What a senior checks before calling the job done. Numbers are starting rules; compare them with the account’s own history.

What good looks like

  • Clarity is installed once, through the client’s own GTM (Google Tag Manager) container, not hard-coded twice. Duplicate tags double-count sessions.
  • Clarity is linked to the client’s GA4 (Google Analytics 4) property, so you can jump from a GA4 segment to the matching recordings.
  • Every finding names the page, device, date range and sample size. Starting rule: no conclusions from fewer than 300–500 pageviews per page.
  • Each finding ends in one testable action with an owner, not a vague note like “improve the page”.
  • You spot-check five recordings and see no unmasked phone numbers, names or ID numbers anywhere.

Mistakes we see on real accounts

  • Installing Clarity on a client site from your personal account. When the junior leaves, the client loses months of data and access.
  • Leaving custom form fields unmasked. Recordings then store phone numbers and Aadhaar inputs, a real privacy and DPDP (Digital Personal Data Protection) risk.
  • Redesigning a page after watching three recordings. One odd user becomes a ₹50,000 rebuild that fixes nothing.
  • Never filtering by device. Desktop heatmaps hide the mobile problem that most Kerala visitors actually face.
  • Leaving the old Hotjar tag running beside Clarity. Two recorders slow the page and confuse consent handling.

Agency checklist before you call it done

  • The Clarity project sits in the client’s Microsoft account, with the agency added as admin. You never own the client’s data.
  • Privacy policy and consent notice mention session recording. Client approved the wording before you went live.
  • Consent Mode or the consent API is tested: decline cookies once and confirm Clarity respects it.
  • Screenshots of “Tracking installed”, masking settings and IP blocking are saved in the client folder.
  • Change log updated: date, GTM version number, who published, and why.
  • Key recordings are favourited so they survive the 30-day limit, and linked in the findings sheet.
  • Findings sheet is shared with the client, ranked by likely impact on enquiries or sales.
  • You reported which page is losing leads and the next test, not just “heatmaps installed”.

Handover message to the client

Hi [Client name], heatmaps and session recordings are now live on [pages] through your own Clarity account, with sensitive fields masked. After [X] days we found [top finding], which may be costing enquiries. We recommend [next step]. Can we start the test on [date]?

Senior tip

Watch recordings of visitors who reached the enquiry form but didn’t submit. That one filter usually shows the costliest problem on the site faster than any heatmap.

Practice & check

Now do it for real

Reading is not doing. Open your own account and complete this task before you move on.

Practice task (5 min)

Install Clarity on a practice or client site. After 3 days, log three findings with a hypothesis and next step for each.

Prove it

1. Most visitors stop scrolling before your Enquire button. What does it suggest?
2. Why block your own IP address?

Two questions. Get both right and this SOP is done.

Common questions

Is Microsoft Clarity really free?

Yes. Clarity is free and includes heatmaps, session recordings and dashboards. Recordings are kept for 30 days, so save the important ones as favourites.

Do heatmaps slow down my website?

Slightly, like any script. Load it through Google Tag Manager and only keep tools you actually use.

What’s the difference between a heatmap and a session recording?

A heatmap combines many visits into one picture of clicks or scrolling. A recording replays one person’s visit.

Done. That’s a real skill, not a certificate.

Next: SOP 060 — Plan, Run and Analyse an A/B Test on Your Website →

Want to do this on real client budgets, with a mentor checking your work? That’s Level 2 at Unlearn. See the Digital Marketing track