Click track plugin (Heatmaps) - #1914
Open
eoghanmurray wants to merge 15 commits into
Open
Conversation
… identify ('triangulate') an element independently of the initial FullSnapshot. See https://github.com/antonmedv/Finder for inspiration on the CSS selector.
- record relX/relY in terms of the target element as well as the viewport
- walk up the DOM tree to prefer more significant targets (e.g. prefer a button instead of an icon inside the button)
- record (a substring of) innerText for a significant element\
- record hrefs on anchors so we can ensure the underlying anchor hasn't changed when we later match
This was originally explored as rrweb-io#503 and rrweb-io#659
…are more valuable for later verification
… element, and remove viewport x/y as that isn't really useful given the focus on a particular element. The viewport width at time of click is important for consideration of media queries (at different breakpoints elements might be displayed differently, and you wouldn't want to consider an element specified by a selector to necessarily be 'the same one')
…ry and re-titled semantic-selector
…t library and re-titled semantic-selector
…d to support a significant element vs. the actual element clicked (allowing us to easily record both)
🦋 Changeset detectedLatest commit: d18fd2f The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add a click track plugin which generates an additional event for each click (touch or mouse) in addition to the regular rrweb click event.
The regular click event only makes sense in relation to the replay state at the time of the click (viewport position, and the internal-to-rrweb id of the target element), whereas this plugin aims to extract 'semantic' information about the click, with the primary intended use-case being Heatmaps.
The plugin uses a css selector to identify ('triangulate') an element independently of the initial FullSnapshot, without regard to uniqueness on the page. I have developed and separately published the semantic-selector library to generate meaningful css selectors with the intention that the selector is useful longer term (in terms of page lifecycle) and is not overly affected by the current state of the page.
What it does:
innertarget, and in the case of shadowDom, to record the target from within the shadow rootThis was originally explored as #503 and #659
This is the first record-only plugin, there is deliberately no replay version as the existing click event covers that, but that is not stopping the plugin events from being made use of in or adjacent to the replayer e.g. for displaying enriched timeline info.