From ce88978d43e7ce583fbc10b4fd4f0e69f08cc569 Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 29 Dec 2023 13:31:13 +0100 Subject: [PATCH] Use consistent name for telemetry recording --- .../start-free-scan/StartFreeScanView.tsx | 8 ++++---- .../(authenticated)/user/welcome/EnterInfo.tsx | 16 ++++++++-------- .../(authenticated)/user/welcome/GetStarted.tsx | 4 ++-- .../(authenticated)/user/welcome/View.tsx | 10 +++++----- .../components/client/PremiumUpsellDialog.tsx | 10 +++++----- src/app/hooks/__mocks__/useTelemetry.ts | 4 ++-- src/app/hooks/useTelemetry.ts | 4 ++-- 7 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/start-free-scan/StartFreeScanView.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/start-free-scan/StartFreeScanView.tsx index 85ed54236..b4b3d0ed0 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/start-free-scan/StartFreeScanView.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/start-free-scan/StartFreeScanView.tsx @@ -23,7 +23,7 @@ export type Props = { export function StartFreeScanView(props: Props) { const l10n = useL10n(); - const record = useTelemetry(); + const recordTelemetry = useTelemetry(); return ( { - record("link", "click", { + recordTelemetry("link", "click", { link_id: "returning_user_info_scan_learn_more", }); }} @@ -75,7 +75,7 @@ export function StartFreeScanView(props: Props) { variant="primary" href="/redesign/user/welcome/free-scan?referrer=fix" onPress={() => { - record("ctaButton", "click", { + recordTelemetry("ctaButton", "click", { button_id: "intent_to_start_free_scan", }); }} @@ -88,7 +88,7 @@ export function StartFreeScanView(props: Props) { variant="secondary" href="/redesign/user/dashboard/fix/high-risk-data-breaches" onPress={() => { - record("ctaButton", "click", { + recordTelemetry("ctaButton", "click", { button_id: "skipped_free_scan", }); }} diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx index 31380bb95..d604654fb 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx @@ -72,7 +72,7 @@ export const EnterInfo = ({ const [invalidInputs, setInvalidInputs] = useState>([]); const [requestingScan, setRequestingScan] = useState(false); - const record = useTelemetry(); + const recordTelemetry = useTelemetry(); const explainerDialogState = useOverlayTriggerState({}); const explainerDialogTrigger = useOverlayTrigger( { type: "dialog" }, @@ -88,11 +88,11 @@ export const EnterInfo = ({ if (isOpen) { // TODO: Uncomment popup_id after it has been added to metrics.yaml // in https://github.com/mozilla/blurts-server/pull/3913. - record("popup", "view", { + recordTelemetry("popup", "view", { // popup_id: "enter_scan_info_confirmation_modal", }); } else { - record("button", "click", { + recordTelemetry("button", "click", { button_id: "edit_free_scan", }); } @@ -189,7 +189,7 @@ export const EnterInfo = ({ const handleOnSubmit = (event: FormEvent) => { event.preventDefault(); - record("ctaButton", "click", { + recordTelemetry("ctaButton", "click", { button_id: "started_free_scan", }); @@ -301,7 +301,7 @@ export const EnterInfo = ({ // TODO: Figure out how to intercept the fetch request in a test: /* c8 ignore next */ onPress={() => { - record("ctaButton", "click", { + recordTelemetry("ctaButton", "click", { button_id: "confirmed_free_scan", }); handleRequestScan(); @@ -335,7 +335,7 @@ export const EnterInfo = ({ // TODO: Add unit test when changing this code: /* c8 ignore next */ onClick={() => { - record("button", "click", { + recordTelemetry("button", "click", { button_id: "why_do_we_need_this_info", }); explainerDialogState.open(); @@ -365,7 +365,7 @@ export const EnterInfo = ({ validationState={validationState} inputValue={value} onFocus={() => { - record("field", "focus", { + recordTelemetry("field", "focus", { field_id: key, }); }} @@ -384,7 +384,7 @@ export const EnterInfo = ({ validationState={validationState} value={value} onFocus={() => { - record("field", "focus", { + recordTelemetry("field", "focus", { field_id: key, }); }} diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx index 0a8104d7e..f56b46173 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx @@ -24,7 +24,7 @@ export type Props = { export const GetStarted = (props: Props) => { const l10n = useL10n(); - const record = useTelemetry(); + const recordTelemetry = useTelemetry(); const explainerDialogState = useOverlayTriggerState({}); const explainerDialogTrigger = useOverlayTrigger( { type: "dialog" }, @@ -47,7 +47,7 @@ export const GetStarted = (props: Props) => { {...buttonProps} ref={triggerRef} onClick={() => { - record("button", "click", { + recordTelemetry("button", "click", { button_id: "welcome_data_protection", }); explainerDialogState.open(); diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/View.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/View.tsx index 2b07ccfbd..bf4e2a049 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/View.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/View.tsx @@ -42,7 +42,7 @@ export const View = ({ const skipInitialStep = stepId === "enterInfo"; const [currentStep, setCurrentStep] = useState(stepId); const router = useRouter(); - const record = useTelemetry(); + const recordTelemetry = useTelemetry(); useEffect(() => { let pageName = "welcome"; @@ -52,11 +52,11 @@ export const View = ({ pageName = "scanning_for_exposures"; } - record("page", "view", { + recordTelemetry("page", "view", { utm_campaign: skipInitialStep ? "legacy_user" : "new_user", utm_source: pageName, }); - }, [currentStep, record, skipInitialStep]); + }, [currentStep, recordTelemetry, skipInitialStep]); const currentComponent = currentStep === "findExposures" ? ( @@ -74,7 +74,7 @@ export const View = ({ previousRoute={previousRoute} skipInitialStep={skipInitialStep} onGoBack={() => { - record("button", "click", { + recordTelemetry("button", "click", { button_id: "declined_free_scan", }); @@ -89,7 +89,7 @@ export const View = ({ { - record("ctaButton", "click", { + recordTelemetry("ctaButton", "click", { button_id: "welcome_start", }); setCurrentStep("enterInfo"); diff --git a/src/app/components/client/PremiumUpsellDialog.tsx b/src/app/components/client/PremiumUpsellDialog.tsx index f73a1a82e..46937d239 100644 --- a/src/app/components/client/PremiumUpsellDialog.tsx +++ b/src/app/components/client/PremiumUpsellDialog.tsx @@ -73,7 +73,7 @@ function PremiumUpsellDialogContent({ const l10n = useL10n(); const defaultSelectedKey = "yearly"; const [selectedTab, setSelectedTab] = useState(defaultSelectedKey); - const record = useTelemetry(); + const recordTelemetry = useTelemetry(); const isMonthly = selectedTab === "monthly"; const tabsData = [ @@ -100,7 +100,7 @@ function PremiumUpsellDialogContent({ tabs={tabsData} defaultSelectedKey={defaultSelectedKey} onSelectionChange={(selectedKey) => { - record("button", "click", { + recordTelemetry("button", "click", { button_id: selectedKey === "monthly" ? "selected_monthly_plan" @@ -156,7 +156,7 @@ function PremiumUpsellDialogContent({ // the back-end because the page unloads before we can do so. // This will be dealt with in upstream Glean: // https://matrix.to/#/!SCdsJdSTaQHjzEVrAE:mozilla.org/$muLULIgsOMaLwe3HR6HI_oJbMkyD5gZBoRN3GmDL8Ko - record("upgradeIntent", "click", { + recordTelemetry("upgradeIntent", "click", { button_id: isMonthly ? "intent_to_purchase_monthly_plan_nav_modal" : "intent_to_purchase_yearly_plan_nav_modal", @@ -183,7 +183,7 @@ function PremiumUpsellDialog({ ...otherProps }: PremiumUpsellDialogProps & OverlayTriggerProps) { const l10n = useL10n(); - const record = useTelemetry(); + const recordTelemetry = useTelemetry(); return (
@@ -193,7 +193,7 @@ function PremiumUpsellDialog({ title={l10n.getString("premium-upsell-dialog-title")} illustration={} onDismiss={() => { - record("button", "click", { + recordTelemetry("button", "click", { button_id: "close_upsell_modal", }); return void state.close(); diff --git a/src/app/hooks/__mocks__/useTelemetry.ts b/src/app/hooks/__mocks__/useTelemetry.ts index 29a404f2f..8849aad5d 100644 --- a/src/app/hooks/__mocks__/useTelemetry.ts +++ b/src/app/hooks/__mocks__/useTelemetry.ts @@ -4,8 +4,8 @@ import type { useTelemetry as ogUseTelemetry } from "../useTelemetry"; -const mockRecord = jest.fn(); +const mockedRecordTelemetry = jest.fn(); export const useTelemetry: typeof ogUseTelemetry = () => { - return mockRecord as ReturnType; + return mockedRecordTelemetry as ReturnType; }; diff --git a/src/app/hooks/useTelemetry.ts b/src/app/hooks/useTelemetry.ts index 8ed32c7f2..40f1a668e 100644 --- a/src/app/hooks/useTelemetry.ts +++ b/src/app/hooks/useTelemetry.ts @@ -23,7 +23,7 @@ export const useTelemetry = () => { const { gtag } = useGa(); const { Glean, Ga } = TelemetryPlatforms; - const record = < + const recordTelemetry = < EventModule extends keyof GleanMetricMap, EventName extends keyof GleanMetricMap[EventModule], >( @@ -53,5 +53,5 @@ export const useTelemetry = () => { } }; - return record; + return recordTelemetry; };