Guides

How to Install a Heatmap on Your Website

Step-by-step guide to installing heatmap tracking on your website. Learn installation methods for Hotjar, Clarity, Crazy Egg, plus WordPress and Shopify-specific approaches.

UXHeat Team13 min read

How to Install a Heatmap on Your Website

Installing a heatmap tool is one of the highest-impact optimizations you can make—and it's faster than you think. Most setups take under 15 minutes.

This guide walks you through three installation methods (script insertion, Google Tag Manager, platform plugins), plus specific instructions for Hotjar, Clarity, and Crazy Egg, with bonus sections for WordPress and Shopify.

Three Installation Methods

Before we get to specific tools, understand your installation options:

Method 1: Direct Script Installation (Easiest)

What it is: Copy-paste a JavaScript snippet into your website's HTML

Time required: 5-10 minutes

Best for: Static sites, custom builds, developers

Pros:

  • Simplest method
  • Immediate implementation
  • No platform dependencies
  • Full control

Cons:

  • Requires HTML access
  • Not ideal for large codebases
  • Updates require manual changes

Steps:

  1. Get script from heatmap tool dashboard
  2. Add to <head> or before closing </body> tag
  3. Save and deploy
  4. Verify in dashboard within minutes

Method 2: Google Tag Manager (Most Flexible)

What it is: Deploy heatmap tracking through GTM instead of directly in code

Time required: 10-15 minutes

Best for: Teams using GTM, sites wanting tag management, complex deployments

Pros:

  • Manage all tracking from one place
  • No code changes needed
  • Easy to enable/disable
  • Audit trail of changes

Cons:

  • Requires GTM setup
  • Slight delay in tracking (GTM loads asynchronously)
  • Additional dependency

Steps:

  1. Create new tag in GTM
  2. Select heatmap tool template
  3. Add account ID or script
  4. Set trigger to "All Pages"
  5. Publish GTM container

Method 3: Native Plugins (Platform-Specific)

What it is: Use built-in plugins for WordPress, Shopify, or other platforms

Time required: 2-5 minutes

Best for: WordPress sites, Shopify stores, non-technical users

Pros:

  • Dead simple setup
  • No coding required
  • Automatic updates
  • Best platform integration

Cons:

  • Limited to supported platforms
  • Less customization
  • Plugin dependency

Steps:

  1. Search plugin marketplace for heatmap tool
  2. Install plugin
  3. Authenticate with heatmap account
  4. Activate

Installation Guide: Microsoft Clarity

Prerequisite

Free account at clarity.microsoft.com

Method 1: Direct Script Installation

Step 1: Get Your Tracking Script

  1. Log into Clarity dashboard
  2. Click "Projects" → Create new project (if needed)
  3. Go to "Settings" → "Installation"
  4. Copy the JavaScript snippet

The script looks like:

