Record clicks via glean's builtin element click recording feature

src/components/ActiveClients.js

@@ -142,14 +142,15 @@ const ActiveClients = () => {
                     <Link
                       className='text-decoration-none'
                       to={`/pings/${debugId}`}
+                      data-glean-label='Debug ID Pings'
                       onClick={() => {
                         recordClick("Debug ID Pings");
                       }}
                     >
                       Pings
                     </Link>
                     <br />
-                    <Link className='text-decoration-none' to={`/stream/${debugId}`} onClick={() => {
+                    <Link className='text-decoration-none' to={`/stream/${debugId}`} data-glean-label='Debug ID Event Stream' onClick={() => {
                       recordClick("Debug ID Event Stream")
                     }}>
                       Event Stream

src/components/Breadcrumbs.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import useBreadcrumbs from 'use-react-router-breadcrumbs';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import { isUuid } from '../lib/isUuid';
 import { recordClick } from '../lib/telemetry';
@@ -15,7 +16,10 @@ const Breadcrumbs = () => {
   const breadcrumbs = useBreadcrumbs();
 
   return (
-    <div style={{ marginLeft: '0.5rem', paddingLeft: 16, marginBottom: 15 }} onClick={() => {recordClick('Breadcrumbs')}}>
+    <div style={{ marginLeft: '0.5rem', paddingLeft: 16, marginBottom: 15 }} onClick={() => {
+      recordClick('Breadcrumbs');
+      GleanMetrics.recordElementClick({'label': 'Breadcrumbs'});
+      }}>
       {breadcrumbs.map(({ breadcrumb, key, location, match }) => {
         // `/pings` & `/stream` are included in the routes, but they don't have
         // their own pages, so we can hide it from our breadcrumbs.

src/components/DebugTagPings/components/DebugTagPingsComponent.js

@@ -221,14 +221,19 @@ const DebugTagPings = ({ debugId }) => {
               </td>
               {!!numberOfErrors && <ErrorField ping={ping} />}
               <td className='actions'>
-                <Link to={`/pings/${debugId}/${ping.key}`} onClick={() => {recordClick('Details')}}>Details</Link>
+                <Link to={`/pings/${debugId}/${ping.key}`} data-glean-label='Details' onClick={() => {
+                  recordClick('Details');
+                }}>Details</Link>
                 <br />
-                <a target='_blank' rel='noopener noreferrer' href={jsonToDataURI(ping.payload)} onClick={() => {recordClick('Raw JSON')}}>
+                <a target='_blank' rel='noopener noreferrer' href={jsonToDataURI(ping.payload)} data-glean-label='Raw JSON' onClick={() => {
+                  recordClick('Raw JSON');
+                  }}>
                   Raw JSON
                 </a>
                 <br />
                 <button
                   className='btn btn-sm btn-outline-secondary'
+                  data-glean-label='Copy Payload'
                   onClick={handleCopyPayload(ping.key, ping.payload, 'Copy Payload')}
                 >
                   {!!copySuccessKey && copySuccessKey === ping.key ? 'Copied!' : 'Copy Payload'}

src/components/DebugTagPings/components/Filter.js

@@ -105,6 +105,7 @@ const Filter = ({ pings, handleFilter, handleFiltersApplied }) => {
       {!showOptions && (
         <button
           type='button'
+          data-glean-label='Add Filters'
           onClick={() => {handleToggleRenderOptions('Add Filters')}}
           className='btn btn-sm btn-outline-secondary'
         >

src/components/NavBar.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import { auth } from '../Firebase';
 
@@ -32,7 +33,10 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
             >
               <div></div>
               <div className='navbar-nav' role='presentation'>
-                <div className='nav-item nav-link cursor-pointer' onClick={() => {recordClick('Theme')}}>
+                <div className='nav-item nav-link cursor-pointer' onClick={() => {
+                    recordClick('Theme');
+                    GleanMetrics.recordElementClick({'label': 'Theme'});
+                  }}>
                   <ThemeToggle theme={theme} toggleTheme={themeToggler} />
                 </div>
                 <div className='nav-item nav-link cursor-pointer'>
@@ -41,13 +45,19 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                     target='_blank'
                     rel='noopener noreferrer'
                     style={{ all: 'unset ' }}
-                    onClick={() => {recordClick('Bug')}}
+                    onClick={() => {
+                      recordClick('Bug');
+                      GleanMetrics.recordElementClick({'label': 'Bug'});
+                    }}
                   >
                     <BugIcon />
                   </a>
                 </div>
                 <div className='nav-item nav-link cursor-pointer'>
-                  <Link to={`/help`} style={{ all: 'unset' }} onClick={() => {recordClick('Help')}}>
+                  <Link to={`/help`} style={{ all: 'unset' }} onClick={() => {
+                    recordClick('Help');
+                    GleanMetrics.recordElementClick({'label': 'Help'});
+                  }}>
                     <HelpIcon />
                   </Link>
                 </div>
@@ -56,6 +66,7 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                   type='btn btn-lg '
                   onClick={() => {
                     recordClick('Sign out');
+                    GleanMetrics.recordElementClick({'label': 'Sign out'});
                     auth.signOut();
                   }}
                 >

src/components/ReadMore.js

@@ -6,6 +6,7 @@
 
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 import { recordClick } from '../lib/telemetry';
 
 const ReadMore = ({ numberOfLines = 3, text }) => {
@@ -26,6 +27,7 @@ const ReadMore = ({ numberOfLines = 3, text }) => {
     <div className='cursor-pointer' onClick={
       () => {
         recordClick('Expand payload');
+        GleanMetrics.recordElementClick({'label': 'Expand payload'});
         setShow((prev) => !prev)}}
     >
       <span

src/components/ReturnToTop.js

@@ -23,6 +23,7 @@ const ReturnToTop = () => {
     <button
       className='return-to-top btn btn-sm btn-outline-secondary'
       style={{ display: visible ? 'block' : 'none' }}
+      data-glean-label='Back to top'
       onClick={() => {
         // record this click event
         recordClick('Back to top');

src/components/ShowRawPing/components/ShowRawPing.js

@@ -271,6 +271,7 @@ const ShowRawPing = ({ docId }) => {
                     id={anchorId}
                     className='no-select cursor-pointer line-link'
                     style={{ paddingRight: '8px' }}
+                    data-glean-label='Line number'
                     onClick={handleLineNumberClick(lineNumber)}
                   >
                     {padStringLeft(lineNumber.toString(), maxNumberOfDigits, " ")}

src/lib/telemetry.js

@@ -35,6 +35,7 @@ export function initTelemetryClient(useSendBeacon=false) {
     maxEvents: 1,
     channel: process.env.REACT_APP_ENV,
     httpClient: useSendBeacon ? BrowserSendBeaconUploader : undefined,
+    enableAutoElementClickEvents: true,
   });
 }