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',