Session replay
Every page a lead visited is drawn as a small rectangle, in order, left to right, scaled to that page's real height. Below is a made-up example session with four pages, built to show every signal in one place. It is interactive: click a frame.
Click any frame above. This is the exact detail panel a real dashboard shows.
Frame, plate, bulb, and the form imitation: four different things
These four words get used precisely from here on, matching exactly what the code itself calls them, so they need to be told apart once, clearly.
- Frame: the whole colored column for one page visit, or one gap. Its width changes with how long that visit lasted. Its color is what "gray," "yellow," "orange" below actually refer to.
- Plate: the smaller rectangle inside the frame. This is the actual miniature of the real page, always the same width, its height scaled to that specific page's real height. The shaded seen and unseen areas live here, not on the frame.
- Form imitation: an inset box drawn inside the plate, at the form's real measured position — narrower than the plate itself, so the seen/seen-twice shading stays visible either side of it. See below for exactly when it appears and what the stripes inside it mean.
- Bulb: a small marker sticking out from the plate's own edge, not the frame's edge. Each one marks one specific moment or position: enter, exit, or deepest scroll.
The form imitation box, precisely
It appears whenever a form on that page was ever seen at least 50% on screen — which needs no interaction at all, not typing, not even focusing a field, just scrolling it into view. That means it can show up on a visit that never converted and never even started the form: seeing it is enough. If a form was never scrolled into view at all on a given visit, the box does not appear — there is nothing to measure yet, so nothing is drawn.
- Darker yellow
#eab308: the form was seen, and maybe started, but not submitted on this visit. - Bright yellow
#fde047: the form was actually submitted on this visit.
The white stripes inside it are fields — but specifically, fields that were actually clicked into at least once. A field nobody ever focused leaves no trace at all, so the stripe count is a floor on the form's real field count, never the true total. However many there are, they always stay inside the box: each stripe's thickness is the box's own height divided by the field count, so more fields means thinner stripes, not an overflowing box.
Frame colors, exact values
- Gray
var(--fp-frame-exited, #1c1c1c): a normal page visit, nothing unusual. - Yellow
#a6821b: a form on this page was submitted. - Orange
#cc5624: a form on this page was started, never submitted. - Purple
#5a4080: not a page. Time spent away from the site between two page views. - Blue
#0e7490: the visitor is looking at this exact page right now.
The whole chart also gets a #15803d border while the session itself has not ended yet. That is a different signal from any one frame's color, and can be true even after the visitor has moved on from whichever page is drawn last.
The seen and unseen bands inside a plate
- Lighter fill
#068e1d: content they scrolled past once. - Darker fill
#0f3d1c: content their scroll position crossed twice, once going down, once coming back up. - Unfilled
var(--fp-plate, #111111): never on screen at all during that visit.
The bulbs, exact values
- Green
#22c55e: where they entered the page. - Red
#ef4444: where they were when they left it. - Blue
#3b82f6: the furthest point they ever scrolled to on that page.
There used to be a fourth, yellow bulb marking a converted page's form position. It is now the form imitation box described above for anything tracked since; the single-point yellow bulb only still appears as a fallback for a conversion recorded before form position tracking existed at all.
Headings and the one-screen-height lines
The small zigzag marks on the plate stand in for a heading on the real page, at the actual position it sits on that page. The dashed lines mark every multiple of one full screen's height, scaled to whatever device that particular visit happened on, so a phone visit and a desktop visit to the same page do not use the same spacing.