chore(baseline): add glean metrics (#9391)

add data-glean attribute that can be set on anchors - for now, leaving
buttons and the other data attributes as they are - we might want to
remove and migrate them to data-glean in the future

client/src/document/baseline-indicator.tsx

@@ -1,4 +1,6 @@
 import { WebFeatureStatus } from "../../../libs/types/document";
+import { BASELINE } from "../telemetry/constants";
+import { useGleanClick } from "../telemetry/glean-context";
 import { Icon } from "../ui/atoms/icon";
 import "./baseline-indicator.scss";
 
@@ -9,6 +11,8 @@ const ENGINES = [
 ];
 
 export function BaselineIndicator({ status }: { status: WebFeatureStatus }) {
+  const gleanClick = useGleanClick();
+
   const supported = (browser: string) => {
     const version: string | boolean | undefined =
       status.support?.[browser.toLowerCase()];
@@ -37,6 +41,7 @@ export function BaselineIndicator({ status }: { status: WebFeatureStatus }) {
   return typeof status.is_baseline !== "undefined" ? (
     <details
       className={`baseline-indicator ${status.is_baseline ? "supported" : ""}`}
+      onToggle={(e) => e.currentTarget.open && gleanClick(BASELINE.TOGGLE_OPEN)}
     >
       <summary>
         <span
@@ -77,12 +82,20 @@ export function BaselineIndicator({ status }: { status: WebFeatureStatus }) {
         </p>
         <ul>
           <li>
-            <a href="/en-US/blog/baseline-unified-view-stable-web-features/">
+            <a
+              href="/en-US/blog/baseline-unified-view-stable-web-features/"
+              data-glean={BASELINE.LINK_LEARN_MORE}
+            >
               Learn more
             </a>
           </li>
           <li>
-            <a href="#browser_compatibility">See full compatibility</a>
+            <a
+              href="#browser_compatibility"
+              data-glean={BASELINE.LINK_BCD_TABLE}
+            >
+              See full compatibility
+            </a>
           </li>
         </ul>
       </div>

client/src/telemetry/constants.ts

@@ -61,3 +61,9 @@ export const VIEWPORT_BREAKPOINTS: readonly [ViewportBreakpoint, number][] =
     ["xs", 0],
   ]);
 export const THUMBS = "thumbs";
+
+export const BASELINE = Object.freeze({
+  TOGGLE_OPEN: "baseline_toggle_open",
+  LINK_LEARN_MORE: "baseline_link_learn_more",
+  LINK_BCD_TABLE: "baseline_link_bcd_table",
+});

client/src/telemetry/glean-context.tsx

@@ -141,12 +141,14 @@ function handleButtonClick(ev: MouseEvent, click: (source: string) => void) {
 }
 
 function handleLinkClick(ev: MouseEvent, click: (source: string) => void) {
-  const anchor = ev?.target as Element;
-  if (anchor?.nodeName === "A") {
+  const anchor = ev?.target;
+  if (anchor instanceof HTMLAnchorElement) {
     if (anchor?.classList.contains("external")) {
       click(`external-link: ${anchor.getAttribute("href") || ""}`);
     } else if (anchor?.hasAttribute?.("data-pong")) {
       click(`pong: ${anchor.getAttribute("data-pong") || ""}`);
+    } else if (anchor.dataset.glean) {
+      click(anchor.dataset.glean);
     }
   }
 }