Merge pull request #1895 from abhi-agg/improve-click-events

[Bug 1885504] Improve automatic click events for nested elements

Author: rosahbruno

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 [Full changelog](https://github.com/mozilla/glean.js/compare/v4.1.0-pre.0...main)
 
+* [#1895](https://github.com/mozilla/glean.js/pull/1895): Improve automatic click events for nested elements.
+
 # v4.1.0-pre.0 (2024-03-05)
 
 [Full changelog](https://github.com/mozilla/glean.js/compare/v4.0.0...v4.1.0-pre.0)

glean/src/core/glean_metrics.ts

@@ -97,6 +97,25 @@ namespace GleanMetrics {
     });
   }
 
+  /**
+   * Construct click event context for a given element.
+   *
+   * The element should have at least one of the data-glean-{x} attributes where x corresponds
+   * to the keys of ElementClickEventContext).
+   *
+   * @param element Element object.
+   * @returns ElementClickEventContext
+   */
+  function constructClickEventContextForElement(element: Element) {
+    const dataset = (element as HTMLElement).dataset;
+    const elementClickEventContext: ElementClickEventContext = {
+      ...(dataset.gleanId && { id: dataset.gleanId }),
+      ...(dataset.gleanType && { type: dataset.gleanType }),
+      ...(dataset.gleanLabel && { label: dataset.gleanLabel })
+    };
+    return elementClickEventContext;
+  }
+
   /**
    * Handler for "click" events on a document.
    *
@@ -106,14 +125,15 @@ namespace GleanMetrics {
    * @param event Event object.
    */
   export function handleClickEvent(event: Event) {
-    const htmlElement = event.target as HTMLElement;
+    const clickedElement = event.target as Element;
+    const closestElementWithClickAttributes: Element | null = clickedElement.closest("[data-glean-id], [data-glean-type], [data-glean-label]");
 
-    const elementClickEventContext: ElementClickEventContext = {};
-    if (htmlElement?.dataset?.gleanId) elementClickEventContext.id = htmlElement?.dataset?.gleanId;
-    if (htmlElement?.dataset?.gleanType) elementClickEventContext.type = htmlElement?.dataset?.gleanType;
-    if (htmlElement?.dataset?.gleanLabel) elementClickEventContext.label = htmlElement?.dataset?.gleanLabel;
+    if (!closestElementWithClickAttributes) {
+      return;
+    }
 
-    if (Object.keys(elementClickEventContext).length > 0) recordElementClick(elementClickEventContext);
+    const elementClickEventContext: ElementClickEventContext = constructClickEventContextForElement(closestElementWithClickAttributes);
+    recordElementClick(elementClickEventContext);
   }
 
   /**