How to track user activity on your website (heatmaps, clicks)

🧠 Step 1: What are “Heatmaps” and “Tracking”?

Let’s keep it simple:

Term	What it means
Heatmap	A colored map that shows where people click or scroll on your page. “Hot” (red/orange) areas mean many clicks; “cool” (blue) areas mean few clicks.
Session recording	A short screen replay showing exactly how a visitor moved, clicked, and scrolled — like watching over their shoulder.
Analytics	Numbers and charts that show how many people visit, how long they stay, and which pages they like.

🧰 Step 2: Pick a Heatmap or Tracking Tool

There are easy, free or low-cost tools that do the job. Here are some good beginner options:

Tool	Free plan?	What it does
Microsoft Clarity	✅ Yes (completely free)	Click heatmaps + session recordings
Hotjar	✅ Limited free version	Click & scroll heatmaps, user recordings
Smartlook	✅ Free for small sites	Tracks clicks, mouse movements
Crazy Egg	❌ Paid (free trial)	Visual heatmaps & A/B tests

💡 Tip: Microsoft Clarity is 100% free and super easy to use — perfect for beginners.

🖥️ Step 3: Sign Up for the Tool

Let’s use Microsoft Clarity as our example since it’s free and powerful.

Go to 👉 https://clarity.microsoft.com
Sign up with your Microsoft account (or create one).
Click “Add a new project.”
Enter your website name and URL (example: https://mycoolsite.com).
Clarity will now show you a little code snippet — something like this:

<script type="text/javascript">
   (function(c,l,a,r,i,t,y){
       c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
       t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
       y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
   })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>

🧩 Step 4: Paste the Code into Your Website

You’ll need to paste that code right before the </head> tag in your website’s HTML.

Here’s how:

Option 1 — WordPress:

Login to your dashboard.
Go to Appearance → Theme File Editor → header.php
Find this part near the top:
```
<head>
```
Scroll down until you see this line:
```
</head>
```

Paste the Clarity code just before it:

<script>…clarity code…</script>
</head>

Click Update File.

✅ Done! Clarity will now start tracking your visitors automatically.

Option 2 — Other websites (manual HTML):

If your site is not WordPress, just open your HTML file and paste that same script before </head>.

Example:

<html>
  <head>
    <title>My Cool Site</title>
    <script>…clarity code…</script>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

🕒 Step 5: Wait a Little

It usually takes 1–2 hours for the first data to appear.
Then you’ll start seeing:

Heatmaps — colored spots where people click or scroll.
Session recordings — videos of how real visitors move around your site.
Insights — where people leave your page, or where they get stuck.

🔍 Step 6: Read the Results

Once data starts coming in:

Red areas = lots of clicks.
Blue or grey = fewer clicks.
Long scroll areas = people read more.
Short scroll areas = they leave early.

This helps you decide what to fix. For example:

Move buttons to where people click most.
Shorten boring sections no one scrolls to.
Highlight popular parts visitors focus on.

⚡ Bonus: Add Google Analytics (for numbers)

If you also want to track visits and page views, add Google Analytics.
It’s another small code you paste on your site.

Example setup:

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

This tells you things like:

How many people visited today
Which country they came from
Which page is most popular

🧾 Quick Visual Summary (Text Diagram)

[Visitor]
   ↓
[Clicks / Scrolls on Your Website]
   ↓
[Heatmap Tracking Code (e.g., Clarity)]
   ↓
[Clarity Dashboard]
   ↓
[You see colors, recordings, and stats!]

💡 Summary — Simple Checklist

Task	Done
Sign up for a heatmap tool (Clarity, Hotjar, etc.)	☐
Copy the tracking code	☐
Paste it before `</head>` on your website	☐
Wait for data (1–2 hours)	☐
View heatmaps and recordings	☐
Improve your site based on what users do	☐

Lia Techwave

Search This Blog