Merge pull request #17576 from mozilla/fxa-10394

feat(banner): Add Notification Promotion metrics

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,
 };
 

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(

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`}
         >
           <IconClose className="text-black w-3 h-3" role="img" />
         </button>
@@ -78,6 +89,7 @@ const NotificationPromoBanner = ({
         <Link
           className="cta-neutral cta-base cta-base-p transition-standard me-8"
           to={`${route}${location.search}`}
+          data-glean-id={`account_banner_${metricsKey}_submit`}
         >
           {ctaText}
         </Link>

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,
   };
 

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();

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;
   }
 };
 

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

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,
+  },
+  []
+);

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

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,
+  },
+  []
+);

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

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