docs: session replay

This commit is contained in:
Carl-Gerhard Lindesvärd
2026-02-27 11:22:12 +01:00
parent 9c6c7bb037
commit cd112237e9
9 changed files with 627 additions and 27 deletions

View File

@@ -0,0 +1,166 @@
{
"slug": "session-replay",
"short_name": "Session replay",
"seo": {
"title": "Session Replay - Watch Real User Sessions | OpenPanel",
"description": "Replay real user sessions to understand exactly what happened. Privacy-first session replay with masking controls, unlimited recordings, and 30-day retention.",
"keywords": [
"session replay",
"session recording",
"user session replay",
"hotjar alternative",
"privacy-first session replay"
]
},
"hero": {
"heading": "See exactly what your users did",
"subheading": "Replay any user session to see clicks, scrolls, and interactions. Privacy controls built in. Loaded async so it never slows down your site.",
"badges": [
"Unlimited replays",
"30-day retention",
"Privacy controls built in",
"Async—zero bundle bloat"
]
},
"definition": {
"title": "What is session replay?",
"text": "Session replay lets you watch a structured recording of what a real user did during a visit to your site or app. You see every click, scroll, form interaction, and page navigation—played back in order.\n\nMost analytics tools tell you **what happened in aggregate**: 40% of users dropped off at step 2. Session replay shows you **why**: you can watch someone struggle with a confusing form label, miss a button, or hit an error state you didn't know existed.\n\nOpenPanel session replay is built on [rrweb](https://www.rrweb.io/), an open-source recording library. It captures DOM mutations and user interactions as structured data—not video. This matters because:\n\n- **Privacy is easier to manage** — you control exactly what gets recorded with CSS selectors, not hoping a video blur is accurate\n- **Storage is efficient** — structured data compresses far better than video\n- **Playback is instant** — no buffering or waiting for video to load\n\nSession replay in OpenPanel is **opt-in and off by default**. When disabled, the replay script is never loaded and adds zero bytes to your page. When enabled, the recorder is fetched asynchronously as a separate script, so your main analytics bundle stays lean regardless.\n\nPrivacy controls are first-class:\n\n- **All inputs masked by default** — form field values are never recorded\n- **Block any element** with a data attribute or CSS selector\n- **Mask specific text** without blocking the surrounding layout\n- **Ignore interactions** on sensitive elements\n\nReplays are linked to sessions, events, and user profiles. When a user reports a bug, you can pull up their session in seconds and see exactly what happened—no need to ask them to reproduce it."
},
"capabilities_section": {
"title": "What you get with session replay",
"intro": "Everything you need to understand real user behavior, with privacy controls built in from the start."
},
"capabilities": [
{
"title": "Full session playback",
"description": "Replay any recorded session from start to finish. See clicks, scrolls, form interactions, and navigation in the exact order they happened."
},
{
"title": "Linked to events and profiles",
"description": "Replays are tied to the user's session, event timeline, and profile. Jump from a funnel drop-off directly to the replay for context."
},
{
"title": "Input masking by default",
"description": "All form field values are masked out of the box. You see that a user typed something—not what they typed. Disable per-field if needed."
},
{
"title": "Block and mask controls",
"description": "Block entire elements from recording with a data attribute or CSS selector. Mask specific text. Ignore interactions on sensitive areas."
},
{
"title": "Async loading—zero bundle impact",
"description": "The replay module loads as a separate async script. When replay is disabled it's never fetched. When enabled it doesn't block your main bundle."
},
{
"title": "Unlimited replays, 30-day retention",
"description": "No cap on the number of sessions recorded. Every replay is stored for 30 days and available for playback at any time."
}
],
"screenshots": [
{
"src": "/features/feature-sessions.webp",
"alt": "Session overview showing user sessions with entry pages and duration",
"caption": "Browse all sessions. Click any one to open the replay."
},
{
"src": "/features/feature-sessions-details.webp",
"alt": "Session detail view showing events in order",
"caption": "The session timeline shows every event alongside the replay."
}
],
"how_it_works": {
"title": "How session replay works",
"intro": "Enable it once and every qualifying session is recorded automatically.",
"steps": [
{
"title": "Enable replay in your init config",
"description": "Set `sessionReplay: { enabled: true }` in your OpenPanel init options. That's all the configuration required to start recording."
},
{
"title": "The replay script loads asynchronously",
"description": "When a session starts, OpenPanel fetches the replay module (`op1-replay.js`) as a separate async script. It doesn't block page load or inflate your main bundle."
},
{
"title": "Interactions are captured and sent in chunks",
"description": "The recorder captures DOM changes and user interactions and sends them to OpenPanel in small chunks every 10 seconds and on page unload."
},
{
"title": "Replay any session from the dashboard",
"description": "Open any session in the dashboard and hit play. The replay reconstructs the user's exact experience. Jump to specific events from the timeline."
}
]
},
"use_cases": {
"title": "Who uses session replay",
"intro": "Teams that need to understand real user behavior beyond what metrics alone can show.",
"items": [
{
"title": "Product teams",
"description": "When the data says users drop off at a specific step, session replay shows you exactly why. See confusion, missed CTAs, and error states you didn't know existed."
},
{
"title": "Support and success teams",
"description": "When a user reports a bug or a confusing experience, pull up their session replay in seconds. You see what they saw—no need to ask them to reproduce it."
},
{
"title": "Privacy-conscious teams",
"description": "Input masking is on by default. Block sensitive UI with a data attribute. You get the behavioral insight without recording personal data."
}
]
},
"related_features": [
{
"slug": "session-tracking",
"title": "Session tracking",
"description": "Structured session data—entry pages, event timelines, duration—without requiring replay."
},
{
"slug": "event-tracking",
"title": "Event tracking",
"description": "Custom events appear alongside replays in the session timeline."
},
{
"slug": "funnels",
"title": "Funnels",
"description": "Jump from a funnel drop-off step directly to the session replay to understand why."
}
],
"faqs": {
"title": "Frequently asked questions",
"intro": "Common questions about session replay with OpenPanel.",
"items": [
{
"question": "Is session replay enabled by default?",
"answer": "No. Session replay is opt-in. You enable it by setting `sessionReplay: { enabled: true }` in your init config. When disabled, the replay script is never fetched and adds zero overhead to your page."
},
{
"question": "Does enabling session replay slow down my site?",
"answer": "No. The replay module loads as a separate async script (`op1-replay.js`), independent of the main tracking bundle (`op1.js`). It's fetched after the page loads and does not block rendering or the main analytics script."
},
{
"question": "How is this different from Hotjar or FullStory?",
"answer": "Hotjar and FullStory record video-like streams. OpenPanel captures structured DOM events using rrweb. The result looks similar in the viewer, but structured data gives you finer-grained privacy controls (CSS-selector masking, element blocking) and is more storage-efficient. OpenPanel is also open-source and can be self-hosted."
},
{
"question": "Are form inputs recorded?",
"answer": "No. All input field values are masked by default (`maskAllInputs: true`). You see that a user interacted with a field, but not what they typed. You can disable this on a per-field basis if needed."
},
{
"question": "How long are replays stored?",
"answer": "Replays are retained for 30 days. There is no limit on the number of sessions recorded."
},
{
"question": "Can I block specific parts of my UI from being recorded?",
"answer": "Yes. Add `data-openpanel-replay-block` to any element to replace it with a placeholder in the replay. Use `data-openpanel-replay-mask` to mask specific text. Both the attribute names and the CSS selectors they target are configurable."
},
{
"question": "Does session replay work with self-hosted OpenPanel?",
"answer": "Yes. When self-hosting, the replay script is served from your instance automatically. You can also override the script URL with the `scriptUrl` option if you host it on a CDN."
}
]
},
"cta": {
"label": "Start recording sessions",
"href": "https://dashboard.openpanel.dev/onboarding"
}
}

