Skip to content
This repository has been archived by the owner on Sep 27, 2024. It is now read-only.

fix(analytics): capture engagement events on children of <a>'s #73

Merged
merged 4 commits into from
Nov 6, 2023
Merged

fix(analytics): capture engagement events on children of <a>'s #73

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ab44fd
fix(analytics): extend links listener to do engagement events
jpezninjo Oct 26, 2023
5586dd0
fix(analytics): refactor
jpezninjo Oct 26, 2023
27b2a6c
Merge branch 'main' into fix/analytics-capture-nested-clicks
jpezninjo Oct 30, 2023
d21f1ea
Merge branch 'main' into fix/analytics-capture-nested-clicks
jpezninjo Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions modules/glean/runtime/glean-plugin.client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,24 +33,41 @@ export default defineNuxtPlugin((nuxtApp) => {
}
}

function recordEngagement(element: Element) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

broke out the code in handleButtonClick to this re-usable function

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

used early returns instead of if-statements and optional chaining

if (!element)
return

if (!element.hasAttribute('data-glean'))
return

const data = element.getAttribute('data-glean') || ''
const value = element.getAttribute('data-glean-value') || ''
engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
}

function handleButtonClick(ev: MouseEvent) {
const eventTarget = ev?.target as Element
const closestButton = eventTarget.closest('button')

if (!closestButton)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This guard is a functional change. Currently, handleButtonClick captures engagement events on any element. Adding this guard is needed to prevent duplicate events from both here and handleLinkClick for clicks on links.

cc @wtfluckey

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love it

return

if (closestButton?.hasAttribute('href'))
linkClick.record({ target_url: closestButton.getAttribute('href') || '' })

const data = eventTarget?.getAttribute('data-glean') || ''
const value = eventTarget?.getAttribute('data-glean-value') || ''
if (eventTarget.hasAttribute('data-glean'))
engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
recordEngagement(eventTarget)
}

function handleLinkClick(ev: MouseEvent) {
const eventTarget = ev?.target as Element
const closestLink = eventTarget.closest('a')
if (closestLink)
linkClick.record({ target_url: closestLink.getAttribute('href') || '' })

if (!closestLink)
return

linkClick.record({ target_url: closestLink.getAttribute('href') || '' })

recordEngagement(closestLink)
Copy link
Author

@jpezninjo jpezninjo Oct 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

capturing of links engagement happens here

}

window.addEventListener('click', eventListener)
Expand Down