feat(telemetry): measure interactive-examples actions (#8337)

Handle interaction events that bob posts,
and forward them with Glean.

client/src/document/index.tsx

@@ -38,6 +38,7 @@ import "./index.scss";
 import "./interactive-examples.scss";
 import { DocumentSurvey } from "../ui/molecules/document-survey";
 import { useIncrementFrequentlyViewed } from "../plus/collections/frequently-viewed";
+import { useInteractiveExamplesActionHandler as useInteractiveExamplesTelemetry } from "../telemetry/interactive-examples";
 // import { useUIStatus } from "../ui-context";
 
 // Lazy sub-components
@@ -111,8 +112,10 @@ export function Document(props /* TODO: define a TS interface for this */) {
       refreshInterval: CRUD_MODE ? 500 : 0,
     }
   );
+
   useIncrementFrequentlyViewed(doc);
   useCopyExamplesToClipboard(doc);
+  useInteractiveExamplesTelemetry();
 
   React.useEffect(() => {
     if (!doc && !error) {

client/src/telemetry/interactive-examples.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useGleanClick } from "./glean-context";
+import { IEX_DOMAIN } from "../env";
+
+/**
+ * Forwards user interactions with interactive-examples to Glean.
+ */
+export function useInteractiveExamplesActionHandler() {
+  const gleanClick = useGleanClick();
+
+  useEffect(() => {
+    const listener = (event: MessageEvent) => {
+      if (
+        event.origin === IEX_DOMAIN &&
+        typeof event.data === "object" &&
+        event.data.type === "action"
+      ) {
+        gleanClick(`interactive-examples: ${event.data.source}`);
+      }
+    };
+
+    window.addEventListener("message", listener);
+
+    return () => window.removeEventListener("message", listener);
+  }, [gleanClick]);
+}