diff --git a/packages/fxa-settings/src/components/NotificationPromoBanner/index.stories.tsx b/packages/fxa-settings/src/components/NotificationPromoBanner/index.stories.tsx index b5edbb40f1..5c6b070b35 100644 --- a/packages/fxa-settings/src/components/NotificationPromoBanner/index.stories.tsx +++ b/packages/fxa-settings/src/components/NotificationPromoBanner/index.stories.tsx @@ -30,7 +30,7 @@ const notificationProps = { 'Create an Account Recovery Key to restore your sync browsing data if you ever forget your password.', route: '/settings/account_recovery', dismissKey: 'account-recovery-dismissed', - metricsPrefix: 'account-recovery', + metricsKey: 'create_recovery_key', isVisible: true, }; diff --git a/packages/fxa-settings/src/components/NotificationPromoBanner/index.test.tsx b/packages/fxa-settings/src/components/NotificationPromoBanner/index.test.tsx index 3c69782af1..e5ca4c4f6d 100644 --- a/packages/fxa-settings/src/components/NotificationPromoBanner/index.test.tsx +++ b/packages/fxa-settings/src/components/NotificationPromoBanner/index.test.tsx @@ -27,7 +27,7 @@ describe('NotificationPromoBanner component', () => { 'Create an Account Recovery Key to restore your sync browsing data if you ever forget your password.', route: '/settings/account_recovery', dismissKey: 'account-recovery-dismissed', - metricsPrefix: 'account-recovery', + metricsKey: 'create_recovery_key', isVisible: true, }; renderWithLocalizationProvider( @@ -49,7 +49,7 @@ describe('NotificationPromoBanner component', () => { 'Create an Account Recovery Key to restore your sync browsing data if you ever forget your password.', route: '/settings/account_recovery', dismissKey: 'account-recovery-dismissed', - metricsPrefix: 'account-recovery', + metricsKey: 'create_recovery_key', isVisible: true, }; renderWithLocalizationProvider( diff --git a/packages/fxa-settings/src/components/NotificationPromoBanner/index.tsx b/packages/fxa-settings/src/components/NotificationPromoBanner/index.tsx index f6e9cfae26..2167a63ad0 100644 --- a/packages/fxa-settings/src/components/NotificationPromoBanner/index.tsx +++ b/packages/fxa-settings/src/components/NotificationPromoBanner/index.tsx @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Link, RouteComponentProps, useLocation } from '@reach/router'; import { ReactComponent as IconClose } from '@fxa/shared/assets/images/close.svg'; import { FtlMsg } from 'fxa-react/lib/utils'; +import GleanMetrics from '../../lib/glean'; type NotificationPromoBannerProps = { headerImage: string; @@ -10,6 +11,7 @@ type NotificationPromoBannerProps = { headerDescription: string; route: string; dismissKey: string; + metricsKey: string; isVisible: boolean; }; @@ -21,6 +23,7 @@ const NotificationPromoBanner = ({ dismissKey, isVisible, route, + metricsKey, }: NotificationPromoBannerProps & RouteComponentProps) => { const location = useLocation(); @@ -37,6 +40,13 @@ const NotificationPromoBanner = ({ localStorage.getItem(notificationBannerClosedLocalStorageKey) ); + useEffect(() => { + if (visible || bannerClosed === 'false') { + // We have to manually emit the custom view event here because the promo banner is not a page + GleanMetrics.accountBanner.createRecoveryKeyView(); + } + }, [visible, bannerClosed]); + if (!visible || bannerClosed === 'true') return null; return ( @@ -59,6 +69,7 @@ const NotificationPromoBanner = ({ setTimeout(() => setVisible(false), 300); }} className="absolute top-3 end-3" + data-glean-id={`account_banner_${metricsKey}_dismiss`} > @@ -78,6 +89,7 @@ const NotificationPromoBanner = ({ {ctaText} diff --git a/packages/fxa-settings/src/components/Settings/PageSettings/index.tsx b/packages/fxa-settings/src/components/Settings/PageSettings/index.tsx index 3d7e72ff0c..318d83fd02 100644 --- a/packages/fxa-settings/src/components/Settings/PageSettings/index.tsx +++ b/packages/fxa-settings/src/components/Settings/PageSettings/index.tsx @@ -71,7 +71,7 @@ export const PageSettings = (_: RouteComponentProps) => { ), route: '/settings/account_recovery', dismissKey: 'account-recovery-dismissed', - metricsPrefix: 'promote-account-recovery', + metricsKey: 'create_recovery_key', isVisible: !recoveryKey.exists, }; diff --git a/packages/fxa-settings/src/lib/glean/index.test.ts b/packages/fxa-settings/src/lib/glean/index.test.ts index 7570fcbc9d..35baa70c3a 100644 --- a/packages/fxa-settings/src/lib/glean/index.test.ts +++ b/packages/fxa-settings/src/lib/glean/index.test.ts @@ -13,6 +13,7 @@ import * as event from 'fxa-shared/metrics/glean/web/event'; import * as reg from 'fxa-shared/metrics/glean/web/reg'; import * as login from 'fxa-shared/metrics/glean/web/login'; import * as accountPref from 'fxa-shared/metrics/glean/web/accountPref'; +import * as accountBanner from 'fxa-shared/metrics/glean/web/accountBanner'; import * as deleteAccount from 'fxa-shared/metrics/glean/web/deleteAccount'; import * as thirdPartyAuth from 'fxa-shared/metrics/glean/web/thirdPartyAuth'; import { userIdSha256 } from 'fxa-shared/metrics/glean/web/account'; @@ -848,6 +849,20 @@ describe('lib/glean', () => { }); }); + describe('accountBanner', () => { + it('submits a ping with the account_banner_create_recovery_key_view event name', async () => { + GleanMetrics.accountBanner.createRecoveryKeyView(); + const spy = sandbox.spy(accountBanner.createRecoveryKeyView, 'record'); + await GleanMetrics.isDone(); + sinon.assert.calledOnce(setEventNameStub); + sinon.assert.calledWith( + setEventNameStub, + 'account_banner_create_recovery_key_view' + ); + sinon.assert.calledOnce(spy); + }); + }); + describe('deleteAccount', () => { it('submits a ping with the delete_account_settings_submit event name', async () => { GleanMetrics.deleteAccount.settingsSubmit(); diff --git a/packages/fxa-settings/src/lib/glean/index.ts b/packages/fxa-settings/src/lib/glean/index.ts index b0fbf5e5b9..c42be9e9c8 100644 --- a/packages/fxa-settings/src/lib/glean/index.ts +++ b/packages/fxa-settings/src/lib/glean/index.ts @@ -27,6 +27,7 @@ import * as cadApproveDevice from 'fxa-shared/metrics/glean/web/cadApproveDevice import * as cadMobilePair from 'fxa-shared/metrics/glean/web/cadMobilePair'; import * as cadMobilePairUseApp from 'fxa-shared/metrics/glean/web/cadMobilePairUseApp'; import * as accountPref from 'fxa-shared/metrics/glean/web/accountPref'; +import * as accountBanner from 'fxa-shared/metrics/glean/web/accountBanner'; import * as deleteAccount from 'fxa-shared/metrics/glean/web/deleteAccount'; import * as thirdPartyAuth from 'fxa-shared/metrics/glean/web/thirdPartyAuth'; import { userIdSha256 } from 'fxa-shared/metrics/glean/web/account'; @@ -499,6 +500,9 @@ const recordEventMetric = ( reason: gleanPingMetrics?.event?.['reason'] || '', }); break; + case 'account_banner_create_recovery_key_view': + accountBanner.createRecoveryKeyView.record(); + break; } }; diff --git a/packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml b/packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml index 1065bd79be..70923108c6 100644 --- a/packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml +++ b/packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml @@ -2422,6 +2422,25 @@ account_pref: data_sensitivity: - interaction +account_banner: + create_recovery_key_view: + type: event + description: | + User sees the promotion to setup a recovery key in settings page. + send_in_pings: + - events + notification_emails: + - vzare@mozilla.com + - fxa-staff@mozilla.com + bugs: + - https://mozilla-hub.atlassian.net/browse/FXA-10394 + data_reviews: + - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504 + - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121 + expires: never + data_sensitivity: + - interaction + delete_account: settings_submit: type: event diff --git a/packages/fxa-shared/metrics/glean/web/accountBanner.ts b/packages/fxa-shared/metrics/glean/web/accountBanner.ts new file mode 100644 index 0000000000..609794a305 --- /dev/null +++ b/packages/fxa-shared/metrics/glean/web/accountBanner.ts @@ -0,0 +1,23 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// AUTOGENERATED BY glean_parser v14.5.2. DO NOT EDIT. DO NOT COMMIT. + +import EventMetricType from '@mozilla/glean/private/metrics/event'; + +/** + * User sees the promotion to setup a recovery key in settings page. + * + * Generated from `account_banner.create_recovery_key_view`. + */ +export const createRecoveryKeyView = new EventMetricType( + { + category: 'account_banner', + name: 'create_recovery_key_view', + sendInPings: ['events'], + lifetime: 'ping', + disabled: false, + }, + [] +); diff --git a/packages/fxa-shared/metrics/glean/web/cadRedirectDesktop.ts b/packages/fxa-shared/metrics/glean/web/cadRedirectDesktop.ts index 0030950e4d..2270a6392d 100644 --- a/packages/fxa-shared/metrics/glean/web/cadRedirectDesktop.ts +++ b/packages/fxa-shared/metrics/glean/web/cadRedirectDesktop.ts @@ -6,6 +6,23 @@ import EventMetricType from '@mozilla/glean/private/metrics/event'; +/** + * User viewed the default page state on pair/unsupported after trying to access + * the pair flow + * + * Generated from `cad_redirect_desktop.default_view`. + */ +export const defaultView = new EventMetricType( + { + category: 'cad_redirect_desktop', + name: 'default_view', + sendInPings: ['events'], + lifetime: 'ping', + disabled: false, + }, + [] +); + /** * User clicked "Download Firefox" on the "Switch to Firefox" page after trying to * access the pair flow diff --git a/packages/fxa-shared/metrics/glean/web/cadRedirectMobile.ts b/packages/fxa-shared/metrics/glean/web/cadRedirectMobile.ts new file mode 100644 index 0000000000..a010cb673f --- /dev/null +++ b/packages/fxa-shared/metrics/glean/web/cadRedirectMobile.ts @@ -0,0 +1,24 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// AUTOGENERATED BY glean_parser v14.5.2. DO NOT EDIT. DO NOT COMMIT. + +import EventMetricType from '@mozilla/glean/private/metrics/event'; + +/** + * User viewed the "Connecting your mobile device" screen with instructions to + * open on desktop after trying to access the pair flow on mobile + * + * Generated from `cad_redirect_mobile.view`. + */ +export const view = new EventMetricType( + { + category: 'cad_redirect_mobile', + name: 'view', + sendInPings: ['events'], + lifetime: 'ping', + disabled: false, + }, + [] +); diff --git a/packages/fxa-shared/metrics/glean/web/event.ts b/packages/fxa-shared/metrics/glean/web/event.ts index e0bbcb809d..d64614dc8c 100644 --- a/packages/fxa-shared/metrics/glean/web/event.ts +++ b/packages/fxa-shared/metrics/glean/web/event.ts @@ -4,8 +4,8 @@ // AUTOGENERATED BY glean_parser v14.5.2. DO NOT EDIT. DO NOT COMMIT. -import StringMetricType from '@mozilla/glean/private/metrics/string'; import BooleanMetricType from '@mozilla/glean/private/metrics/boolean'; +import StringMetricType from '@mozilla/glean/private/metrics/string'; /** * The name of the event diff --git a/packages/fxa-shared/metrics/glean/web/index.ts b/packages/fxa-shared/metrics/glean/web/index.ts index 1d2f1cd733..7356e7a069 100644 --- a/packages/fxa-shared/metrics/glean/web/index.ts +++ b/packages/fxa-shared/metrics/glean/web/index.ts @@ -186,6 +186,10 @@ export const eventsMap = { bentoVpn: 'account_pref_bento_vpn', }, + accountBanner: { + createRecoveryKeyView: 'account_banner_create_recovery_key_view', + }, + deleteAccount: { settingsSubmit: 'delete_account_settings_submit', view: 'delete_account_view',