Click heatmaps that respect visitor privacy
Alytics offers click heatmaps, element heatmaps, and scroll depth visualization with automatic PII masking. No session recordings, no cookies, no personal data collection.
No credit card required
Three ways to visualize visitor behavior
Alytics provides three complementary heatmap types, each designed to answer different questions about how visitors interact with your pages.
Click Heatmaps
Coordinate-based overlay showing exactly where visitors click. Aggregated across all visitors for a given page. Visualized as a heat overlay on your actual page layout.
Element Heatmaps
CSS selector-based aggregation that groups clicks by HTML element. Shows which buttons, links, and interactive elements get the most engagement. More stable across layout changes.
100%
0%
82%
25%
54%
50%
23%
75%
Scroll Depth
Percentage-based bands showing how far visitors scroll. Identify where visitors lose interest. Helps optimize content placement and page length.
Heatmaps without compromising privacy
Every heatmap feature in Alytics is designed with privacy as a constraint, not an afterthought. Data is sanitized before it leaves the visitor's browser.
Automatic PII Masking
Three modes — strict (masks all text), balanced (masks form inputs and personal data), relaxed (masks only explicitly marked elements). DOM snapshots are cleaned before transmission.
No Session Recording
Alytics does not record browsing sessions. Heatmaps aggregate click coordinates across visitors rather than replaying individual sessions. This is a deliberate privacy design choice.
Sampling & Performance
The heatmap module lazy-loads only when sampling conditions are met. Click events are batched and throttled to minimize performance impact. DOM snapshots use gzip compression.
How Alytics heatmaps work
Heatmap data collection is designed to be lightweight and privacy-safe. Here is the full pipeline from page load to visualization.
- 1
Tracker script loads on page
The core analytics script (5.8 KB) initializes on page load.
- 2
Configuration fetched from Alytics API
Heatmap settings and sample rate are retrieved for this site.
- 3
Sample rate check
Only a percentage of visits capture heatmap data, keeping overhead low.
- 4
Heatmap module lazy-loaded
Not included in the initial 5.8 KB script — loaded on demand.
- 5
DOM snapshot captured
After a 1-second delay, CSS is inlined, PII is masked, and the snapshot is gzip compressed.
- 6
Click coordinates tracked
Clicks are recorded relative to page elements for accurate overlay rendering.
- 7
Events deduplicated and batched
Click events are deduplicated and sent in batches to minimize network requests.
Heatmap tools compared
Most heatmap tools rely on session recordings and cookies. Alytics takes a fundamentally different approach by aggregating interaction data without tracking individuals.
| Feature | Alytics | Hotjar | Microsoft Clarity | Matomo |
|---|---|---|---|---|
| Click heatmaps | ✓ | ✓ | ✓ | ✓ (paid plugin) |
| Element heatmaps | ✓ | ✗ | ✗ | ✗ |
| Scroll depth | ✓ | ✓ | ✓ | ✓ (paid plugin) |
| Session recording | ✗ (by design) | ✓ | ✓ | ✓ (paid plugin) |
| Automatic PII masking | ✓ | Partial | ✓ | ✗ |
| Cookie-free | ✓ | ✗ | ✗ | ✗ (default) |
| Included in analytics | ✓ | Separate tool | Separate tool | Paid plugin (~$200/yr) |
| Privacy-first | ✓ | ✗ | ✗ | Partial |
Heatmaps FAQ
Does Alytics record browsing sessions?
No. Alytics deliberately does not offer session recording. Heatmaps aggregate click data across all visitors rather than replaying individual sessions. This is a core privacy design choice.
What are the PII masking modes?
Strict masks all text content in DOM snapshots. Balanced masks form inputs and detected personal data. Relaxed only masks elements you explicitly mark. All modes are applied before data leaves the visitor's browser.
Do heatmaps impact page performance?
Minimal impact. The heatmap module lazy-loads only when sampling conditions are met, so most visitors never load it. Click tracking uses event delegation and batched transmissions to minimize overhead.
Do heatmaps work with single-page applications?
Yes. Alytics detects SPA route changes and captures new DOM snapshots and click data for each virtual page navigation.
What is the difference between click and element heatmaps?
Click heatmaps show exact click coordinates as a heat overlay. Element heatmaps aggregate clicks by CSS selector, showing which HTML elements receive the most interaction. Element heatmaps are more stable across layout changes and responsive designs.
See where your visitors click
Add Alytics to your site and start visualizing visitor behavior with privacy-friendly heatmaps. No cookies, no session recordings, no personal data.
No credit card required