Merge pull request #2158 from google/fix/2157-gtm-settings-feedback

Consolidate GTM FormInstructions for consistent feedback

Author: felixarntz

assets/js/modules/tagmanager/components/common/FormInstructions.js

@@ -19,20 +19,69 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import { STORE_NAME as CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
+import { STORE_NAME as CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
 import { STORE_NAME } from '../../datastore/constants';
+import { STORE_NAME as MODULES_ANALYTICS } from '../../../analytics/datastore/constants';
 import ExistingTagNotice from './ExistingTagNotice';
+import ErrorText from '../../../../components/error-text';
 const { useSelect } = Data;
 
 export default function FormInstructions() {
 	const hasExistingTag = useSelect( ( select ) => select( STORE_NAME ).hasExistingTag() );
 	const isSecondaryAMP = useSelect( ( select ) => select( CORE_SITE ).isSecondaryAMP() );
+	const singleAnalyticsPropertyID = useSelect( ( select ) => select( STORE_NAME ).getSingleAnalyticsPropertyID() );
+	const hasMultipleAnalyticsPropertyIDs = useSelect( ( select ) => select( STORE_NAME ).hasMultipleAnalyticsPropertyIDs() );
+	const analyticsPropertyID = useSelect( ( select ) => select( MODULES_ANALYTICS ).getPropertyID() );
+	const analyticsModuleActive = useSelect( ( select ) => select( CORE_MODULES ).isModuleActive( 'analytics' ) );
+
+	// Multiple property IDs implies secondary AMP where selected containers don't reference the same Analytics property ID.
+	if ( hasMultipleAnalyticsPropertyIDs ) {
+		const message = __( 'Looks like you’re already using Google Analytics within your Google Tag Manager configurations. However, the configured Analytics tags reference different property IDs. You need to configure the same Analytics property in both containers.', 'google-site-kit' );
+
+		return <ErrorText message={ message } />;
+	}
+
+	if ( analyticsModuleActive && singleAnalyticsPropertyID ) {
+		// If the selected containers reference a different property ID
+		// than is currently set in the Analytics module, display an error explaining why the user is blocked.
+		if ( singleAnalyticsPropertyID !== analyticsPropertyID ) {
+			/* translators: %1$s: Tag Manager Analytics property ID, %2$s: Analytics property ID */
+			const message = __( 'Looks like you’re already using Google Analytics within your Google Tag Manager configuration. However, its Analytics property %1$s is different from the Analytics property %2$s, which is currently selected in the plugin. You need to configure the same Analytics property in both places.', 'google-site-kit' );
+
+			return <ErrorText message={ sprintf( message, singleAnalyticsPropertyID, analyticsPropertyID ) } />;
+		}
+		// If the Analytics property ID in the container(s) matches
+		// the property ID configured for the Analytics module,
+		// inform the user that Tag Manager will take over outputting the tag/snippet.
+		return (
+			<p>
+				{
+					sprintf(
+						/* translators: %s: Analytics property ID */
+						__( 'Looks like you’re using Google Analytics. Your Analytics property %s is already set up in your Google Tag Manager configuration, so Site Kit will switch to using Google Tag Manager for Analytics.', 'google-site-kit' ),
+						singleAnalyticsPropertyID
+					)
+				}
+			</p>
+		);
+	}
+
+	// If the Analytics module is not active, and selected containers reference a singular property ID,
+	// recommend continuing with Analytics setup.
+	if ( ! analyticsModuleActive && singleAnalyticsPropertyID ) {
+		return (
+			<p>
+				{ __( 'Looks like you’re already using Google Analytics within your Google Tag Manager configuration. Activate the Google Analytics module in Site Kit to see relevant insights in your dashboard.', 'google-site-kit' ) }
+			</p>
+		);
+	}
 
 	if ( hasExistingTag ) {
 		return <ExistingTagNotice />;

assets/js/modules/tagmanager/components/setup/SetupForm.js

@@ -45,7 +45,7 @@ import {
 import Button from '../../../../components/button';
 import Link from '../../../../components/link';
 import SetupErrorNotice from './SetupErrorNotice';
-import SetupFormInstructions from './SetupFormInstructions';
+import FormInstructions from '../common/FormInstructions';
 const { useSelect, useDispatch } = Data;
 
 export default function SetupForm( { finishSetup } ) {
@@ -134,7 +134,7 @@ export default function SetupForm( { finishSetup } ) {
 			onSubmit={ onSubmit }
 		>
 			<SetupErrorNotice />
-			<SetupFormInstructions />
+			<FormInstructions />
 
 			<div className="googlesitekit-setup-module__inputs">
 				<AccountSelect />

assets/js/modules/tagmanager/components/setup/SetupFormInstructions.js

@@ -18,5 +18,4 @@
 
 export { default as SetupErrorNotice } from './SetupErrorNotice';
 export { default as SetupForm } from './SetupForm';
-export { default as SetupFormInstructions } from './SetupFormInstructions';
 export { default as SetupMain } from './SetupMain';