[11722] Add GA event tracking for the Analytics setup screen.

assets/js/components/setup/ModuleSetup.js

@@ -41,6 +41,7 @@ import { deleteItem } from '@/js/googlesitekit/api/cache';
 import { trackEvent } from '@/js/util';
 import { useFeature } from '@/js/hooks/useFeature';
 import useQueryArg from '@/js/hooks/useQueryArg';
+import useViewContext from '@/js/hooks/useViewContext';
 import HelpMenu from '@/js/components/help/HelpMenu';
 import { Cell, Grid, Row } from '@/js/material-components';
 import Header from '@/js/components/Header';
@@ -49,10 +50,16 @@ import ExitSetup from '@/js/components/setup/ExitSetup';
 import ProgressIndicator from '@/js/components/ProgressIndicator';
 
 export default function ModuleSetup( { moduleSlug } ) {
+	const viewContext = useViewContext();
 	const { navigateTo } = useDispatch( CORE_LOCATION );
 	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
 	const [ showProgress ] = useQueryArg( 'showProgress' );
 
+	const isInitialSetupFlow =
+		setupFlowRefreshEnabled &&
+		moduleSlug === MODULE_SLUG_ANALYTICS_4 &&
+		showProgress === 'true';
+
 	const module = useSelect( ( select ) =>
 		select( CORE_MODULES ).getModule( moduleSlug )
 	);
@@ -71,11 +78,18 @@ export default function ModuleSetup( { moduleSlug } ) {
 		async ( redirectURL ) => {
 			await deleteItem( 'module_setup' );
 
-			await trackEvent(
-				'moduleSetup',
-				'complete_module_setup',
-				moduleSlug
-			);
+			if ( isInitialSetupFlow ) {
+				await trackEvent(
+					`${ viewContext }_setup`,
+					'setup_flow_v3_complete_analytics_step'
+				);
+			} else {
+				await trackEvent(
+					'moduleSetup',
+					'complete_module_setup',
+					moduleSlug
+				);
+			}
 
 			if ( redirectURL ) {
 				navigateTo( redirectURL );
@@ -93,7 +107,7 @@ export default function ModuleSetup( { moduleSlug } ) {
 			);
 			navigateTo( adminURL );
 		},
-		[ registry, navigateTo, moduleSlug ]
+		[ registry, navigateTo, moduleSlug, viewContext, isInitialSetupFlow ]
 	);
 
 	const onCompleteSetup = module?.onCompleteSetup;
@@ -107,6 +121,15 @@ export default function ModuleSetup( { moduleSlug } ) {
 	}, [ moduleSlug ] );
 
 	useMount( () => {
+		if ( isInitialSetupFlow ) {
+			trackEvent(
+				`${ viewContext }_setup`,
+				'setup_flow_v3_view_analytics_step'
+			);
+
+			return;
+		}
+
 		trackEvent( 'moduleSetup', 'view_module_setup', moduleSlug );
 	} );
 
@@ -116,11 +139,6 @@ export default function ModuleSetup( { moduleSlug } ) {
 
 	const { SetupComponent } = module;
 
-	const isInitialSetupFlow =
-		setupFlowRefreshEnabled &&
-		moduleSlug === MODULE_SLUG_ANALYTICS_4 &&
-		showProgress === 'true';
-
 	return (
 		<Fragment>
 			<Header

assets/js/components/setup/ModuleSetup.test.js

@@ -36,13 +36,18 @@ import { VIEW_CONTEXT_MODULE_SETUP } from '@/js/googlesitekit/constants';
 import { mockLocation } from '../../../../tests/js/mock-browser-utils';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
+import * as tracking from '@/js/util/tracking';
+
+const mockTrackEvent = jest.spyOn( tracking, 'trackEvent' );
+mockTrackEvent.mockImplementation( () => Promise.resolve() );
 
 describe( 'ModuleSetup', () => {
 	mockLocation();
 
 	let registry;
 
 	beforeEach( () => {
+		mockTrackEvent.mockClear();
 		registry = createTestRegistry();
 		registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
 		registry.dispatch( CORE_USER ).receiveGetDismissedPrompts( {} );
@@ -175,6 +180,15 @@ describe( 'ModuleSetup', () => {
 			it( 'should match the snapshot', () => {
 				expect( container ).toMatchSnapshot();
 			} );
+
+			it( 'tracks only the initial setup analytics view event', () => {
+				expect( mockTrackEvent ).toHaveBeenCalledWith(
+					`${ VIEW_CONTEXT_MODULE_SETUP }_setup`,
+					'setup_flow_v3_view_analytics_step'
+				);
+
+				expect( mockTrackEvent ).toHaveBeenCalledTimes( 1 );
+			} );
 		} );
 
 		describe( 'not initial setup flow', () => {
@@ -230,6 +244,16 @@ describe( 'ModuleSetup', () => {
 			it( 'should match the snapshot', () => {
 				expect( container ).toMatchSnapshot();
 			} );
+
+			it( 'tracks only the generic module setup view event', () => {
+				expect( mockTrackEvent ).toHaveBeenCalledWith(
+					'moduleSetup',
+					'view_module_setup',
+					MODULE_SLUG_ANALYTICS_4
+				);
+
+				expect( mockTrackEvent ).toHaveBeenCalledTimes( 1 );
+			} );
 		} );
 	} );
 

assets/js/components/setup/__snapshots__/ModuleSetup.test.js.snap

@@ -621,7 +621,7 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
                                 >
                                   <label
                                     class="mdc-floating-label mdc-floating-label--float-above"
-                                    for="googlesitekit-select-33"
+                                    for="googlesitekit-select-36"
                                     style=""
                                   >
                                     Account
@@ -663,7 +663,7 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
                                 >
                                   <label
                                     class="mdc-floating-label mdc-floating-label--float-above"
-                                    for="googlesitekit-select-34"
+                                    for="googlesitekit-select-37"
                                     style=""
                                   >
                                     Property
@@ -705,7 +705,7 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
                                 >
                                   <label
                                     class="mdc-floating-label mdc-floating-label--float-above"
-                                    for="googlesitekit-select-35"
+                                    for="googlesitekit-select-38"
                                     style=""
                                   >
                                     Web data stream
@@ -741,7 +741,7 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
                                 <input
                                   checked=""
                                   class="mdc-switch__native-control"
-                                  id="googlesitekit-switch-11"
+                                  id="googlesitekit-switch-12"
                                   readonly=""
                                   role="switch"
                                   type="checkbox"
@@ -751,7 +751,7 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
                           </div>
                           <label
                             class=""
-                            for="googlesitekit-switch-11"
+                            for="googlesitekit-switch-12"
                           >
                             Enable enhanced measurement
                           </label>

assets/js/modules/analytics-4/components/common/AccountCreate/index.js

@@ -155,6 +155,7 @@ export default function AccountCreate( { className } ) {
 	}, [ hasAccountCreateForm, siteName, siteURL, timezone, setValues ] );
 
 	const showProgress = getQueryArg( location.href, 'showProgress' );
+	const isInitialSetupFlow = !! showProgress && setupFlowRefreshEnabled;
 
 	const handleSubmit = useCallback( async () => {
 		const scopes = [];
@@ -192,11 +193,19 @@ export default function AccountCreate( { className } ) {
 		}
 
 		setValues( FORM_ACCOUNT_CREATE, { autoSubmit: false } );
-		await trackEvent(
-			`${ viewContext }_analytics`,
-			'create_account',
-			'proxy'
-		);
+
+		if ( isInitialSetupFlow ) {
+			await trackEvent(
+				`${ viewContext }_setup`,
+				'setup_flow_v3_create_analytics_account'
+			);
+		} else {
+			await trackEvent(
+				`${ viewContext }_analytics`,
+				'create_account',
+				'proxy'
+			);
+		}
 
 		const { error } = await createAccount( {
 			showProgress: showProgress === 'true',
@@ -210,10 +219,11 @@ export default function AccountCreate( { className } ) {
 		hasEditScope,
 		hasGTMScope,
 		setValues,
-		viewContext,
+		isInitialSetupFlow,
 		createAccount,
 		showProgress,
 		setPermissionScopeError,
+		viewContext,
 		setConversionTrackingEnabled,
 		saveConversionTrackingSettings,
 	] );
@@ -242,8 +252,6 @@ export default function AccountCreate( { className } ) {
 		return <ProgressBar />;
 	}
 
-	const isInitialSetupFlow = !! showProgress && setupFlowRefreshEnabled;
-
 	return (
 		<div className={ className }>
 			<StoreErrorNotices

assets/js/modules/analytics-4/components/common/AccountCreate/index.test.js

@@ -20,6 +20,7 @@
  * Internal dependencies
  */
 import {
+	cleanup,
 	createTestRegistry,
 	fireEvent,
 	muteFetch,
@@ -42,9 +43,14 @@ import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import { createCacheKey } from '@/js/googlesitekit/api';
 import { getKeys, setItem } from '@/js/googlesitekit/api/cache';
 import AccountCreate from '.';
+import * as tracking from '@/js/util/tracking';
+import { VIEW_CONTEXT_MODULE_SETUP } from '@/js/googlesitekit/constants';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { MODULE_SLUG_SEARCH_CONSOLE } from '@/js/modules/search-console/constants';
 
+const mockTrackEvent = jest.spyOn( tracking, 'trackEvent' );
+mockTrackEvent.mockImplementation( () => Promise.resolve() );
+
 const REGEX_REST_CONVERSION_TRACKING_SETTINGS = new RegExp(
 	'^/google-site-kit/v1/core/site/data/conversion-tracking'
 );
@@ -312,5 +318,64 @@ describe( 'AccountCreate', () => {
 				REGEX_REST_CONVERSION_TRACKING_SETTINGS
 			);
 		} );
+
+		describe( 'event tracking', () => {
+			beforeEach( () => {
+				mockTrackEvent.mockClear();
+				cleanup();
+			} );
+
+			it( 'should track the `setup_flow_v3_create_analytics_account` event when creating an account during the initial setup flow', async () => {
+				global.location.href =
+					'http://example.com/wp-admin/admin.php?page=googlesitekit-dashboard&slug=analytics-4&reAuth=true&showProgress=true';
+
+				( { getByRole, waitForRegistry, rerender } = render(
+					<AccountCreate />,
+					{
+						registry,
+						viewContext: VIEW_CONTEXT_MODULE_SETUP,
+						features: [ 'setupFlowRefresh' ],
+					}
+				) );
+
+				fireEvent.click(
+					getByRole( 'button', { name: 'Create Account' } )
+				);
+
+				await waitForRegistry();
+
+				expect( mockTrackEvent ).toHaveBeenCalledWith(
+					`${ VIEW_CONTEXT_MODULE_SETUP }_setup`,
+					'setup_flow_v3_create_analytics_account'
+				);
+
+				expect( mockTrackEvent ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'should track the `create_account` event when creating an account after the initial setup', async () => {
+				global.location.href =
+					'http://example.com/wp-admin/admin.php?page=googlesitekit-dashboard&slug=analytics-4&reAuth=true';
+				( { getByRole, waitForRegistry, rerender } = render(
+					<AccountCreate />,
+					{
+						registry,
+						viewContext: VIEW_CONTEXT_MODULE_SETUP,
+					}
+				) );
+
+				fireEvent.click(
+					getByRole( 'button', { name: 'Create Account' } )
+				);
+
+				await waitForRegistry();
+
+				expect( mockTrackEvent ).toHaveBeenCalledWith(
+					`${ VIEW_CONTEXT_MODULE_SETUP }_analytics`,
+					'create_account',
+					'proxy'
+				);
+				expect( mockTrackEvent ).toHaveBeenCalledTimes( 1 );
+			} );
+		} );
 	} );
 } );