Heatmaps in PostHog App

[benjackwhite]

Is your feature request related to a problem?

We currently have clickmaps and (soon) heatmaps and scroll depth in the Toolbar. This is great as it allows you to get information relative to the page you are looking at and is very interactive.

This isn't the "norm" however and people likely expect to have something they can find in the normal PostHog app.

Describe the solution you'd like

A Heatmaps section where you can open any page of your app and see a representation of it with the choice to overlay heatmap data, scroll depth or maybe even autocapture data.

There are two options I can see - either we embed your website and take advantage of the toolbar to do most of the heavy lifting, meaning whatever we build for the toolbar works in the web app and vice versa (creating actions etc.), or we take screenshots of the website in question and overlay data on top of it

Iframe based solution

Started here

Pros

• Shows the real website so can get around issue to with being logged in or not
• Allows autocapture as the Toolbar will be present so can build the existing clickmap info
• Shows off the Toolbar in a way that people might not have known existed

Cons

• Without the correct iframe headers it could easily be blocked
• More complicated state as we would need to sync any config options through to the toolbar
• Not easily saveable as a screenshot or something
• Tricky to do screen widths bigger than the parent window (we would need some sort of scaling logic to make the iframe fit the screen which in turn means the rendered toolbar UI will be wierd and almost need reverse scaling 🤔

Screenshot based solution

Pros

• As long as we can reach the website it should almost never fail to render
• Easy to have fixed viewports and scale them accordingly to always fit in the UI.
• No complexity in terms of having to sync with the toolbar
• Easier to "freeze" with the image content

Cons

• Couldn't do clickmap (autocapture) events as we would only have an image
• Harder to allow the user to get the visual part into a state they want
• Would never work for "logged in" apps reducing this use case primarily to public content such as marketting websites and login pages
• Would need to duplicate some or all of the toolbar code to work in this screenshot context which is of course different.

Describe alternatives you've considered

Roadmap for release

• [x] First concept in place https://github.com/PostHog/posthog/pull/21535
• [ ] Add controls to the main UI so that we can sync over iframe messages
• [ ] protect against iframe solution being used for iframe injection attack
• [ ] Detect if the toolbar and show a message if not and how to troubleshoot (sending them to the toolbar instead)

Thank you for your feature request – we love each and every one!

[pauldambra]

should include this https://github.com/PostHog/posthog/issues/21604 and filtering by other things e.g. https://posthog.com/questions/heatmaps-by-feature-flags

[pauldambra]

syncing controls https://github.com/PostHog/posthog/pull/22522