Heatmap Analytics Tool

Show Dashboard Pricing Hide Dashboard
  • Select the "Show Dashboard" button. Recording paused.
  • Select "Hide Dashboard" button. Recording resumes.
What You Get:

Heatmap Analytics Tool

$50
One-time Payment
Top Features Included:
Heatmap Visualization - Points that follow elements during scrolling
Session Playback - Replay user sessions with anchored points
Attention Depth Analytics - Visualize where users focus
Complete Source Code - You own everything, no recurring fees
*Introductory Pricing

Frequently Asked Questions

How to Use:
  1. Click the "Heatmap" button to visualize all user clicks
  2. Observe colored dots representing click density across the page
  3. Scroll up and down to test dynamic positioning
Key Features:
  • Smart Positioning: Points stay anchored to their original elements and move with page content during scrolling
  • Intensity-Based Colors: Red = high click density, Blue = low click density
  • Size Indicates Frequency: Larger dots = more clicks in that specific location
  • Real-time Adjustment: Points automatically reposition when dynamic content changes (panels, modals, accordions)
  • Scroll-Aware: Heatmap refreshes positions automatically after scrolling stops
  • Element-Bound: Clicks remain accurately placed within their containers even when layout shifts
  • Exclusion Support: Easily exclude specific elements from tracking using CSS selectors
Analytical Insights:
  • Identify popular vs. ignored areas of your page
  • Detect accidental clicks or mis-click patterns
  • Optimize button placement and call-to-action positioning
  • Understand how users interact with dynamic content sections
  • Reveal usability issues with scrolling behavior and element visibility
  • Compare interaction patterns across different page states and layouts

How to Use:
  1. Click the "Play" button to replay a user session
  2. Watch as numbered points appear in sequence showing click order
  3. Observe connecting lines that trace the user's movement path
  4. Scroll during playback to see points anchored to their elements
  5. Use "Prev" and "Next" buttons to navigate between sessions
  6. Notice numeric gaps? This indicates that dynamic panels or other hidden elements were visible during data capture
Key Features:
  • Dynamic Positioning: Points automatically reposition when scrolling - they stay anchored to their original elements
  • Sequential Numbering: Numbers show the exact order of user interactions (1, 2, 3, etc.)
  • Movement Lines: Colored lines connect points to visualize the user's navigation path
  • Numeric Gaps: Missing numbers indicate interactions with hidden or dynamic elements that aren't currently visible
Analytical Insights:
  • Understand user navigation patterns and flow through your interface
  • Identify where users interact with dynamic content (modals, dropdowns, expandable sections)
  • Detect usability issues with hidden or hard-to-find elements
  • Analyze the sequence of interactions to optimize user journeys
  • Compare different users' approaches to completing tasks

How to Use:
  1. Click the "Stats" button to reveal each statistic
  2. Continue clicking "Stats" to cycle through all available metrics
  3. View visualizations for attention depth and other analytics
  1. Total Sessions: Overall number of user sessions recorded
  2. Unique Sessions: Number of distinct users based on user IDs
  3. Total Clicks: Combined count of all interactions across sessions
  4. Taps versus Clicks: Number of taps vs clicks and sessions by device
  5. Attention Depth: Concentration of clicks in specific areas of the page.
What Attention Depth Measures:
  1. High Attention Depth (80-100%): Clicks concentrated in small vertical area - users focusing intensely on specific section
  2. Low Attention Depth (0-30%): Clicks scattered across the page - users interacting with multiple different areas
Visual Representation:
  • Colored bands showing where clicks are concentrated
  • Percentage labels indicating % of total clicks in each band
  • Click markers showing number of click positions within segments
  • Optimization: Identify if users are focusing where you want them to
In Your Visualization:
  • Red bands = Highest concentration areas
  • Blue bands = Lower concentration areas
  • White dots = Individual click positions
  • Percentage labels = Proportion of total clicks in each segment

  • Integrate into existing websites and applications
  • Customize the visual appearance to match your brand
  • Extend functionality with additional analytics
  • Modify data collection to track custom events
  • Scale the solution to handle high traffic volumes
  • White-label for client projects

Setup Instructions: