ACR Dashboard Subtle Notification

assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.js

@@ -48,15 +48,33 @@ import {
 	USER_INPUT_QUESTIONS_PURPOSE,
 } from '../user-input/util/constants';
 import { CORE_UI } from '../../googlesitekit/datastore/ui/constants';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
 
 function ConfirmSitePurposeChangeModal( {
 	dialogActive = false,
 	handleDialog = null,
 } ) {
 	const [ isSaving, setIsSaving ] = useState( false );
 
+	const includeConversionTailoredMetrics = useSelect( ( select ) => {
+		const isGA4Connected =
+			select( CORE_MODULES ).isModuleConnected( 'analytics-4' );
+
+		if ( ! isGA4Connected ) {
+			return false;
+		}
+
+		return select(
+			MODULES_ANALYTICS_4
+		).haveConversionEventsForTailoredMetrics();
+	} );
+
 	const newMetrics = useSelect( ( select ) => {
-		return select( CORE_USER ).getKeyMetrics();
+		return select( CORE_USER ).getAnswerBasedMetrics(
+			null,
+			includeConversionTailoredMetrics
+		);
 	} );
 
 	const savedPurpose = useSelect( ( select ) =>

assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.stories.js

@@ -21,19 +21,11 @@
  */
 import ConfirmSitePurposeChangeModal from './ConfirmSitePurposeChangeModal';
 import {
-	provideKeyMetrics,
 	provideKeyMetricsUserInputSettings,
-	provideModules,
 	provideUserAuthentication,
 	provideSiteInfo,
 } from '../../../../tests/js/utils';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
-import {
-	KM_ANALYTICS_MOST_ENGAGING_PAGES,
-	KM_ANALYTICS_NEW_VISITORS,
-	KM_ANALYTICS_POPULAR_AUTHORS,
-	KM_ANALYTICS_POPULAR_CONTENT,
-} from '../../googlesitekit/datastore/user/constants';
 import { CORE_FORMS } from '../../googlesitekit/datastore/forms/constants';
 import {
 	FORM_USER_INPUT_QUESTION_SNAPSHOT,
@@ -68,31 +60,14 @@ export default {
 					.setValues( FORM_USER_INPUT_QUESTION_SNAPSHOT, {
 						[ USER_INPUT_QUESTIONS_PURPOSE ]: [ 'publish_news' ],
 					} );
-				provideModules( registry, [
-					{
-						slug: 'analytics-4',
-						active: true,
-						connected: true,
-					},
-				] );
 				provideUserAuthentication( registry );
-				provideKeyMetrics( registry, {
-					widgetSlugs: [
-						KM_ANALYTICS_NEW_VISITORS,
-						KM_ANALYTICS_POPULAR_CONTENT,
-						KM_ANALYTICS_MOST_ENGAGING_PAGES,
-						KM_ANALYTICS_POPULAR_AUTHORS,
-					],
-				} );
 				provideKeyMetricsUserInputSettings( registry, {
 					purpose: {
-						values: [ 'publish_news' ],
+						values: [ 'publish_blog' ],
 						scope: 'site',
 					},
 				} );
-				provideSiteInfo( registry, {
-					postTypes: [ { slug: 'product', label: 'Product' } ],
-				} );
+				provideSiteInfo( registry );
 			};
 
 			return (

assets/js/components/KeyMetrics/ConversionReportingDashboardSubtleNotification.js

@@ -0,0 +1,94 @@
+/**
+ * ConversionReportingDashboardSubtleNotification component.
+ *
+ * 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 PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelect } from 'googlesitekit-data';
+import { Button, SpinnerButton } from 'googlesitekit-components';
+import StarFill from '../../../svg/icons/star-fill.svg';
+import SubtleNotification from '../../googlesitekit/notifications/components/layout/SubtleNotification';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import Link from '../Link';
+
+export default function ConversionReportingDashboardSubtleNotification( {
+	ctaLabel,
+	handleCTAClick,
+	isSaving = false,
+	onDismiss,
+	dismissCTALabel = __( 'Maybe later', 'google-site-kit' ),
+} ) {
+	const documentationURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getDocumentationLinkURL( 'key-metrics' )
+	);
+
+	return (
+		<SubtleNotification
+			className="googlesitekit-acr-subtle-notification"
+			title={ __( 'New key metrics were added!', 'google-site-kit' ) }
+			description={ createInterpolateElement(
+				__(
+					'We’ve extended your metrics selection with metrics that aren’t available by default in Analytics. Add them to your dashboard to get a better understanding of how users interact with your site. <a>Learn more</a>',
+					'google-site-kit'
+				),
+				{
+					a: (
+						<Link
+							href={ documentationURL }
+							external
+							aria-label={ __(
+								'Learn more about advanced conversion reporting',
+								'google-site-kit'
+							) }
+						/>
+					),
+				}
+			) }
+			dismissCTA={
+				<Button tertiary onClick={ onDismiss }>
+					{ dismissCTALabel }
+				</Button>
+			}
+			additionalCTA={
+				<SpinnerButton onClick={ handleCTAClick } isSaving={ isSaving }>
+					{ ctaLabel }
+				</SpinnerButton>
+			}
+			icon={ <StarFill width={ 24 } height={ 24 } /> }
+		/>
+	);
+}
+
+ConversionReportingDashboardSubtleNotification.propTypes = {
+	ctaLabel: PropTypes.string.isRequired,
+	handleCTAClick: PropTypes.func.isRequired,
+	isSaving: PropTypes.bool,
+	onDismiss: PropTypes.func.isRequired,
+	dismissCTALabel: PropTypes.string,
+};

assets/js/components/KeyMetrics/ConversionReportingNotificationCTAWidget.js

@@ -0,0 +1,115 @@
+/**
+ * ConversionReportingNotificationCTAWidget component.
+ *
+ * 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { useSelect, useDispatch } from 'googlesitekit-data';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import whenActive from '../../util/when-active';
+import ConversionReportingDashboardSubtleNotification from './ConversionReportingDashboardSubtleNotification';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+
+function ConversionReportingNotificationCTAWidget( { Widget, WidgetNull } ) {
+	const [ isSaving, setIsSaving ] = useState( false );
+	const isUserInputCompleted = useSelect( ( select ) =>
+		select( CORE_USER ).isUserInputCompleted()
+	);
+
+	const keyMetricSettings = useSelect( ( select ) =>
+		select( CORE_USER ).getKeyMetricsSettings()
+	);
+	const hasUserPickedMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getUserPickedMetrics()
+	);
+
+	const haveConversionReportingEventsForTailoredMetrics = useSelect(
+		( select ) =>
+			select(
+				MODULES_ANALYTICS_4
+			).haveConversionEventsForTailoredMetrics()
+	);
+
+	// Initial callout is surfaced to the users with tailored metrics, if detectedEvents setting
+	// has a conversion event associated with the ACR key metrics matching the current site purpose answer.
+	// If new ACR key metrics that can be added are found using haveConversionReportingEventsForTailoredMetrics,
+	// and have not been already included, which is determined by includeConversionTailoredMetrics setting, callout banner should be displayed.
+	const shouldShowInitialCalloutForTailoredMetrics =
+		! hasUserPickedMetrics?.length &&
+		isUserInputCompleted &&
+		haveConversionReportingEventsForTailoredMetrics &&
+		! keyMetricSettings?.includeConversionTailoredMetrics;
+
+	const { setKeyMetricsSetting, saveKeyMetricsSettings } =
+		useDispatch( CORE_USER );
+	const { dismissNewConversionReportingEvents } =
+		useDispatch( MODULES_ANALYTICS_4 );
+
+	const handleAddMetricsClick = useCallback( () => {
+		if ( shouldShowInitialCalloutForTailoredMetrics ) {
+			setIsSaving( true );
+			setKeyMetricsSetting( 'includeConversionTailoredMetrics', true );
+			saveKeyMetricsSettings( {
+				widgetSlugs: undefined,
+			} );
+			setIsSaving( false );
+		}
+
+		dismissNewConversionReportingEvents();
+	}, [
+		setKeyMetricsSetting,
+		saveKeyMetricsSettings,
+		dismissNewConversionReportingEvents,
+		shouldShowInitialCalloutForTailoredMetrics,
+	] );
+
+	if ( ! shouldShowInitialCalloutForTailoredMetrics ) {
+		return <WidgetNull />;
+	}
+
+	return (
+		<Widget noPadding fullWidth>
+			<ConversionReportingDashboardSubtleNotification
+				ctaLabel={ __( 'Add metrics', 'google-site-kit' ) }
+				handleCTAClick={ handleAddMetricsClick }
+				isSaving={ isSaving }
+				onDismiss={ dismissNewConversionReportingEvents }
+			/>
+		</Widget>
+	);
+}
+
+ConversionReportingNotificationCTAWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType,
+};
+
+export default whenActive( { moduleName: 'analytics-4' } )(
+	ConversionReportingNotificationCTAWidget
+);