♻️ [RUMF-1368] use the PointerDown event target for click actions#1731
Merged
Conversation
* dispatch `pointerdown` and `pointerup` events * add a duration between those events
BenoitZugmeyer
force-pushed
the
benoit/heatmap--get-pointerdown-target
branch
from
September 13, 2022 10:26
f9048b9 to
5d3342e
Compare
BenoitZugmeyer
marked this pull request as ready for review
September 13, 2022 12:26
bcaudan
reviewed
Sep 14, 2022
Codecov Report
@@ Coverage Diff @@
## main #1731 +/- ##
=======================================
Coverage 90.97% 90.98%
=======================================
Files 128 128
Lines 4944 4958 +14
Branches 1101 1103 +2
=======================================
+ Hits 4498 4511 +13
- Misses 446 447 +1
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
liywjl
approved these changes
Sep 15, 2022
bcaudan
approved these changes
Sep 15, 2022
3 tasks
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
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.
Motivation
Click target inaccuracy
When the click starts (mouse/pointer down) on an element and ends (mouse/pointer up) on another element, the
clickevent target is set to theBODYelement by the browser. This is problematic, because we report clicks occuring on theBODYeven if the user uses a whole other element. This impacts the RUM click action target name (@action.target.name), as well as the experimental heatmaps CSS selector generation.Using the
pointerdownevent target instead improves the situation: the element used to compute the action target name and CSS selector is the element the user intended to click.Heatmap CSS selector improvement
Some application add a temporary class name when an element is being clicked (similarly to the
:activeCSS pseudo-class) or focused. Those temporary class names blocks us from finding again the element when rendering the Heatmap again.Generating the CSS selector before the application UI reacts to it should improve the situation a bit (
pointerdownis the first event triggered when a click occurs).Frustration signal follow-up
This change is also a first step in fixing one of the most common dead click false positive cases: currently, we are only watching for page activity during or following a
clickevent. But in some cases the application updates the UI earlier (ex: onmousedown,focus...). Those kind of clicks we are incorrectly considered a click as "dead".In a future follow-up, we'll fix this by watching page activity during or following the
pointerdownevent as well, to avoid marking those clicks as "dead".Changes
Beside a bit of refactoring, the main change was to update the
listenActionEventsto call a callback onpointerdown. This callback can return aonClickclosure that will be called during the nextclickevent. This allows to build the target-related properties earlier and still build theClickduring theclickevent.Testing
Notes
This PR does not fix the issue in the recorder part: clicks event will still be reported on the
bodyelement when the element target changes between mousedown and mouseup. This should not matter too much, as the click position is also collected.To keep backward compatibility, the
eventsend as context in thebeforeSendcallback is still theclickevent.I have gone over the contributing documentation.