feat(replay): add "what to watch" screen #25717

raquelmsmith · 2024-10-21T19:58:30Z

Problem

People sometimes find it difficult to know where to start with replays. Our best advice is to think of a product area you want to focus on, and then drill down form there.

We can productize that advice by giving people a jumping-off point, suggestions for areas they can look into.

Changes

Adds a "what to watch" screen with "templates" suggesting things they might want to watch.

Screen.Recording.2024-10-21.at.12.44.49.PM.mov

TODO:

Figure out why feature flags filtering doesn't work
Put this behind a flag so I can test it live
Add spacing above add button
Figure out why the variables don't hide when I tell them to hide...

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

How did you test this code?

manually 🙈

posthog-bot · 2024-10-21T20:14:57Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

…sthog into feat/replay-templates

posthog-bot · 2024-10-21T21:09:28Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

raquelmsmith · 2024-10-21T21:12:32Z

frontend/src/scenes/session-recordings/templates/availableTemplates.ts

lmk if you have ideas for other templates. I want to keep the list short & easy to parse, but we can decide which ones are best.

we could add images copied from dashboard templates to the cards to make it look more like the dashboard templates list

(although arguably that's very visually busy and could be hard to parse)

we've got "purchase flow" and "pricing page" but I think they're really the same?

could possibly lose the B2B/B2C split too but I guess then it's just one big lump

could add a rage click one?

Oh rageclick is a good idea, will add! What about deadclicks - didn't you have some event sending for that?

we could add images copied from dashboard templates

I very much dislike that UI 😅 🙈 but I will experiment with some icons.

we've got "purchase flow" and "pricing page" but I think they're really the same?

I think they're different for b2b and b2c/ecommerce - one is when someone is viewing eg saas pricing before signup, the other is when someone is purchasing something directly (eg a pair or earrings or a hammer). I think they should be different templates.

could possibly lose the B2B/B2C split too but I guess then it's just one big lump

I'm gonna keep the split for now to (hopefully) make it easier for people to find the things that are relevant to them. But we can see what people use and go from there.

Added some icons

…sthog into feat/replay-templates

frontend/src/lib/lemon-ui/LemonCard/LemonCard.tsx

frontend/src/scenes/session-recordings/templates/sessionRecordingTemplatesLogic.tsx

pauldambra · 2024-10-21T21:38:18Z

frontend/src/scenes/session-recordings/templates/availableTemplates.ts

+    {
+        key: 'scattershot',
+        name: 'Scattershot',
+        description: 'Watch all recent replays, and see where users are getting stuck.',
+        variables: [],
+        categories: ['More'],
+    },


could replace this one with "by activity score"

if visual regression ever lets me merge #25701

i guess this is two points...
one let's have activity score
two do we need this scattershot one? since it's the equivalent of "not choosing a template"

no strong feeling but if you're looking to keep the list short

if we keep scattershot, it should actively set the ordering to recent
if someone has already changed sorting away from recent then they click on scattershot it doesn't reset

quite an edge case since not many folk change sorting

pauldambra · 2024-10-21T21:38:57Z

frontend/src/scenes/session-recordings/templates/availableTemplates.ts

@@ -0,0 +1,147 @@
+import { ReplayTemplateType } from '~/types'
+
+export const replayTemplates: ReplayTemplateType[] = [


could have a "sessions with errors"

any $exception event or console_error_count > 0

pauldambra

some typescript faff to solve but otherwise 🚢

(lots of comments only reflects being excited about the feature :))

frontend/src/scenes/session-recordings/templates/sessionRecordingTemplatesLogic.tsx

posthog-bot · 2024-10-22T08:56:49Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-10-22T09:15:32Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-10-22T11:00:47Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

pauldambra

couple of comments

but stamp so you can keep moving in case TZ overlap gets in the way 🙈

frontend/src/types.ts

frontend/src/scenes/session-recordings/templates/SessionRecordingTemplates.tsx

posthog-bot · 2024-10-22T11:19:50Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-10-22T17:10:36Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-10-22T17:29:30Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-10-22T17:48:08Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

github-actions · 2024-10-22T18:05:34Z

Size Change: +36 B (0%)

Total Size: 1.14 MB

ℹ️ View Unchanged

Filename	Size	Change
`frontend/dist/toolbar.js`	1.14 MB	+36 B (0%)

_{compressed-size-action}

posthog-bot · 2024-10-22T18:06:46Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (wasn't pushed!)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

raquelmsmith · 2024-10-22T18:17:19Z

automerged without full green checks, but only because of flapping, so it's fine

posthog-bot · 2024-10-22T18:25:26Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (wasn't pushed!)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

* master: fix(replay-templates): show event selector button, diff mobile filter (#25739) feat(replay): add "what to watch" screen (#25717) fix(events): Fix PostHog property filtering (#25732) fix(api): Apply org/team key scoping more narrowly (#25634) feat(Experiments): UX feedback from private beta of no-code experiments. (#25694) fix: playlist should track current session id (#25730) chore(data-warehouse): Set the stripe version when listing objects (#25729) chore(data-warehouse): Added extra props for hubspot syncs (#25728) revert: perf: Speed up filtering persons pt 2 (#25731) chore(deps): Update posthog-js to 1.174.3 (#25724) perf: Speed up filtering persons pt 2 (#25718) feat(alerts): toggle alert threshold lines (#25700) feat: watch next and sort different (#25701) feat(cdp): add microsoft teams template (#25652)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Paul D'Ambra <[email protected]>

raquelmsmith added 9 commits October 20, 2024 18:55

stub out a templates screen

fc13f80

hide new badge after view

6c98417

fix event filtering

6e545ed

improve UI

033aa42

use event selector

98819d2

improve

530e0c8

support other var types

533d773

handle immediate navigation

84bd5b4

put behind a flag

4935be7

raquelmsmith requested a review from a team October 21, 2024 19:58

raquelmsmith changed the title ~~stub out a templates screen~~ feat(replay): add "what to watch" screen Oct 21, 2024

Update UI snapshots for chromium (1)

44bd353

raquelmsmith and others added 6 commits October 21, 2024 13:46

fix types

01d3867

Merge branch 'feat/replay-templates' of https://github.com/PostHog/po…

5ef897a

…sthog into feat/replay-templates

trigger new snapshots

0c7797c

Merge branch 'master' into feat/replay-templates

c8e0b8d

space the button

8189a3b

Update UI snapshots for chromium (1)

40169d3

raquelmsmith commented Oct 21, 2024

View reviewed changes

raquelmsmith and others added 3 commits October 21, 2024 14:28

fix more types

70d2982

Merge branch 'feat/replay-templates' of https://github.com/PostHog/po…

48df2d3

…sthog into feat/replay-templates

computers are horrible

0183bac

pauldambra reviewed Oct 21, 2024

View reviewed changes

frontend/src/lib/lemon-ui/LemonCard/LemonCard.tsx Show resolved Hide resolved

pauldambra reviewed Oct 21, 2024

View reviewed changes

frontend/src/lib/lemon-ui/LemonCard/LemonCard.tsx Show resolved Hide resolved

pauldambra reviewed Oct 21, 2024

View reviewed changes

frontend/src/scenes/session-recordings/templates/sessionRecordingTemplatesLogic.tsx Show resolved Hide resolved

pauldambra reviewed Oct 21, 2024

View reviewed changes

pauldambra approved these changes Oct 21, 2024

View reviewed changes

Update UI snapshots for chromium (1)

2df129d

pauldambra reviewed Oct 22, 2024

View reviewed changes

frontend/src/scenes/session-recordings/templates/sessionRecordingTemplatesLogic.tsx Show resolved Hide resolved

Update UI snapshots for chromium (1)

6b69dd5

pauldambra force-pushed the feat/replay-templates branch from 0cde296 to 6b69dd5 Compare October 22, 2024 10:45

pauldambra and others added 2 commits October 22, 2024 11:47

types

a39f93d

Update UI snapshots for chromium (1)

6435aff

hmmm, not that

0fea18d

pauldambra approved these changes Oct 22, 2024

View reviewed changes

frontend/src/types.ts Outdated Show resolved Hide resolved

frontend/src/scenes/session-recordings/templates/SessionRecordingTemplates.tsx Show resolved Hide resolved

Update UI snapshots for chromium (1)

a117f97

raquelmsmith added 3 commits October 22, 2024 09:36

add mobile device template

44a8629

let someone use a URL for feature usage in case they don't have an event

f1aaed1

only select one flag

fb92fa6

fix types

a68c1a0

raquelmsmith force-pushed the feat/replay-templates branch from 9d69bcd to a68c1a0 Compare October 22, 2024 17:54

raquelmsmith enabled auto-merge (squash) October 22, 2024 17:54

raquelmsmith merged commit 45257c1 into master Oct 22, 2024
92 of 93 checks passed

raquelmsmith deleted the feat/replay-templates branch October 22, 2024 18:12

timgl pushed a commit that referenced this pull request Oct 25, 2024

feat(replay): add "what to watch" screen (#25717)

a352f25

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Paul D'Ambra <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(replay): add "what to watch" screen #25717

feat(replay): add "what to watch" screen #25717

raquelmsmith commented Oct 21, 2024 •

edited

Loading

posthog-bot commented Oct 21, 2024

posthog-bot commented Oct 21, 2024

raquelmsmith Oct 21, 2024

pauldambra Oct 21, 2024

pauldambra Oct 21, 2024

pauldambra Oct 21, 2024

raquelmsmith Oct 22, 2024

raquelmsmith Oct 22, 2024

raquelmsmith Oct 22, 2024

pauldambra Oct 21, 2024

pauldambra Oct 21, 2024

pauldambra Oct 21, 2024

pauldambra left a comment

posthog-bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

pauldambra left a comment

posthog-bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

raquelmsmith commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

		@@ -0,0 +1,147 @@
		import { ReplayTemplateType } from '~/types'

		export const replayTemplates: ReplayTemplateType[] = [

feat(replay): add "what to watch" screen #25717

feat(replay): add "what to watch" screen #25717

Conversation

raquelmsmith commented Oct 21, 2024 • edited Loading

Problem

Changes

Does this work well for both Cloud and self-hosted?

How did you test this code?

posthog-bot commented Oct 21, 2024

📸 UI snapshots have been updated

posthog-bot commented Oct 21, 2024

📸 UI snapshots have been updated

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pauldambra left a comment

Choose a reason for hiding this comment

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

pauldambra left a comment

Choose a reason for hiding this comment

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

github-actions bot commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

raquelmsmith commented Oct 22, 2024

posthog-bot commented Oct 22, 2024

📸 UI snapshots have been updated

raquelmsmith commented Oct 21, 2024 •

edited

Loading