View File

@@ -2,31 +2,32 @@
"slug": "session-tracking",
"short_name": "Session tracking",
"seo": {
"title": "Session Tracking Without Replays - Privacy-First",
"description": "Understand user sessions from entry to exit-without recordings or privacy risk. See pages visited, events fired, and session duration with privacy-first analytics.",
"title": "Session Tracking - Understand User Journeys | OpenPanel",
"description": "Understand user sessions from entry to exit. See pages visited, events fired, and session duration. Optionally add session replay to watch exactly what users did.",
"keywords": [
"session tracking analytics",
"user session tracking",
"session analysis without replay"
"session analysis",
"session replay analytics"
]
},
"hero": {
"heading": "What happened in the session",
"subheading": "Pages visited, events fired, time spent. No recordings, no privacy risk. You still get the full picture.",
"subheading": "Pages visited, events fired, time spent. Full structured session data—and optional session replay when you need to go deeper.",
"badges": [
"No session recordings",
"Privacy-first by design",
"Entry-to-exit visibility",
"Sessions linked to events"
"Sessions linked to events",
"Optional session replay"
]
},
"definition": {
"title": "What is session tracking?",
"text": "A session is the **window of activity** between a user arriving on your site and leaving. It starts with an entry page, includes every page view and event along the way, and ends when the user goes idle or closes the tab.\n\nMost analytics tools either give you **too little** (aggregated page-view counts with no sense of flow) or **too much** (full session recordings that raise privacy concerns and take hours to review). OpenPanel sits in the middle: you get a **structured timeline** of what happened in each session, without recording a single pixel of the user's screen.\n\nFor every session, OpenPanel captures:\n\n- **Entry page and exit page** - where the user started and where they left\n- **Pages visited in order** - the path through your site or app\n- **Events fired** - signups, clicks, feature usage, or any custom event\n- **Session duration** - how long the session lasted\n- **Referrer and UTM parameters** - how the user got there\n- **Device, browser, and location** - context without fingerprinting\n\nThis means you can answer questions like:\n\n- **What pages do users visit before signing up?**\n- **Do users from organic search behave differently than paid traffic?**\n- **How long are sessions for users who convert vs. those who don't?**\n\nUnlike session replay tools (Hotjar, FullStory, LogRocket), there are **no recordings to watch**, **no PII captured on screen**, and **no consent banners** needed for video replay. You get the analytical value of sessions without the privacy overhead.\n\nSessions in OpenPanel connect directly to **events and user profiles**. Every event belongs to a session, and every session belongs to a user. This means funnels, retention, and user timelines all have session context built in."
"text": "A session is the **window of activity** between a user arriving on your site and leaving. It starts with an entry page, includes every page view and event along the way, and ends when the user goes idle or closes the tab.\n\nMost analytics tools either give you **too little** (aggregated page-view counts with no sense of flow) or **too much** (full session recordings that can be slow to review). OpenPanel gives you both options:\n\n- **Session tracking** (always on) — a structured timeline of what happened in each session: pages visited, events fired, duration, referrer, and device context\n- **[Session replay](/features/session-replay)** (opt-in) — a playable recording of the session built on [rrweb](https://www.rrweb.io/), so you can see exactly what the user clicked and where they got confused\n\nFor every session, OpenPanel captures:\n\n- **Entry page and exit page** - where the user started and where they left\n- **Pages visited in order** - the path through your site or app\n- **Events fired** - signups, clicks, feature usage, or any custom event\n- **Session duration** - how long the session lasted\n- **Referrer and UTM parameters** - how the user got there\n- **Device, browser, and location** - context without fingerprinting\n\nThis means you can answer questions like:\n\n- **What pages do users visit before signing up?**\n- **Do users from organic search behave differently than paid traffic?**\n- **How long are sessions for users who convert vs. those who don't?**\n\nSession replay is **opt-in and off by default**. When disabled, the replay script is never loaded and adds no overhead. When enabled, it loads asynchronously as a separate script so your main analytics bundle stays lean.\n\nSessions in OpenPanel connect directly to **events and user profiles**. Every event belongs to a session, and every session belongs to a user. This means funnels, retention, and user timelines all have session context built in."
},
"capabilities_section": {
"title": "What you get with session tracking",
"intro": "Structured session data that answers real questions-without the privacy cost of recordings."
"intro": "Structured session data that answers real questionswith optional replay when you need to see the full picture."
},
"capabilities": [
{
@@ -35,7 +36,7 @@
},
{
"title": "Page flow per session",
"description": "View the ordered sequence of pages a user visited in a session. Understand navigation patterns without watching a recording."
"description": "View the ordered sequence of pages a user visited in a session. Understand navigation patterns at a glance."
},
{
"title": "Events within a session",
@@ -50,8 +51,8 @@
"description": "Know how users arrived-organic search, paid campaign, direct link-and compare session quality across sources."
},
{
"title": "Device and location context",
"description": "Capture browser, OS, and approximate location for each session. No fingerprinting-just standard request headers."
"title": "Session replay (opt-in)",
"description": "Enable session replay to record and play back real user sessions. Privacy controls built ininputs masked by default. Loads async so it never bloats your bundle."
}
],
"screenshots": [
@@ -63,7 +64,7 @@
{
"src": "/features/feature-sessions-details.webp",
"alt": "Session events timeline showing user actions in order",
"caption": "Every event tied to its session. Understand user journeys without replay tools."
"caption": "Every event tied to its session. Drill into the timeline or open the replay."
}
],
"how_it_works": {
@@ -80,29 +81,34 @@
},
{
"title": "Sessions connect to everything",
"description": "Each session links to the user profile, the events fired, and the pages visited. This means funnels, retention, and user timelines all include session context."
"description": "Each session links to the user profile, the events fired, and the pages visited. Enable session replay to also record a playable video of the session."
}
]
},
"use_cases": {
"title": "Who uses session tracking",
"intro": "Teams that need to understand user journeys without the overhead of session replays.",
"intro": "Teams that need to understand user journeys, from structured data to full session replay.",
"items": [
{
"title": "Product teams",
"description": "Understand how users navigate your product. See the page flow and events in a session to identify friction points-without watching hours of recordings."
"description": "Understand how users navigate your product. See the page flow and events in a session, then open a replay to see exactly where users got stuck."
},
{
"title": "Support and success teams",
"description": "When a user reports an issue, pull up their recent sessions to see what pages they visited and what events they triggered. Context without asking \"can you describe what you did?\""
"description": "When a user reports an issue, pull up their recent sessions to see what pages they visited and what events they triggered. Open the replay for the full picture."
},
{
"title": "Privacy-conscious teams",
"description": "Get session-level insights without recording user screens. No PII in screenshots, no video consent banners, no GDPR headaches from replay data."
"description": "Session tracking works without cookies or recordings. Session replay is opt-in, with inputs masked by default and granular controls to block or mask any sensitive element."
}
]
},
"related_features": [
{
"slug": "session-replay",
"title": "Session replay",
"description": "Watch real user sessions. See clicks, scrolls, and form interactions played back in the dashboard."
},
{
"slug": "event-tracking",
"title": "Event tracking",
@@ -119,8 +125,8 @@
"intro": "Common questions about session tracking with OpenPanel.",
"items": [
{
"question": "How is this different from session replay tools like Hotjar or FullStory?",
"answer": "Session replay tools record a video of the user's screen. OpenPanel doesn't record anything visual-it tracks structured data: which pages were visited, which events were triggered, and how long the session lasted. You get the analytical answers without the privacy cost or the hours spent watching recordings."
"question": "Does OpenPanel have session replay?",
"answer": "Yes. Session replay is available as an opt-in feature. Enable it by setting `sessionReplay: { enabled: true }` in your init config. When disabled, the replay script is never loaded. See the [session replay docs](/docs/session-replay) for setup and privacy options."
},
{
"question": "Do I need to set up session tracking separately?",
@@ -132,7 +138,7 @@
},
{
"question": "Can I see individual user sessions?",
"answer": "Yes. You can view a user's session history, including the pages they visited and events they triggered in each session. This is available in the user profile view."
"answer": "Yes. You can view a user's session history, including the pages they visited and events they triggered in each session. This is available in the user profile view. If session replay is enabled, you can also play back the session."
},
{
"question": "Does session tracking require cookies?",
@@ -144,4 +150,4 @@
"label": "Start tracking sessions",
"href": "https://dashboard.openpanel.dev/onboarding"
}
}
}