🖍 Register new setting UI with dropdown for flexible Tracking Handler…

… selection This dropdown will only be visible when SiteKit is installed & active.
GoogleForCreators · Jan 17, 2024 · 7eb0e5a · 7eb0e5a
1 parent e45af01
commit 7eb0e5a
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 78 deletions.
diff --git a/packages/wp-dashboard/src/components/editorSettings/editorSettings.js b/packages/wp-dashboard/src/components/editorSettings/editorSettings.js
@@ -85,6 +85,7 @@ function EditorSettings() {
     shopifyAccessToken,
     autoAdvance,
     defaultPageDuration,
+    googleAnalyticsHandler,
   } = useEditorSettings(
     ({
       actions: {
@@ -117,6 +118,7 @@ function EditorSettings() {
           shopifyAccessToken,
           autoAdvance,
           defaultPageDuration,
+          googleAnalyticsHandler,
         },
         media: { isLoading: isMediaLoading, newlyCreatedMediaIds },
         publisherLogos: { publisherLogos },
@@ -155,6 +157,7 @@ function EditorSettings() {
       shopifyAccessToken,
       autoAdvance,
       defaultPageDuration,
+      googleAnalyticsHandler,
     })
   );
 
@@ -329,6 +332,12 @@ function EditorSettings() {
     [setPublisherLogoAsDefault]
   );
 
+  const handleUpdateGoogleAnalyticsHandler = useCallback(
+    (newGoogleAnalyticsHandler) =>
+      updateSettings({ googleAnalyticsHandler: newGoogleAnalyticsHandler }),
+    [updateSettings]
+  );
+
   return (
     <Layout.Provider>
       <Wrapper data-testid="editor-settings">
@@ -346,6 +355,10 @@ function EditorSettings() {
                   usingLegacyAnalytics={usingLegacyAnalytics}
                   handleMigrateLegacyAnalytics={handleMigrateLegacyAnalytics}
                   siteKitStatus={siteKit}
+                  googleAnalyticsHandler={googleAnalyticsHandler}
+                  handleUpdateGoogleAnalyticsHandler={
+                    handleUpdateGoogleAnalyticsHandler
+                  }
                 />
                 <PublisherLogoSettings
                   onAddLogos={handleAddLogos}

diff --git a/packages/wp-dashboard/src/components/editorSettings/googleAnalytics/index.js b/packages/wp-dashboard/src/components/editorSettings/googleAnalytics/index.js
@@ -34,6 +34,7 @@ import {
   Icons,
   Text,
   Link,
+  DropDown,
 } from '@googleforcreators/design-system';
 import styled from 'styled-components';
 
@@ -84,6 +85,16 @@ export const TEXT = {
   ),
 };
 
+const ANALYTICS_DROPDOWN_OPTIONS = [
+  { value: 'site-kit', label: 'Use Site Kit for analytics (default)' },
+  { value: 'web-stories', label: 'Use only Web Stories for analytics' },
+  { value: 'both', label: 'Use both' },
+];
+
+const DropdownContainer = styled.div`
+  padding-top: 12px;
+`;
+
 const WarningContainer = styled.div`
   display: flex;
   gap: 8px;
@@ -111,8 +122,13 @@ function GoogleAnalyticsSettings({
   usingLegacyAnalytics,
   handleMigrateLegacyAnalytics,
   siteKitStatus = {},
+  googleAnalyticsHandler,
+  handleUpdateGoogleAnalyticsHandler,
 }) {
   const [analyticsId, setAnalyticsId] = useState(googleAnalyticsId);
+  const [analyticsHandler, setAnalyticsHandler] = useState(
+    googleAnalyticsHandler
+  );
   const [inputError, setInputError] = useState('');
   const canSave = analyticsId !== googleAnalyticsId && !inputError;
   const disableSaveButton = !canSave;
@@ -123,6 +139,10 @@ function GoogleAnalyticsSettings({
     setAnalyticsId(googleAnalyticsId);
   }, [googleAnalyticsId]);
 
+  useEffect(() => {
+    setAnalyticsHandler(googleAnalyticsHandler);
+  }, [googleAnalyticsHandler]);
+
   const onUpdateAnalyticsId = useCallback((event) => {
     const { value } = event.target;
     setAnalyticsId(value);
@@ -136,6 +156,14 @@ function GoogleAnalyticsSettings({
     setInputError(TEXT.INPUT_ERROR);
   }, []);
 
+  const onUpdateAnalyticsHandler = useCallback(
+    (value) => {
+      setAnalyticsHandler(value);
+      handleUpdateGoogleAnalyticsHandler(value);
+    },
+    [handleUpdateGoogleAnalyticsHandler]
+  );
+
   const handleOnSave = useCallback(() => {
     if (canSave) {
       handleUpdateAnalyticsId(analyticsId);
@@ -247,97 +275,110 @@ function GoogleAnalyticsSettings({
         )}
       </div>
       <div>
-        {analyticsActive ? (
-          <TextInputHelperText size={TextSize.Small}>
-            {TEXT.SITE_KIT_IN_USE}
-          </TextInputHelperText>
-        ) : (
+        <InlineForm>
+          <VisuallyHiddenLabel htmlFor="gaTrackingId">
+            {TEXT.ARIA_LABEL}
+          </VisuallyHiddenLabel>
+          <SettingsTextInput
+            aria-label={TEXT.ARIA_LABEL}
+            id="gaTrackingId"
+            value={analyticsId}
+            onChange={onUpdateAnalyticsId}
+            onKeyDown={handleOnKeyDown}
+            placeholder={TEXT.PLACEHOLDER}
+            hasError={Boolean(inputError)}
+            hint={inputError}
+          />
+          <SaveButton
+            type={ButtonType.Secondary}
+            size={ButtonSize.Small}
+            disabled={disableSaveButton}
+            onClick={handleOnSave}
+          >
+            {TEXT.SUBMIT_BUTTON}
+          </SaveButton>
+        </InlineForm>
+        <TextInputHelperText size={TextSize.Small}>
+          <TranslateWithMarkup
+            mapping={{
+              a: (
+                <InlineLink
+                  href={TEXT.CONTEXT_LINK}
+                  rel="noreferrer"
+                  target="_blank"
+                  size={TextSize.Small}
+                  onClick={onContextClick}
+                />
+              ),
+            }}
+          >
+            {TEXT.CONTEXT}
+          </TranslateWithMarkup>
+        </TextInputHelperText>
+        {analyticsActive && (
           <>
-            <InlineForm>
-              <VisuallyHiddenLabel htmlFor="gaTrackingId">
-                {TEXT.ARIA_LABEL}
-              </VisuallyHiddenLabel>
-              <SettingsTextInput
-                aria-label={TEXT.ARIA_LABEL}
-                id="gaTrackingId"
-                value={analyticsId}
-                onChange={onUpdateAnalyticsId}
-                onKeyDown={handleOnKeyDown}
-                placeholder={TEXT.PLACEHOLDER}
-                hasError={Boolean(inputError)}
-                hint={inputError}
-                disabled={analyticsActive}
-              />
-              <SaveButton
-                type={ButtonType.Secondary}
-                size={ButtonSize.Small}
-                disabled={disableSaveButton}
-                onClick={handleOnSave}
-              >
-                {TEXT.SUBMIT_BUTTON}
-              </SaveButton>
-            </InlineForm>
             <TextInputHelperText size={TextSize.Small}>
+              <TranslateWithMarkup>
+                {__('<b>Note: </b>', 'web-stories')}
+              </TranslateWithMarkup>
+              {TEXT.SITE_KIT_IN_USE}
+            </TextInputHelperText>
+            <DropdownContainer>
+              <DropDown
+                id="analyticsType"
+                ariaLabel={__('Analytics Type', 'web-stories')}
+                placeholder={__('Select Analytics Type', 'web-stories')}
+                options={ANALYTICS_DROPDOWN_OPTIONS}
+                onMenuItemClick={(_, newValue) => {
+                  onUpdateAnalyticsHandler(newValue);
+                }}
+                selectedValue={analyticsHandler}
+              />
+            </DropdownContainer>
+          </>
+        )}
+        {!googleAnalyticsId || googleAnalyticsId.startsWith('UA-') ? (
+          <WarningContainer>
+            <WarningIcon aria-hidden />
+            <Message>
               <TranslateWithMarkup
                 mapping={{
                   a: (
-                    <InlineLink
-                      href={TEXT.CONTEXT_LINK}
+                    <Link
+                      href={__(
+                        'https://support.google.com/analytics/answer/11583528?hl=en',
+                        'web-stories'
+                      )}
+                      rel="noreferrer"
+                      target="_blank"
+                      size={TextSize.Small}
+                      onClick={(evt) =>
+                        trackClick(evt, 'click_ua_deprecation_docs')
+                      }
+                    />
+                  ),
+                  a2: (
+                    <Link
+                      href={__(
+                        'https://support.google.com/analytics/answer/10089681?hl=en',
+                        'web-stories'
+                      )}
                       rel="noreferrer"
                       target="_blank"
                       size={TextSize.Small}
-                      onClick={onContextClick}
+                      onClick={(evt) => trackClick(evt, 'click_ga4_docs')}
                     />
                   ),
                 }}
               >
-                {TEXT.CONTEXT}
+                {__(
+                  'As <a>previously announced</a>, Universal Analytics will stop processing new visits starting <b>July 1, 2023</b>. We recommend switching to <a2>Google Analytics 4</a2> (GA4), our analytics product of record.',
+                  'web-stories'
+                )}
               </TranslateWithMarkup>
-            </TextInputHelperText>
-            {!googleAnalyticsId || googleAnalyticsId.startsWith('UA-') ? (
-              <WarningContainer>
-                <WarningIcon aria-hidden />
-                <Message>
-                  <TranslateWithMarkup
-                    mapping={{
-                      a: (
-                        <Link
-                          href={__(
-                            'https://support.google.com/analytics/answer/11583528?hl=en',
-                            'web-stories'
-                          )}
-                          rel="noreferrer"
-                          target="_blank"
-                          size={TextSize.Small}
-                          onClick={(evt) =>
-                            trackClick(evt, 'click_ua_deprecation_docs')
-                          }
-                        />
-                      ),
-                      a2: (
-                        <Link
-                          href={__(
-                            'https://support.google.com/analytics/answer/10089681?hl=en',
-                            'web-stories'
-                          )}
-                          rel="noreferrer"
-                          target="_blank"
-                          size={TextSize.Small}
-                          onClick={(evt) => trackClick(evt, 'click_ga4_docs')}
-                        />
-                      ),
-                    }}
-                  >
-                    {__(
-                      'As <a>previously announced</a>, Universal Analytics will stop processing new visits starting <b>July 1, 2023</b>. We recommend switching to <a2>Google Analytics 4</a2> (GA4), our analytics product of record.',
-                      'web-stories'
-                    )}
-                  </TranslateWithMarkup>
-                </Message>
-              </WarningContainer>
-            ) : null}
-          </>
-        )}
+            </Message>
+          </WarningContainer>
+        ) : null}
       </div>
     </SettingForm>
   );
@@ -355,6 +396,8 @@ GoogleAnalyticsSettings.propTypes = {
     analyticsActive: PropTypes.bool,
     analyticsLink: PropTypes.string,
   }),
+  googleAnalyticsHandler: PropTypes.string,
+  handleUpdateGoogleAnalyticsHandler: PropTypes.func,
 };
 
 export default GoogleAnalyticsSettings;