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, and bulb: three different things
These three 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.
- 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, deepest scroll, or a submitted form's location.
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. - Yellow bar
#eab308: the real measured position of the submitted form, stretched to its actual length. Only present for conversions recorded after form position tracking was added. Older ones fall back to a single dot at the exit point.
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.