to make sure that our GA tracking works well on buttons, we can actually set that in Reactist ("at the source") so that we don't need to bother with it in todoist-web.
The result is that the inner span of any button element (both Reactist's Buttons and ButtonLinks) has the pointer-events: none property set:
Some more background
If we don't make this change (a.k.a. if we don't add pointer-events: none to our buttons), the user click will happen on the span nested inside the button (for Buttons) or inside the anchor tag a (for ButtonLinks).
However, since the data-gtm-id prop needed for our Google Analytics tracking gets set on the button or anchor tag a (and not on the span nested inside them), the tracking of the user click will not work.
What we do instead is to make the span non-clickable so that the click will happen on the button or anchor tag a instead, which is achieved by setting pointer-events: none on the elements inside the button.
PR Checklist
[ ] Added tests for bugs / new features
[ ] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[x] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
[x] Updated all static build artifacts (npm run build-all)
Versioning
Just a patch bump (v17.10.0 -> v17.0.1) as this is not really a new feature. However, I would not bet my family on the fact that this doesn't break anything for clients... 😅 So I appreciate any input.
Short description
While reviewing https://github.com/Doist/todoist-web/pull/5709, Ernesto suggested that, instead of sprinkling our todoist-web code with:
and
to make sure that our GA tracking works well on buttons, we can actually set that in Reactist ("at the source") so that we don't need to bother with it in todoist-web.
The result is that the inner
spanof any button element (both Reactist'sButtons andButtonLinks) has thepointer-events: noneproperty set:Some more background
If we don't make this change (a.k.a. if we don't add
pointer-events: noneto our buttons), the user click will happen on the span nested inside thebutton(forButtons) or inside the anchor taga(forButtonLinks).However, since the
data-gtm-idprop needed for our Google Analytics tracking gets set on thebuttonor anchor taga(and not on the span nested inside them), the tracking of the user click will not work.What we do instead is to make the span non-clickable so that the click will happen on the
buttonor anchor tagainstead, which is achieved by settingpointer-events: noneon the elements inside the button.PR Checklist
npm run validateand made sure no errors / warnings were shownCHANGELOG.mdpackage.jsonandpackage-lock.json(npm --no-git-tag-version version <major|minor|patch>) refnpm run build-all)Versioning
Just a patch bump (v17.10.0 -> v17.0.1) as this is not really a new feature. However, I would not bet my family on the fact that this doesn't break anything for clients... 😅 So I appreciate any input.