feat(metrics): Add Glean page load events when navigating

packages/fxa-content-server/app/scripts/lib/glean/index.ts

@@ -348,6 +348,7 @@ export const GleanMetrics = {
           // Glean does not offer direct control over when metrics are uploaded;
           // this ensures that events are uploaded.
           maxEvents: 1,
+          enableAutoPageLoadEvents: true,
         });
         Glean.setLogPings(config.logPings);
         if (config.debugViewTag) {

packages/fxa-content-server/app/tests/spec/lib/glean.js

@@ -165,6 +165,7 @@ describe('lib/glean', () => {
           channel: mockConfig.channel,
           serverEndpoint: mockConfig.serverEndpoint,
           maxEvents: 1,
+          enableAutoPageLoadEvents: true,
         }
       );
       sinon.assert.calledWith(logPingsStub, mockConfig.logPings);

packages/fxa-settings/src/components/App/index.test.tsx

@@ -82,6 +82,7 @@ jest.mock('../../lib/glean', () => ({
     initialize: jest.fn(),
     getEnabled: jest.fn(),
     accountPref: { view: jest.fn() },
+    pageLoad: jest.fn(),
   },
 }));
 

packages/fxa-settings/src/components/App/index.tsx

@@ -258,6 +258,10 @@ const SettingsRoutes = ({
   const location = useLocation();
   const isSync = integration != null ? integration.isSync() : false;
 
+  useEffect(() => {
+    GleanMetrics.pageLoad();
+  }, [location.pathname]);
+
   // If the user is not signed in, they cannot access settings! Direct them accordingly
   if (!isSignedIn) {
     const params = new URLSearchParams(window.location.search);
@@ -303,6 +307,11 @@ const AuthAndAccountSetupRoutes = ({
   // TODO: MozServices / string discrepancy, FXA-6802
   const serviceName = integration.getServiceName() as MozServices;
 
+  const location = useLocation();
+  useEffect(() => {
+    GleanMetrics.pageLoad();
+  }, [location.pathname]);
+
   return (
     <Router>
       {/* Legal */}

packages/fxa-settings/src/lib/glean/index.test.ts

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import Glean from '@mozilla/glean/web';
+import * as GleanMetricsAPI from '@mozilla/glean/metrics';
 import { testResetGlean } from '@mozilla/glean/testing';
 import sinon, { SinonStub } from 'sinon';
 
@@ -71,7 +72,8 @@ describe('lib/glean', () => {
     setUtmContentStub: SinonStub,
     setUtmMediumStub: SinonStub,
     setUtmSourceStub: SinonStub,
-    setUtmTermStub: SinonStub;
+    setUtmTermStub: SinonStub,
+    pageLoadStub: SinonStub;
 
   beforeEach(async () => {
     mockMetricsContext.metricsFlow = {
@@ -104,6 +106,8 @@ describe('lib/glean', () => {
     setUtmSourceStub = sandbox.stub(utm.source, 'set');
     setUtmTermStub = sandbox.stub(utm.term, 'set');
     submitPingStub = sandbox.stub(pings.accountsEvents, 'submit');
+    pageLoadStub = sandbox.stub(GleanMetricsAPI.default, 'pageLoad');
+
     await testResetGlean('glean-test');
   });
 
@@ -176,6 +180,7 @@ describe('lib/glean', () => {
           appDisplayVersion: mockConfig.appDisplayVersion,
           channel: mockConfig.channel,
           serverEndpoint: mockConfig.serverEndpoint,
+          enableAutoPageLoadEvents: true,
         }
       );
       sinon.assert.calledWith(logPingsStub, mockConfig.logPings);
@@ -820,4 +825,11 @@ describe('lib/glean', () => {
       expect(true).toBeTruthy();
     });
   });
+
+  describe('pageLoad', () => {
+    it('resolves', async () => {
+      GleanMetrics.pageLoad();
+      sinon.assert.calledOnce(pageLoadStub);
+    });
+  });
 });

packages/fxa-settings/src/lib/glean/index.ts

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import Glean from '@mozilla/glean/web';
+import GleanMetricsAPI from '@mozilla/glean/metrics';
 import UAParser from 'ua-parser-js';
 import { Entries } from 'type-fest';
 import {
@@ -61,6 +62,7 @@ type GleanMetricsT = {
   setEnabled: (enabled: boolean) => void;
   getEnabled: () => boolean;
   isDone: () => Promise<void>;
+  pageLoad: () => void;
 } & {
   [k in EventMapKeys]: { [eventKey in keyof EventsMap[k]]: PingFn };
 };
@@ -445,7 +447,7 @@ const createEventFn =
 
 export const GleanMetrics: Pick<
   GleanMetricsT,
-  'initialize' | 'setEnabled' | 'getEnabled' | 'isDone'
+  'initialize' | 'setEnabled' | 'getEnabled' | 'isDone' | 'pageLoad'
 > = {
   initialize: (config: GleanMetricsConfig, context: GleanMetricsContext) => {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1859629
@@ -457,6 +459,7 @@ export const GleanMetrics: Pick<
           appDisplayVersion: config.appDisplayVersion,
           channel: config.channel,
           serverEndpoint: config.serverEndpoint,
+          enableAutoPageLoadEvents: true,
         });
         Glean.setLogPings(config.logPings);
         if (config.debugViewTag) {
@@ -482,6 +485,10 @@ export const GleanMetrics: Pick<
     return gleanEnabled;
   },
 
+  pageLoad: () => {
+    GleanMetricsAPI.pageLoad();
+  },
+
   /**
    * The ping calls are awaited internally for ease of use and that works in
    * most cases.  But in the scenario where we want to wait for the pings to