Add additional CSAT telemetry (MNTOR-3469)

src/app/components/client/csat_survey/CsatSurveyBanner.tsx

@@ -4,7 +4,7 @@
 
 "use client";
 
-import { useState } from "react";
+import { RefObject, useState } from "react";
 import { Button } from "../Button";
 import { CloseBtn, OpenInNew } from "../../server/Icons";
 import { useL10n } from "../../../hooks/l10n";
@@ -14,6 +14,7 @@ import { useTelemetry } from "../../../hooks/useTelemetry";
 import styles from "./CsatSurveyBanner.module.scss";
 import { Survey } from "./surveys/csatSurvey";
 import { GleanMetricMap } from "../../../../telemetry/generated/_map";
+import { useViewTelemetry } from "../../../hooks/useViewTelemetry";
 
 const surveyResponses = [
   "very-dissatisfied",
@@ -44,6 +45,7 @@ export const CsatSurveyBanner = ({
   const recordTelemetry = useTelemetry();
   const hasRenderedClientSide = useHasRenderedClientSide();
   const localDismissal = useLocalDismissal(localDismissalId);
+  const refViewTelemetry = useViewTelemetry("csatSurvey", metricKeys);
 
   if (
     !hasRenderedClientSide ||
@@ -68,7 +70,10 @@ export const CsatSurveyBanner = ({
   };
 
   return (
-    <aside className={styles.wrapper}>
+    <aside
+      ref={refViewTelemetry as RefObject<HTMLElement>}
+      className={styles.wrapper}
+    >
       {typeof answer !== "undefined" && hasFollowUpSurveyOptions ? (
         <div className={styles.prompt}>
           <a
@@ -105,7 +110,13 @@ export const CsatSurveyBanner = ({
           </ol>
         </>
       )}
-      <button className={styles.closeButton} onClick={() => dismiss()}>
+      <button
+        className={styles.closeButton}
+        onClick={() => {
+          dismiss();
+          recordTelemetry("csatSurvey", "dismiss", metricKeys);
+        }}
+      >
         <CloseBtn
           alt={l10n.getString("survey-csat-survey-dismiss-label")}
           width="14"

src/app/components/client/csat_survey/surveys/csatSurvey.ts

@@ -52,7 +52,7 @@ export type CsatSurveyProps = {
 
 export type RelevantSurveyWithMetric = Survey & {
   localDismissalId: string;
-  metricKeys: GleanMetricMap["csatSurvey"]["click"];
+  metricKeys: GleanMetricMap["csatSurvey"]["click" | "view"];
 };
 
 export function getRelevantSurveys({

src/app/hooks/useViewTelemetry.ts

@@ -8,7 +8,10 @@ import { GleanMetricMap } from "../../telemetry/generated/_map";
 import { RefObject } from "react";
 
 export function useViewTelemetry<
-  EventModule extends keyof Pick<GleanMetricMap, "ctaButton" | "banner">,
+  EventModule extends keyof Pick<
+    GleanMetricMap,
+    "ctaButton" | "banner" | "csatSurvey"
+  >,
   EventName extends keyof GleanMetricMap[EventModule],
 >(
   eventModule: EventModule,

src/telemetry/metrics.yaml

@@ -495,6 +495,68 @@ cta_button:
         type: string
 
 csat_survey:
+  view:
+    type: event
+    description: |
+      A CSAT survey entered the viewport.
+    bugs:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1823766
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1823766
+    data_sensitivity:
+      - interaction
+    notification_emails:
+      - [email protected]
+    expires: never
+    extra_keys:
+      path:
+        description: The path of the page.
+        type: string
+      survey_id:
+        description: The ID of the survey, or some way to identify which survey entered the viewport.
+      plan_tier:
+        description: Which tier of plan the user is on [Free, Plus]
+        type: string
+      experiment_branch:
+        description: The experiment branch the user is on. [control, treatment]
+        type: string
+      last_scan_date:
+        description: The date on which the user had their last data broker scan. [YYYYMMDD]
+        type: string
+      automated_removal_period:
+        description: The time period since the first automated removal for the user. [initial, 3-months, 6-months, 12-months]
+        type: string
+  dismiss:
+    type: event
+    description: |
+      A CSAT survey has been dismissed by a user.
+    bugs:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1823766
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1823766
+    data_sensitivity:
+      - interaction
+    notification_emails:
+      - [email protected]
+    expires: never
+    extra_keys:
+      path:
+        description: The path of the page.
+        type: string
+      survey_id:
+        description: The ID of the survey, or some way to identify which survey that has been dismissed by a user.
+      plan_tier:
+        description: Which tier of plan the user is on [Free, Plus]
+        type: string
+      experiment_branch:
+        description: The experiment branch the user is on. [control, treatment]
+        type: string
+      last_scan_date:
+        description: The date on which the user had their last data broker scan. [YYYYMMDD]
+        type: string
+      automated_removal_period:
+        description: The time period since the first automated removal for the user. [initial, 3-months, 6-months, 12-months]
+        type: string
   click:
     type: event
     description: |