Crazy Egg

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me heatmaps that replace Crazy Egg — and know exactly why this is ALMOST.

The recording is easy. The hard part is that **a click at 390 pixels wide and one at 1440 are not the same click**. A heatmap that averages across breakpoints is a picture of nothing, and that single problem is why this category is harder than it looks. Solve it and the tool is genuinely useful; ignore it and you have a colourful lie.

STACK
- Node 20+ with Fastify
- SQLite through better-sqlite3, WAL mode
- A tracking script under 6KB gzipped, from my own domain
- Playwright for the page snapshots
- Caddy in front

THE DATA MODEL
- pages: id, site_id, path_pattern, name, is_active
- snapshots: id, page_id, breakpoint, image_path, dom_html_gzip, width, height, captured_at — the page as it looked, per breakpoint, so a map can be drawn over it later
- clicks: id, page_id, snapshot_id, breakpoint, x_ratio, y_ratio, element_selector, element_text, viewport_w, viewport_h, doc_h, scroll_y, is_rage, is_dead, session_hash, bot, at
- scrolls: id, page_id, breakpoint, session_hash, max_scroll_ratio, doc_h, at
- moves: bucketed, not raw — a grid cell and a count, because storing every pointer position is a great deal of data for very little insight
- experiments and variants, if you build the testing half
- Every event carries the breakpoint bucket. Nothing is ever aggregated across them

BREAKPOINTS, WHICH IS THE PROBLEM
- Define buckets — phone, tablet, small desktop, large desktop — and record which one every event belongs to
- Every map is drawn per bucket, over a snapshot taken at that width. Never one map over one screenshot
- Coordinates stored twice: as a ratio of the viewport, and as a selector plus an offset within the element. The second is what survives a layout change, and it is what makes the map still meaningful after a redesign
- An element-based map — this button was clicked 412 times — is more useful than a pixel cloud on almost every site, and it is immune to reflow. Build that first and treat the pixel map as the illustration

SCROLL DEPTH
- Normalised against the document height at the time, per breakpoint, because a page is a different length on a phone
- Report the percentage of people who reached each section, with the fold marked. That is the number people act on
- Record the document height with every event, or a page whose content changed will produce nonsense

CLICKS WORTH KNOWING ABOUT
- Rage clicks: several clicks in a small area within a second or two, which usually means something looks interactive and is not
- Dead clicks: a click on something that produced no navigation, no network request and no visible change
- Both flagged at capture time and listed separately, with the element. Those two lists are the most actionable output of the whole tool

SNAPSHOTS
- Render the page with a real browser at each breakpoint on a schedule, storing the image and the markup
- Deterministic: fonts settled, animations stopped, lazy images loaded, external requests blocked
- A page that changes often needs a fresh snapshot, or the map is drawn over the wrong layout. Detect it by comparing a hash of the structure and warn

BOTS AND HONESTY
- Flag, never drop, and exclude through a SQL view
- A minimum session count before a map is shown, with the count displayed. A heatmap of forty visits looks convincing and means nothing, and stating the sample is the difference between analysis and decoration

PRIVACY
- No input values, ever. Record that a field was clicked, never what was typed
- Mask text in the snapshot by selector for anything sensitive
- No cookie beyond a session-scoped identifier, no third-party requests

OPERATIONS
- .env: DATABASE_PATH, STORAGE_PATH, BASE_URL, HASH_SALT, SESSION_SECRET
- Migrations on boot, each once; retention with a sweeper
- Health endpoint

WHAT MATTERS MOST
Per-breakpoint maps and element-based coordinates. Build those before any colour is drawn, and put the sample size next to every map.