Merge pull request #5150 from google/enhance/5143-existing-tag-compli…

…cations

Move Existing Tag related messages to Settings Snippet Toggles

assets/js/modules/analytics-4/components/common/SettingsUseSnippetSwitch.js

@@ -19,7 +19,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,15 +35,73 @@ export default function SettingsUseSnippetSwitch() {
 		select( MODULES_ANALYTICS_4 ).getUseSnippet()
 	);
 
-	const description = useSnippet
-		? __(
-				'Site Kit will add the GA4 code automatically.',
-				'google-site-kit'
-		  )
-		: __(
-				'Site Kit will not add the GA4 code to your site.',
-				'google-site-kit'
-		  );
+	const existingTag = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getExistingTag()
+	);
+	const measurementID = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getMeasurementID()
+	);
+
+	let description;
+
+	if ( existingTag ) {
+		description =
+			existingTag === measurementID ? (
+				<Fragment>
+					<p>
+						{ sprintf(
+							/* translators: %s: existing tag ID */
+							__(
+								'A tag %s for the selected property already exists on the site.',
+								'google-site-kit'
+							),
+							existingTag
+						) }
+					</p>
+					<p>
+						{ __(
+							'Make sure you remove it if you decide to place the same GA4 tag via Site Kit, otherwise they will be duplicated.',
+							'google-site-kit'
+						) }
+					</p>
+				</Fragment>
+			) : (
+				<Fragment>
+					<p>
+						{ sprintf(
+							/* translators: %s: existing tag ID */
+							__(
+								'An existing tag %s was found on the page.',
+								'google-site-kit'
+							),
+							existingTag
+						) }
+					</p>
+					<p>
+						{ __(
+							'If you prefer to collect data using that existing GA4 tag, please select the corresponding account and property above.',
+							'google-site-kit'
+						) }
+					</p>
+				</Fragment>
+			);
+	} else {
+		description = useSnippet ? (
+			<p>
+				{ __(
+					'Site Kit will add the GA4 code automatically.',
+					'google-site-kit'
+				) }
+			</p>
+		) : (
+			<p>
+				{ __(
+					'Site Kit will not add the GA4 code to your site.',
+					'google-site-kit'
+				) }
+			</p>
+		);
+	}
 
-	return <UseSnippetSwitch description={ <p>{ description }</p> } />;
+	return <UseSnippetSwitch description={ description } />;
 }

assets/js/modules/analytics-4/components/common/SetupUseSnippetSwitch.js

@@ -79,5 +79,5 @@ export default function SetupUseSnippetSwitch() {
 			</Fragment>
 		);
 
-	return <UseSnippetSwitch description={ description } isSetup />;
+	return <UseSnippetSwitch description={ description } />;
 }

assets/js/modules/analytics-4/components/common/UseSnippetSwitch.js

@@ -19,7 +19,6 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
@@ -38,7 +37,7 @@ import Switch from '../../../../components/Switch';
 import useViewContext from '../../../../hooks/useViewContext';
 const { useSelect, useDispatch } = Data;
 
-export default function UseSnippetSwitch( { description, isSetup } ) {
+export default function UseSnippetSwitch( { description } ) {
 	const viewContext = useViewContext();
 	const useSnippet = useSelect( ( select ) =>
 		select( MODULES_ANALYTICS_4 ).getUseSnippet()
@@ -60,11 +59,7 @@ export default function UseSnippetSwitch( { description, isSetup } ) {
 	}
 
 	return (
-		<div
-			className={ classNames( 'googlesitekit-analytics-usesnippet', {
-				'googlesitekit-analytics-usesnippet--setup': isSetup,
-			} ) }
-		>
+		<div className="googlesitekit-analytics-usesnippet">
 			<Switch
 				label={ __(
 					'Place Google Analytics 4 code',
@@ -81,5 +76,4 @@ export default function UseSnippetSwitch( { description, isSetup } ) {
 
 UseSnippetSwitch.propTypes = {
 	description: PropTypes.node,
-	isSetup: PropTypes.bool,
 };