From 9ab44fde6545b2a490f01aaf2f5301427a2ca6c1 Mon Sep 17 00:00:00 2001 From: Joseph Perez Date: Thu, 26 Oct 2023 09:23:19 -0700 Subject: [PATCH 1/2] fix(analytics): extend links listener to do engagement events --- modules/glean/runtime/glean-plugin.client.ts | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/modules/glean/runtime/glean-plugin.client.ts b/modules/glean/runtime/glean-plugin.client.ts index 96f8e9fe06..f16b027ae4 100644 --- a/modules/glean/runtime/glean-plugin.client.ts +++ b/modules/glean/runtime/glean-plugin.client.ts @@ -33,6 +33,17 @@ export default defineNuxtPlugin((nuxtApp) => { } } + function recordEngagement(element: Element) { + if (!element) + return + + const data = element.getAttribute('data-glean') || '' + if (element.hasAttribute('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') @@ -40,17 +51,16 @@ export default defineNuxtPlugin((nuxtApp) => { 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) + if (closestLink) { linkClick.record({ target_url: closestLink.getAttribute('href') || '' }) + recordEngagement(closestLink) + } } window.addEventListener('click', eventListener) From 5586dd0b118e6a06f0111d720710ea39fa6a8a6f Mon Sep 17 00:00:00 2001 From: Joseph Perez Date: Thu, 26 Oct 2023 13:00:14 -0700 Subject: [PATCH 2/2] fix(analytics): refactor --- modules/glean/runtime/glean-plugin.client.ts | 23 +++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/modules/glean/runtime/glean-plugin.client.ts b/modules/glean/runtime/glean-plugin.client.ts index f16b027ae4..55cb9bad94 100644 --- a/modules/glean/runtime/glean-plugin.client.ts +++ b/modules/glean/runtime/glean-plugin.client.ts @@ -37,17 +37,21 @@ export default defineNuxtPlugin((nuxtApp) => { if (!element) return + if (!element.hasAttribute('data-glean')) + return + const data = element.getAttribute('data-glean') || '' - if (element.hasAttribute('data-glean')) { - const value = element.getAttribute('data-glean-value') || '' - engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] }) - } + 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) + return + if (closestButton?.hasAttribute('href')) linkClick.record({ target_url: closestButton.getAttribute('href') || '' }) @@ -57,10 +61,13 @@ export default defineNuxtPlugin((nuxtApp) => { function handleLinkClick(ev: MouseEvent) { const eventTarget = ev?.target as Element const closestLink = eventTarget.closest('a') - if (closestLink) { - linkClick.record({ target_url: closestLink.getAttribute('href') || '' }) - recordEngagement(closestLink) - } + + if (!closestLink) + return + + linkClick.record({ target_url: closestLink.getAttribute('href') || '' }) + + recordEngagement(closestLink) } window.addEventListener('click', eventListener)