diff --git a/client/src/app.tsx b/client/src/app.tsx index ff38d1aafa04..dc409e588226 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -26,7 +26,7 @@ import { Community } from "./community"; import { ContributorSpotlight } from "./contributor-spotlight"; import { useIsServer, usePing } from "./hooks"; -import { useGleanPage } from "./telemetry/glean-context"; +import { useGleanClicks, useGleanPage } from "./telemetry/glean-context"; import { MainContentContainer } from "./ui/atoms/page-content"; import { Loading } from "./ui/atoms/loading"; import { Advertising } from "./advertising"; @@ -142,6 +142,7 @@ export function App(appProps: HydrationData) { usePing(); useGleanPage(pageNotFound, appProps.doc); + useGleanClicks(); useScrollDepthMeasurement(); const localeMatch = useMatch("/:locale/*"); diff --git a/client/src/telemetry/glean-context.tsx b/client/src/telemetry/glean-context.tsx index be921913da46..247982d2f5a7 100644 --- a/client/src/telemetry/glean-context.tsx +++ b/client/src/telemetry/glean-context.tsx @@ -152,6 +152,22 @@ function glean(): GleanAnalytics { const gleanAnalytics = glean(); const GleanContext = React.createContext(gleanAnalytics); +export function useGleanClicks() { + const gleanClick = useGleanClick(); + + useEffect(() => { + const handler = (ev) => { + handleLinkClick(ev, gleanClick); + handleButtonClick(ev, gleanClick); + handleSidebarClick(ev, gleanClick); + }; + + window.addEventListener("click", handler); + + return () => window.removeEventListener("click", handler); + }); +} + function handleButtonClick(ev: MouseEvent, click: (source: string) => void) { const target = ev.composedPath()?.[0] || ev.target; const button = (target as HTMLElement | null)?.closest("button"); @@ -186,28 +202,7 @@ export function GleanProvider(props: { children: React.ReactNode }) { } export function useGlean() { - const glean = React.useContext(GleanContext); - const userData = useUserData(); - - useEffect(() => { - const gleanClick = (source: string) => { - glean.click(getPageProps(userData), { - source, - }); - }; - - const handler = (ev) => { - handleLinkClick(ev, gleanClick); - handleButtonClick(ev, gleanClick); - handleSidebarClick(ev, gleanClick); - }; - - window.addEventListener("click", handler); - - return () => window.removeEventListener("click", handler); - }); - - return glean; + return React.useContext(GleanContext); } function getPageProps(