Merge pull request #9460 from google/enhance/9458-ect-default

Add new notice components for both modules.
google · Oct 4, 2024 · ea9b5ae · ea9b5ae
2 parents 4865efb + 5b48a20
commit ea9b5ae
Show file tree

Hide file tree

Showing 29 changed files with 234 additions and 62 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -75,7 +75,14 @@ export const decorators = [
 		}
 
 		return (
-			<WithTestRegistry features={ features } route={ route }>
+			<WithTestRegistry
+				features={ features }
+				route={ route }
+				// Expose registry as global for tinkering.
+				callback={ ( registry ) => {
+					global.registry = registry;
+				} }
+			>
 				<Story />
 			</WithTestRegistry>
 		);

diff --git a/assets/js/components/conversion-tracking/SetupEnhancedConversionTrackingNotice.js b/assets/js/components/conversion-tracking/SetupEnhancedConversionTrackingNotice.js
@@ -0,0 +1,50 @@
+/**
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { useSelect } from 'googlesitekit-data';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+
+export default function SetupEnhancedConversionTrackingNotice( {
+	className,
+	message,
+} ) {
+	const isCTEnabled = useSelect( ( select ) =>
+		select( CORE_SITE ).isConversionTrackingEnabled()
+	);
+
+	if ( isCTEnabled || isCTEnabled === undefined ) {
+		return null;
+	}
+
+	return (
+		<p
+			className={ classnames(
+				className,
+				'googlesitekit-color--surfaces-on-background-variant'
+			) }
+		>
+			{ message }
+		</p>
+	);
+}
diff --git a/assets/js/modules/ads/components/setup/SetupForm.js b/assets/js/modules/ads/components/setup/SetupForm.js
@@ -35,6 +35,8 @@ import { SpinnerButton } from 'googlesitekit-components';
 import { MODULES_ADS } from '../../datastore/constants';
 import StoreErrorNotices from '../../../../components/StoreErrorNotices';
 import { ConversionIDTextField } from '../common';
+import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
+import SetupEnhancedConversionTrackingNotice from '../../../../components/conversion-tracking/SetupEnhancedConversionTrackingNotice';
 
 export default function SetupForm( {
 	finishSetup,
@@ -51,6 +53,8 @@ export default function SetupForm( {
 	);
 
 	const { submitChanges } = useDispatch( MODULES_ADS );
+	const { setConversionTrackingEnabled, saveConversionTrackingSettings } =
+		useDispatch( CORE_SITE );
 
 	const submitForm = useCallback(
 		async ( event ) => {
@@ -59,10 +63,17 @@ export default function SetupForm( {
 			const { error } = await submitChanges();
 
 			if ( ! error ) {
+				setConversionTrackingEnabled( true );
+				await saveConversionTrackingSettings();
 				finishSetup();
 			}
 		},
-		[ finishSetup, submitChanges ]
+		[
+			finishSetup,
+			saveConversionTrackingSettings,
+			setConversionTrackingEnabled,
+			submitChanges,
+		]
 	);
 
 	return (
@@ -79,6 +90,14 @@ export default function SetupForm( {
 				</div>
 			) }
 
+			<SetupEnhancedConversionTrackingNotice
+				className="googlesitekit-margin-top-1"
+				message={ __(
+					'To track the performance of your campaigns, Site Kit will enable enhanced conversion tracking. You can always disable it in settings.',
+					'google-site-kit'
+				) }
+			/>
+
 			<div className="googlesitekit-setup-module__action">
 				<SpinnerButton
 					disabled={ ! canSubmitChanges || isSaving }

diff --git a/assets/js/modules/ads/components/setup/SetupForm.stories.js b/assets/js/modules/ads/components/setup/SetupForm.stories.js
@@ -30,6 +30,7 @@ import ModuleSetup from '../../../../components/setup/ModuleSetup';
 import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
 import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../../../googlesitekit/constants';
 import { Provider as ViewContextProvider } from '../../../../components/Root/ViewContextContext';
+import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
 
 function Template( { setupRegistry = () => {} } ) {
 	return (
@@ -149,6 +150,12 @@ export default {
 				provideSiteInfo( registry );
 				provideModuleRegistrations( registry );
 
+				registry
+					.dispatch( CORE_SITE )
+					.receiveGetConversionTrackingSettings( {
+						enabled: false,
+					} );
+
 				registry
 					.dispatch( MODULES_ADS )
 					.setSettings( { conversionID: 'AW-123456789' } );

diff --git a/...s/js/modules/analytics-4/components/common/AccountCreate/__snapshots__/index.test.js.snap b/...s/js/modules/analytics-4/components/common/AccountCreate/__snapshots__/index.test.js.snap
@@ -238,7 +238,7 @@ exports[`AccountCreate renders correctly when data has loaded 1`] = `
       class="googlesitekit-setup-module__inputs"
     >
       <div
-        class="googlesitekit-analytics-enable-enhanced-measurement"
+        class="googlesitekit-analytics-enable-enhanced-measurement googlesitekit-margin-bottom-0"
       >
         <div
           aria-checked="true"

diff --git a/assets/js/modules/analytics-4/components/common/AccountCreate/index.js b/assets/js/modules/analytics-4/components/common/AccountCreate/index.js
@@ -50,6 +50,7 @@ import CountrySelect from './CountrySelect';
 import WebDataStreamField from './WebDataStreamField';
 import EnhancedMeasurementSwitch from '../EnhancedMeasurementSwitch';
 import useViewContext from '../../../../../hooks/useViewContext';
+import SetupEnhancedConversionTrackingNotice from '../../../../../components/conversion-tracking/SetupEnhancedConversionTrackingNotice';
 
 export default function AccountCreate() {
 	const [ isNavigating, setIsNavigating ] = useState( false );
@@ -98,6 +99,8 @@ export default function AccountCreate() {
 	const { navigateTo } = useDispatch( CORE_LOCATION );
 	const { createAccount } = useDispatch( MODULES_ANALYTICS_4 );
 	const { setPermissionScopeError } = useDispatch( CORE_USER );
+	const { setConversionTrackingEnabled, saveConversionTrackingSettings } =
+		useDispatch( CORE_SITE );
 
 	const hasRequiredScope = hasEditScope;
 
@@ -171,16 +174,19 @@ export default function AccountCreate() {
 
 		const { error } = await createAccount();
 		if ( ! error ) {
+			setConversionTrackingEnabled( true );
+			await saveConversionTrackingSettings();
 			setIsNavigating( true );
 		}
 	}, [
-		createAccount,
-		setIsNavigating,
 		hasEditScope,
 		hasGTMScope,
-		setPermissionScopeError,
 		setValues,
 		viewContext,
+		createAccount,
+		setPermissionScopeError,
+		setConversionTrackingEnabled,
+		saveConversionTrackingSettings,
 	] );
 
 	// If the user ends up back on this component with the required scope granted,
@@ -244,7 +250,18 @@ export default function AccountCreate() {
 			</div>
 
 			<div className="googlesitekit-setup-module__inputs">
-				<EnhancedMeasurementSwitch formName={ FORM_ACCOUNT_CREATE } />
+				<EnhancedMeasurementSwitch
+					formName={ FORM_ACCOUNT_CREATE }
+					className="googlesitekit-margin-bottom-0"
+				/>
+
+				<SetupEnhancedConversionTrackingNotice
+					className="googlesitekit-margin-top-0"
+					message={ __(
+						'To track how visitors interact with your site, Site Kit will enable enhanced conversion tracking. You can always disable it in settings.',
+						'google-site-kit'
+					) }
+				/>
 			</div>
 
 			<p>

diff --git a/assets/js/modules/analytics-4/components/common/AccountCreate/index.test.js b/assets/js/modules/analytics-4/components/common/AccountCreate/index.test.js
@@ -22,6 +22,7 @@
 import {
 	createTestRegistry,
 	fireEvent,
+	muteFetch,
 	provideModules,
 	provideSiteInfo,
 	provideUserAuthentication,
@@ -40,6 +41,11 @@ import {
 import { createCacheKey } from '../../../../../googlesitekit/api';
 import { getKeys, setItem } from '../../../../../googlesitekit/api/cache';
 import AccountCreate from '.';
+import { CORE_SITE } from '../../../../../googlesitekit/datastore/site/constants';
+
+const REGEX_REST_CONVERSION_TRACKING_SETTINGS = new RegExp(
+	'^/google-site-kit/v1/core/site/data/conversion-tracking'
+);
 
 describe( 'AccountCreate', () => {
 	mockLocation();
@@ -70,6 +76,12 @@ describe( 'AccountCreate', () => {
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
 			.finishResolution( 'getAccountSummaries', [] );
+
+		// Enable Enhanced Conversion Tracking by default to avoid adding
+		// the notice in existing cases.
+		registry.dispatch( CORE_SITE ).receiveGetConversionTrackingSettings( {
+			enabled: true,
+		} );
 	} );
 
 	it( 'renders correctly in a loading state', async () => {
@@ -129,6 +141,7 @@ describe( 'AccountCreate', () => {
 					status: 200,
 				}
 			);
+			muteFetch( REGEX_REST_CONVERSION_TRACKING_SETTINGS );
 		} );
 
 		it( 'should invalidate the module cache', async () => {
@@ -186,5 +199,17 @@ describe( 'AccountCreate', () => {
 				)
 			);
 		} );
+
+		it( 'should enable conversion tracking', async () => {
+			fireEvent.click(
+				getByRole( 'button', { name: 'Create Account' } )
+			);
+
+			await waitForRegistry();
+
+			expect( fetchMock ).toHaveFetched(
+				REGEX_REST_CONVERSION_TRACKING_SETTINGS
+			);
+		} );
 	} );
 } );
diff --git a/assets/js/modules/analytics-4/components/common/EnhancedMeasurementSwitch.js b/assets/js/modules/analytics-4/components/common/EnhancedMeasurementSwitch.js
@@ -45,6 +45,7 @@ import { trackEvent } from '../../../../util';
 import useViewContext from '../../../../hooks/useViewContext';
 
 export default function EnhancedMeasurementSwitch( {
+	className,
 	onClick,
 	disabled = false,
 	loading = false,
@@ -93,6 +94,7 @@ export default function EnhancedMeasurementSwitch( {
 		<div
 			className={ classnames(
 				'googlesitekit-analytics-enable-enhanced-measurement',
+				className,
 				{
 					'googlesitekit-analytics-enable-enhanced-measurement--loading':
 						loading,

diff --git a/assets/js/modules/analytics-4/components/setup/SetupForm.js b/assets/js/modules/analytics-4/components/setup/SetupForm.js
@@ -48,6 +48,8 @@ import StoreErrorNotices from '../../../../components/StoreErrorNotices';
 
 import useViewContext from '../../../../hooks/useViewContext';
 import { trackEvent } from '../../../../util';
+import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
+import SetupEnhancedConversionTrackingNotice from '../../../../components/conversion-tracking/SetupEnhancedConversionTrackingNotice';
 
 export default function SetupForm( { finishSetup } ) {
 	const hasEditScope = useSelect( ( select ) =>
@@ -68,6 +70,8 @@ export default function SetupForm( { finishSetup } ) {
 
 	const { setValues } = useDispatch( CORE_FORMS );
 	const { submitChanges } = useDispatch( MODULES_ANALYTICS_4 );
+	const { setConversionTrackingEnabled, saveConversionTrackingSettings } =
+		useDispatch( CORE_SITE );
 
 	const isEnhancedMeasurementEnabled = useSelect( ( select ) =>
 		select( CORE_FORMS ).getValue(
@@ -90,6 +94,9 @@ export default function SetupForm( { finishSetup } ) {
 			}
 
 			if ( ! error ) {
+				setConversionTrackingEnabled( true );
+				await saveConversionTrackingSettings();
+
 				if ( isEnhancedMeasurementEnabled === true ) {
 					await trackEvent(
 						`${ viewContext }_analytics`,
@@ -102,6 +109,8 @@ export default function SetupForm( { finishSetup } ) {
 		[
 			finishSetup,
 			isEnhancedMeasurementEnabled,
+			setConversionTrackingEnabled,
+			saveConversionTrackingSettings,
 			setValues,
 			submitChanges,
 			viewContext,
@@ -126,6 +135,14 @@ export default function SetupForm( { finishSetup } ) {
 				storeName={ MODULES_ANALYTICS_4 }
 			/>
 			<SetupFormFields />
+
+			<SetupEnhancedConversionTrackingNotice
+				message={ __(
+					'To track how visitors interact with your site, Site Kit will enable enhanced conversion tracking. You can always disable it in settings.',
+					'google-site-kit'
+				) }
+			/>
+
 			<div className="googlesitekit-setup-module__action">
 				<SpinnerButton
 					disabled={ ! canSubmitChanges || isSaving }

diff --git a/assets/js/modules/analytics-4/components/setup/SetupForm.stories.js b/assets/js/modules/analytics-4/components/setup/SetupForm.stories.js
@@ -30,6 +30,7 @@ import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
 import * as fixtures from '../../datastore/__fixtures__';
 import { Provider as ViewContextProvider } from '../../../../components/Root/ViewContextContext';
 import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../../../googlesitekit/constants';
+import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
 
 const { accountSummaries, webDataStreamsBatch } = fixtures;
 const accounts = accountSummaries;
@@ -92,6 +93,12 @@ export default {
 				registry
 					.dispatch( MODULES_ANALYTICS_4 )
 					.selectAccount( accountID );
+
+				registry
+					.dispatch( CORE_SITE )
+					.receiveGetConversionTrackingSettings( {
+						enabled: false,
+					} );
 			};
 
 			return (