chore(telemetry): remove and migrate GA measurements to Glean

client/src/document/index.tsx

@@ -46,6 +46,8 @@ import { useInteractiveExamplesActionHandler as useInteractiveExamplesTelemetry
 import { BottomBanner, SidePlacement } from "../ui/organisms/placement";
 import { BaselineIndicator } from "./baseline-indicator";
 import { PlayQueue } from "../playground/queue";
+import { useGleanClick } from "../telemetry/glean-context";
+import { CLIENT_SIDE_NAVIGATION } from "../telemetry/constants";
 // import { useUIStatus } from "../ui-context";
 
 // Lazy sub-components
@@ -66,6 +68,7 @@ export class HTTPError extends Error {
 
 export function Document(props /* TODO: define a TS interface for this */) {
   const ga = useGA();
+  const gleanClick = useGleanClick();
   const isServer = useIsServer();
 
   const mountCounter = React.useRef(0);
@@ -139,22 +142,24 @@ export function Document(props /* TODO: define a TS interface for this */) {
   React.useEffect(() => {
     if (doc && !error) {
       if (mountCounter.current > 0) {
+        const location = window.location.toString();
         // 'dimension19' means it's a client-side navigation.
         // I.e. not the initial load but the location has now changed.
         // Note that in local development, where you use `localhost:3000`
         // this will always be true because it's always client-side navigation.
         ga("set", "dimension19", "Yes");
         ga("send", {
           hitType: "pageview",
-          location: window.location.toString(),
+          location,
         });
+        gleanClick(`${CLIENT_SIDE_NAVIGATION}: ${location}`);
       }
 
       // By counting every time a document is mounted, we can use this to know if
       // a client-side navigation happened.
       mountCounter.current++;
     }
-  }, [ga, doc, error]);
+  }, [ga, gleanClick, doc, error]);
 
   React.useEffect(() => {
     const location = document.location;

client/src/site-search/index.tsx

@@ -4,15 +4,18 @@ import { useIsServer } from "../hooks";
 import { Loading } from "../ui/atoms/loading";
 import { MainContentContainer } from "../ui/atoms/page-content";
 import { useGA } from "../ga-context";
+import { useGleanClick } from "../telemetry/glean-context";
 import "./index.scss";
 import { SidePlacement } from "../ui/organisms/placement";
+import { CLIENT_SIDE_NAVIGATION } from "../telemetry/constants";
 
 const SiteSearchForm = React.lazy(() => import("./form"));
 const SearchResults = React.lazy(() => import("./search-results"));
 
 export function SiteSearch() {
   const isServer = useIsServer();
   const ga = useGA();
+  const gleanClick = useGleanClick();
   const [searchParams] = useSearchParams();
 
   const query = searchParams.get("q");
@@ -33,21 +36,23 @@ export function SiteSearch() {
   React.useEffect(() => {
     if (ga) {
       if (mountCounter.current > 0) {
+        const location = window.location.toString();
         // 'dimension19' means it's a client-side navigation.
         // I.e. not the initial load but the location has now changed.
         // Note that in local development, where you use `localhost:3000`
         // this will always be true because it's always client-side navigation.
         ga("set", "dimension19", "Yes");
         ga("send", {
           hitType: "pageview",
-          location: window.location.toString(),
+          location,
         });
+        gleanClick(`${CLIENT_SIDE_NAVIGATION}: ${location}`);
       }
       // By counting every time a document is mounted, we can use this to know if
       // a client-side navigation happened.
       mountCounter.current++;
     }
-  }, [query, page, ga]);
+  }, [query, page, ga, gleanClick]);
 
   return (
     <div className="main-wrapper site-search">

client/src/site-search/search-results.tsx

@@ -9,7 +9,6 @@ import { appendURL } from "./utils";
 import { Button } from "../ui/atoms/button";
 
 import "./search-results.scss";
-import { useGA } from "../ga-context";
 import NoteCard from "../ui/molecules/notecards";
 
 import LANGUAGES_RAW from "../../../libs/languages";
@@ -85,7 +84,6 @@ class ServerOperationalError extends Error {
 }
 
 export default function SearchResults() {
-  const ga = useGA();
   const [searchParams] = useSearchParams();
   const locale = useLocale();
   // A call to `/api/v1/search` will default to mean the same thing as
@@ -112,15 +110,6 @@ export default function SearchResults() {
         throw new Error(`${response.status} on ${url}`);
       }
 
-      // See docs/experiments/0001_site-search-x-cache.md
-      const xCacheHeaderValue = response.headers.get("x-cache");
-      ga("send", {
-        hitType: "event",
-        eventCategory: "Site-search X-Cache",
-        eventAction: url,
-        eventLabel: xCacheHeaderValue || "no value",
-      });
-
       return await response.json();
     },
     {

client/src/telemetry/constants.ts

@@ -24,6 +24,8 @@ export const PLAYGROUND = "play_action";
 export const AI_EXPLAIN = "ai_explain";
 export const SETTINGS = "settings";
 
+export const A11Y_MENU = "a11y_menu";
+
 export const MENU = Object.freeze({
   CLICK_LINK: "menu_click_link",
   CLICK_MENU: "menu_click_menu",
@@ -71,3 +73,6 @@ export const BASELINE = Object.freeze({
   LINK_BCD_TABLE: "baseline_link_bcd_table",
   LINK_FEEDBACK: "baseline_link_feedback",
 });
+
+export const CLIENT_SIDE_NAVIGATION = "client_side_nav";
+export const LANGUAGE = "language";

client/src/ui/molecules/a11y-nav/index.tsx

@@ -1,11 +1,12 @@
 import { useLocation } from "react-router-dom";
 
-import { useGA } from "../../../ga-context";
+import { useGleanClick } from "../../../telemetry/glean-context";
 
 import "./index.scss";
+import { A11Y_MENU } from "../../../telemetry/constants";
 
 export function A11yNav() {
-  const ga = useGA();
+  const gleanClick = useGleanClick();
   const { pathname } = useLocation();
   const showLangMenuSkiplink = pathname.includes("/docs/");
 
@@ -16,14 +17,8 @@ export function A11yNav() {
    */
   function sendAccessMenuItemClick(event) {
     const action = new URL(event.target.href).hash;
-    const label = event.target.textContent;
 
-    ga("send", {
-      hitType: "event",
-      eventCategory: "Access Links",
-      eventAction: action,
-      eventLabel: label,
-    });
+    gleanClick(`${A11Y_MENU}: click ${action}`);
   }
 
   return (

client/src/ui/organisms/article-actions/language-menu/index.tsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 
-import { useGA } from "../../../../ga-context";
+import { useGleanClick } from "../../../../telemetry/glean-context";
 import { Translation } from "../../../../../../libs/types/document";
 import { Button } from "../../../atoms/button";
 import { Submenu } from "../../../molecules/submenu";
 
 import "./index.scss";
 import { DropdownMenu, DropdownMenuWrapper } from "../../../molecules/dropdown";
 import { useLocale } from "../../../../hooks";
+import { LANGUAGE } from "../../../../telemetry/constants";
 
 // This needs to match what's set in 'libs/constants.js' on the server/builder!
 const PREFERRED_LOCALE_COOKIE_NAME = "preferredlocale";
@@ -23,7 +24,7 @@ export function LanguageMenu({
   native: string;
 }) {
   const menuId = "language-menu";
-  const ga = useGA();
+  const gleanClick = useGleanClick();
   const locale = useLocale();
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -56,14 +57,8 @@ export function LanguageMenu({
         }
       }
 
-      ga("send", {
-        hitType: "event",
-        eventCategory: "Language",
-        eventAction: `Change preferred language (cookie before: ${
-          cookieValueBefore || "none"
-        })`,
-        eventLabel: `${window.location.pathname} to ${event.currentTarget.href}`,
-      });
+      const oldValue = cookieValueBefore || "none";
+      gleanClick(`${LANGUAGE}: ${oldValue} -> ${preferredLocale}`);
     }
   };