<script>
    (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 2: Insert Script Into Your Website

For a typical Next.js or React app:

Add to your _app.tsx or _document.tsx:

useEffect(() => {
  (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");
}, []);

For static HTML sites:

Add before closing </body>:

<script>
    (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 3: Deploy and Verify

  1. Deploy your site changes
  2. Visit your website
  3. Return to Clarity dashboard
  4. Within 1-2 minutes, you should see "Project Status: Active"

Method 2: Google Tag Manager

Step 1: Create GTM Account and Container

  1. Go to google.com/tagmanager
  2. Click "Create Account"
  3. Enter account name and website URL
  4. Create container and install GTM script on your site

Step 2: Add Clarity to GTM

  1. Log into Google Tag Manager
  2. Select your container
  3. Click "Tags" → "New"
  4. Tag name: "Clarity Analytics"
  5. Choose tag type: "Custom HTML"
  6. Paste Clarity's script snippet into the HTML field:
<script>
    (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 3: Set Trigger

  1. Under "Triggering," click "Trigger Configuration"
  2. Select "All Pages"

Step 4: Publish

  1. Click "Submit"
  2. Write a version description: "Add Clarity heatmaps"
  3. Click "Publish"

Clarity will track within 2-5 minutes.

Installation Guide: Hotjar

Prerequisite

Account at hotjar.com

Method 1: Direct Script Installation

Step 1: Get Your Hotjar Tracking Code

  1. Log into Hotjar
  2. Go to "Settings" → "Install Hotjar"
  3. Copy the Hotjar script:
<script>
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
    hj('identify',{userId:'123456'});
</script>
<script async src='https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=YOUR_VERSION'></script>

Step 2: Insert Into Your Website

For Next.js/React apps, add to _document.tsx:

<Head>
  <script>
    {`window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
    hj('identify',{userId:'123456'});`}
  </script>
  <script async src='https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=YOUR_VERSION'></script>
</Head>

For WordPress/HTML sites:

Add to site header (Theme Settings → Custom Code, or via child theme):

<script>
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
    hj('identify',{userId:'123456'});
</script>
<script async src='https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=YOUR_VERSION'></script>

Step 3: Verify

  1. Save and deploy changes
  2. Visit your website
  3. Open browser console (F12)
  4. Type hj — you should see the Hotjar object
  5. Hotjar dashboard should show "Hotjar is installed"

Method 2: WordPress Plugin

Step 1: Install Plugin

  1. In WordPress admin, go to "Plugins" → "Add New"
  2. Search for "Hotjar"
  3. Install official Hotjar plugin by Hotjar
  4. Activate

Step 2: Connect Account

  1. Go to "Hotjar" in WordPress left menu
  2. Click "Settings"
  3. Enter your Hotjar Site ID (from Hotjar dashboard → Settings → Install Hotjar)
  4. Save

Tracking begins immediately.

Method 3: Google Tag Manager

  1. Create "Custom HTML" tag in GTM
  2. Paste Hotjar script
  3. Set trigger to "All Pages"
  4. Publish

Same process as Clarity GTM implementation above.

Installation Guide: Crazy Egg

Prerequisite

Account at crazyegg.com

Method 1: Direct Script Installation

Step 1: Get Tracking Code

  1. Log into Crazy Egg
  2. Click "Settings" → "Install"
  3. Copy the Crazy Egg script:
<script type='text/javascript'>
  setTimeout(function(){var a=document.createElement("script");
  var b=document.getElementsByTagName("script")[0];
  a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/YOUR_ID.js?acc=YOUR_ACCOUNT_ID";
  a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, delay);
</script>

Step 2: Insert Into Your Website

For custom HTML sites, add before closing </body>:

<script type='text/javascript'>
  setTimeout(function(){var a=document.createElement("script");
  var b=document.getElementsByTagName("script")[0];
  a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/YOUR_ID.js?acc=YOUR_ACCOUNT_ID";
  a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 2000);
</script>

For Next.js apps, add to _document.tsx:

<body>
  {/* ... */}
  <script type='text/javascript'>
    {`setTimeout(function(){var a=document.createElement("script");
    var b=document.getElementsByTagName("script")[0];
    a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/YOUR_ID.js?acc=YOUR_ACCOUNT_ID";
    a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 2000);`}
  </script>
</body>

Step 3: Verify

  1. Deploy changes
  2. Visit your website
  3. Wait 5-10 minutes for initial data collection
  4. Check Crazy Egg dashboard for heatmaps

WordPress-Specific Installation

Option 1: Using Native WordPress Plugin

Best plugins:

  • Hotjar (official)
  • Clarity (Microsoft's official plugin)
  • MonsterInsights (supports heatmap integrations)

Installation:

  1. WordPress Admin → Plugins → Add New
  2. Search for heatmap tool name
  3. Click Install, then Activate
  4. Add your Site ID in plugin settings
  5. Tracking begins immediately

Option 2: Manual Installation (Any Heatmap Tool)

If your preferred tool lacks a WordPress plugin:

Step 1: Edit Your Theme

  1. WordPress Admin → Appearance → Theme File Editor
  2. Look for header.php or functions.php

Step 2: Add Tracking Script

For header.php, add before closing </head>:

<head>
  <!-- ... existing code ... -->
  <!-- Heatmap Script -->
  <script>
    [YOUR_HEATMAP_SCRIPT_HERE]
  </script>
</head>

For functions.php, add heatmap via hook:

add_action('wp_head', 'add_heatmap_script');
function add_heatmap_script() {
    ?>
    <script>
        [YOUR_HEATMAP_SCRIPT_HERE]
    </script>
    <?php
}

Step 3: Save

WordPress will validate syntax automatically.

Option 3: Using a Tag Manager Plugin

Instead of editing theme files directly:

  1. Install "Google Tag Manager for WordPress" plugin
  2. Add your GTM ID
  3. Deploy your heatmap script via GTM (see GTM section)

This keeps all tracking centralized and doesn't require theme editing.

Shopify-Specific Installation

Option 1: Using Shopify Apps

Many heatmap tools offer official Shopify apps:

Hotjar:

  1. Visit Shopify App Store
  2. Search "Hotjar"
  3. Click "Add app"
  4. Authorize and install
  5. Tracking begins immediately

Crazy Egg:

  1. Search "Crazy Egg" in Shopify App Store
  2. Install and authorize
  3. Add your Site ID in app settings

Step: Always check if your heatmap tool has an official Shopify app first—it's the simplest option.

Option 2: Manual Installation via Theme Code

If your tool lacks a Shopify app:

Step 1: Access Theme Editor

  1. Shopify Admin → Sales channels → Online Store → Themes
  2. Click your active theme
  3. Click "Edit code"

Step 2: Locate Theme Files

Look for theme.liquid (main template file).

Step 3: Add Heatmap Script

In theme.liquid, paste your heatmap script in the <head> section:

<head>
  <!-- ... existing code ... -->
  <script>
    [YOUR_HEATMAP_SCRIPT_HERE]
  </script>
</head>

Step 4: Save

Click "Save" in the top right. Changes deploy immediately.

Option 3: Using Shopify's Script Editor (Legacy)

Note: Shopify is phasing out Script Editor in favor of Checkout Extensibility, but for tracking scripts:

  1. Shopify Admin → Settings → Apps and integrations → Script Editor
  2. Click "Create script"
  3. Choose "Sales channel" or "Checkout" script type
  4. Paste your heatmap code
  5. Save

Not all heatmap tools work perfectly with Script Editor, so manual theme editing is more reliable.

Verifying Installation

Universal Verification Steps

After installing your heatmap code, verify it's working:

Step 1: Check Browser Console

  1. Visit your website
  2. Press F12 (Windows) or Cmd+Option+I (Mac)
  3. Click "Console" tab
  4. Check for errors (red messages)
  5. Look for heatmap confirmation (varies by tool):
    • Clarity: Look for a message mentioning your project ID
    • Hotjar: Type hj and press Enter—you should see a JavaScript object
    • Crazy Egg: Type CE_SNAPSHOT_DATA and press Enter—should return an object

Step 2: Check Tool Dashboard

  1. Log into your heatmap account
  2. Go to your project/site
  3. Check for "Status: Active" or similar indicator
  4. Within 5-30 minutes, you should see:
    • Green checkmark indicating tracking is live
    • Session count increasing
    • First heatmap data appearing

Step 3: Network Tab Verification

For advanced users:

  1. Open browser DevTools → Network tab
  2. Refresh page
  3. Filter for your heatmap tool's domain:
    • Clarity: clarity.ms
    • Hotjar: hotjar.com
    • Crazy Egg: crazyegg.com
  4. You should see successful (200) requests

Troubleshooting Verification Failures

Script not loading?

  1. Check console for syntax errors
  2. Verify account ID/Site ID is correct
  3. Ensure script isn't being blocked by privacy extensions
  4. Check that script placement is correct (not inside conditional blocks)

Tool dashboard shows inactive?

  1. Wait 5-10 minutes—sometimes dashboards lag
  2. Refresh browser or clear cache
  3. Verify you're on the correct website in tool settings
  4. Check that script tag uses exact ID from dashboard

Heatmap shows no data?

  1. Verify tracking is active first (see above steps)
  2. Wait 1-2 hours for initial data collection
  3. Generate traffic (visit multiple pages yourself)
  4. Check if filters are applied (e.g., device, date range filters)

Common Installation Issues and Solutions

Issue 1: Script Already Installed (Duplicate Tracking)

Problem: You install the heatmap script but later discover it was already installed by someone else.

Solution:

  1. Check your theme code carefully for existing scripts
  2. Search your codebase for the tool name
  3. Remove one copy—duplicate scripts waste bandwidth
  4. Verify with browser console that script still loads

Issue 2: Script Conflicts

Problem: Multiple tracking scripts cause page slowdown or errors.

Solution:

  1. Use Google Tag Manager instead of multiple direct scripts
  2. Combine related tracking under one platform
  3. Use async loading (already default in most heatmap tools)
  4. Test page speed before and after installation

Issue 3: Privacy Extension Blocks Script

Problem: Privacy extensions (uBlock Origin, Privacy Badger) block heatmap scripts.

Solution:

  1. This is normal—no need to "fix" it
  2. Use incognito/private browsing to test without blockers
  3. Document that some users won't be tracked (expected)
  4. Focus on tracking genuine visitors, not privacy-conscious users

Issue 4: Mobile Tracking Issues

Problem: Mobile heatmaps show incomplete data.

Solution:

  1. Most tools default to mobile tracking, but verify settings
  2. Check that app tracking is enabled (if mobile app)
  3. For web, ensure responsive design isn't breaking script
  4. Review mobile-specific heatmaps separately from desktop

Issue 5: Script Not Found After Deployment

Problem: Script appears in dev but not in production.

Solution:

  1. Verify you deployed changes (check deployment logs)
  2. Clear browser cache and hard refresh (Ctrl+Shift+R)
  3. Check console for 404 errors on script file
  4. Verify script path doesn't have typos (especially for self-hosted scripts)

Best Practices for Installation

Do:

  • ✓ Install to all pages (set trigger to "All Pages" in GTM)
  • ✓ Use async script loading (default in all modern tools)
  • ✓ Test in incognito/private browsing to avoid cache issues
  • ✓ Wait 24 hours before analyzing—let data accumulate
  • ✓ Use native plugins when available—simpler to maintain

Don't:

  • ✗ Duplicate scripts (only one instance per site)
  • ✗ Block scripts with privacy extensions during testing
  • ✗ Add scripts to <head> if alternative locations offered
  • ✗ Assume installation failed if no data appears in 5 minutes
  • ✗ Install multiple heatmap tools on high-traffic sites without testing speed impact

FAQ

How long after installation does heatmap data appear?

Most tools show initial data within 5-15 minutes. Hotjar and Crazy Egg may take 10-30 minutes. Full heatmaps (needing 50+ session samples) may take 1-2 hours to generate. Check your tool's documentation for exact expectations.

Do I need to install heatmaps on every page?

Set your installation to "all pages" when possible. Some pages (checkout, login) might be excluded for privacy reasons, but for analysis, comprehensive coverage is best. Most tools allow page-level filtering later.

Will heatmap tracking slow down my website?

Modern heatmap tools (Clarity, Hotjar, Crazy Egg) load asynchronously and have minimal impact (under 50ms load time). However, multiple tracking scripts can compound. Combine tracking under GTM or use a single primary tool.

What's the difference between Site ID and Account ID?

  • Site/Project ID: Unique identifier for your website within the heatmap tool
  • Account ID: Your overall account identifier Always use the Site ID—it's what appears in most installation codes.

Can I install a heatmap if I don't have code access?

Yes:

  1. Use Google Tag Manager (works on many platforms)
  2. Use native platform plugins (WordPress, Shopify)
  3. Ask your web host or developer to add the script
  4. For no-code sites, ask the platform directly

Do I need to install heatmaps on staging and production separately?

Ideally yes—use separate projects:

  • Staging project: Test heatmap functionality
  • Production project: Live user tracking

This prevents staging traffic from polluting production data.

Is it safe to install heatmap scripts?

Yes, from reputable tools (Clarity, Hotjar, Crazy Egg, PostHog). These are industry-standard tools used on millions of websites. That said:

  • Review privacy policies before installing
  • GDPR compliance may require user consent in Europe
  • Inform users about tracking in your privacy policy
  • Use Consent Management Platforms for explicit opt-in if required

Conclusion

Installing a heatmap is straightforward—usually under 15 minutes from start to verified tracking. Choose your installation method based on your setup:

  1. Easy: Use native plugins (WordPress, Shopify)
  2. Flexible: Deploy via Google Tag Manager
  3. Direct: Copy-paste script directly into your codebase

After installation, wait for data collection, then analyze what users are actually doing on your site.

The hardest part isn't installation—it's acting on the insights. But with heatmaps installed and tracking user behavior, you're positioned to make data-driven optimization decisions.

Want simpler heatmap analytics with fair pricing? UXHeat is launching soon with a focus on what matters most—clear insights without complexity. Join the waitlist to get early access.

Share:
Tags:install heatmapheatmap setupwebsite trackinghotjar setupclarity installation

Ready to See Your Heatmaps Smarter?

UXHeat uses AI to automatically find the insights hiding in your user behavior data. Join the waitlist and be first to try it.

Join the Waitlist

Related Articles

Guides

How to Set Up UXHeat in Under 1 Minute

Step-by-step guide to installing UXHeat on your website. One line of code, no configuration required. Start seeing heatmaps and AI insights in under 60 seconds.

7 min read
Guides

Checkout Conversion Optimization with Heatmaps

Complete guide to optimizing eCommerce checkout flows using heatmap data. Learn how to identify checkout friction, reduce cart abandonment, optimize payment flows, and increase conversion rates with real heatmap insights and tactical improvements.

25 min read
Guides

Heatmap A/B Testing: Best Practices for Data-Driven Optimization

Combine heatmaps with A/B testing to understand not just which variant wins, but why users prefer it. Complete guide covering test design, heatmap comparison strategies, common mistakes, tool recommendations, and real-world examples.

23 min read