Skip to content

Commit

Permalink
Merge pull request #6808 from google/enhance/#6738-create-setup-form-ga4
Browse files Browse the repository at this point in the history 
Enhance/#6738 - Create new `SetupFormGA4` component
  • Loading branch information
@tofumatt
tofumatt committed Apr 4, 2023
2 parents 2fc61c7 + b9c496e commit 6ea9e69
Show file tree
Hide file tree
Showing 28 changed files with 557 additions and 116 deletions.
103 changes: 103 additions & 0 deletions assets/js/modules/analytics/components/common/EnableUniversalAnalytics.js
View file
@@ -0,0 +1,103 @@
/**
* Enable Universal Analytics component.
*
* Site Kit by Google, Copyright 2023 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 { Fragment, useCallback } from '@wordpress/element';

/**
* Internal dependencies
*/
import Data from 'googlesitekit-data';
import { Switch } from 'googlesitekit-components';
import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
import { MODULES_ANALYTICS, FORM_SETUP } from '../../datastore/constants';
import ProfileSelect from './ProfileSelect';
import PropertySelect from './PropertySelect';
const { useSelect, useDispatch } = Data;

export default function EnableUniversalAnalytics( { children } ) {
const accountID = useSelect( ( select ) =>
select( MODULES_ANALYTICS ).getAccountID()
);
const properties = useSelect( ( select ) => {
if ( ! accountID ) {
return [];
}

return select( MODULES_ANALYTICS ).getProperties( accountID ) || [];
} );

const { setValues } = useDispatch( CORE_FORMS );

const isUAEnabled = useSelect( ( select ) =>
select( CORE_FORMS ).getValue( FORM_SETUP, 'enableUA' )
);

const onChange = useCallback( () => {
setValues( FORM_SETUP, { enableUA: ! isUAEnabled } );
}, [ setValues, isUAEnabled ] );

if ( properties.length === 0 ) {
return null;
}

return (
<Fragment>
<div className="googlesitekit-analytics-usesnippet">
<Switch
label={ __(
'Enable Universal Analytics',
'google-site-kit'
) }
checked={ isUAEnabled }
onClick={ onChange }
hideLabel={ false }
/>
<p>
{ __(
'The old version of Analytics, which stops recording data after July 1, 2023',
'google-site-kit'
) }
</p>
</div>
{ isUAEnabled && (
<Fragment>
<div className="googlesitekit-setup-module__inputs">
<PropertySelect />
<ProfileSelect />
</div>

{ /* Renders the SetupUseSnippetSwitch or SettingsUseSnippetSwitch */ }
{ children }
</Fragment>
) }
</Fragment>
);
}

EnableUniversalAnalytics.propTypes = {
children: PropTypes.node.isRequired,
};
1 change: 1 addition & 0 deletions assets/js/modules/analytics/components/common/index.js
View file
Expand Up @@ -23,6 +23,7 @@ export { default as AdsConversionIDTextField } from './AdsConversionIDTextField'
export { default as AdSenseLinkCTA } from './AdSenseLinkCTA';
export { default as AnonymizeIPSwitch } from './AnonymizeIPSwitch';
export { default as ExistingGTMPropertyNotice } from './ExistingGTMPropertyNotice';
export { default as EnableUniversalAnalytics } from './EnableUniversalAnalytics';
export { default as ProfileNameTextField } from './ProfileNameTextField';
export { default as GA4Notice } from './GA4Notice';
export { default as ProfileSelect } from './ProfileSelect';
Expand Down
19 changes: 18 additions & 1 deletion assets/js/modules/analytics/components/setup/SetupForm.js
View file
Expand Up @@ -39,23 +39,31 @@ import {
MODULES_ANALYTICS,
FORM_SETUP,
EDIT_SCOPE,
SETUP_FLOW_MODE_GA4_LEGACY,
} from '../../datastore/constants';
import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
import { isPermissionScopeError } from '../../../../util/errors';
import SetupFormUA from './SetupFormUA';
import SetupFormGA4 from './SetupFormGA4';
import SetupFormGA4Legacy from './SetupFormGA4Legacy';
import SetupFormGA4Transitional from './SetupFormGA4Transitional';
import StoreErrorNotices from '../../../../components/StoreErrorNotices';
import { ExistingGTMPropertyNotice } from '../common';
import { CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
import { MODULES_TAGMANAGER } from '../../../tagmanager/datastore/constants';
import { MODULES_ANALYTICS_4 } from '../../../analytics-4/datastore/constants';
import { useFeature } from '../../../../hooks/useFeature';
const { useSelect, useDispatch } = Data;

export default function SetupForm( { finishSetup } ) {
const ga4ReportingEnabled = useFeature( 'ga4Reporting' );
const canSubmitChanges = useSelect( ( select ) =>
select( MODULES_ANALYTICS ).canSubmitChanges()
);
const canSubmitChangesGA4 = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).canSubmitChanges()
);
const hasEditScope = useSelect( ( select ) =>
select( CORE_USER ).hasScope( EDIT_SCOPE )
);
Expand Down Expand Up @@ -121,11 +129,20 @@ export default function SetupForm( { finishSetup } ) {
/>
{ setupFlowMode === SETUP_FLOW_MODE_UA && <SetupFormUA /> }
{ setupFlowMode === SETUP_FLOW_MODE_GA4 && <SetupFormGA4 /> }
{ setupFlowMode === SETUP_FLOW_MODE_GA4_LEGACY && (
<SetupFormGA4Legacy />
) }
{ setupFlowMode === SETUP_FLOW_MODE_GA4_TRANSITIONAL && (
<SetupFormGA4Transitional />
) }
<div className="googlesitekit-setup-module__action">
<Button disabled={ ! canSubmitChanges }>
<Button
disabled={
ga4ReportingEnabled
? ! canSubmitChangesGA4
: ! canSubmitChanges
}
>
{ __( 'Configure Analytics', 'google-site-kit' ) }
</Button>
</div>
Expand Down
83 changes: 9 additions & 74 deletions assets/js/modules/analytics/components/setup/SetupFormGA4.js
View file
Expand Up @@ -16,87 +16,31 @@
* limitations under the License.
*/

/**
* External dependencies
*/
import { useMount } from 'react-use';

/**
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { Fragment, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';

/**
* Internal dependencies
*/
import Data from 'googlesitekit-data';
import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
import {
MODULES_ANALYTICS,
PROPERTY_CREATE,
FORM_SETUP,
ACCOUNT_CREATE,
} from '../../datastore/constants';
import { MODULES_ANALYTICS_4 } from '../../../analytics-4/datastore/constants';
import { MODULES_ANALYTICS } from '../../datastore/constants';
import {
PropertySelect as GA4PropertySelect,
WebDataStreamSelect as GA4WebDataStreamSelect,
} from '../../../analytics-4/components/common';
import { AccountSelect, GA4PropertyNotice } from '../common';
import { AccountSelect } from '../common';
import SetupUseSnippetSwitchUA from './SetupUseSnippetSwitch';
import { SetupUseSnippetSwitch as SetupUseSnippetSwitchGA4 } from '../../../analytics-4/components/setup';
const { useSelect, useDispatch } = Data;
import EnableUniversalAnalytics from '../common/EnableUniversalAnalytics';
const { useSelect } = Data;

export default function SetupFormGA4() {
const accounts =
useSelect( ( select ) => select( MODULES_ANALYTICS ).getAccounts() ) ||
[];

const ga4HasExistingTag = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).hasExistingTag()
);
const ga4ExistingTag = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getExistingTag()
);
const ga4MeasurementID = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getMeasurementID()
);
const ga4PropertyID = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getPropertyID()
);

const accountID = useSelect( ( select ) =>
select( MODULES_ANALYTICS ).getAccountID()
);
const { selectProperty } = useDispatch( MODULES_ANALYTICS );
const { setValues } = useDispatch( CORE_FORMS );
const { setUseSnippet } = useDispatch( MODULES_ANALYTICS_4 );

const shouldShowAssociatedPropertyNotice =
accountID && accountID !== ACCOUNT_CREATE && ga4PropertyID;

const hasExistingGA4Tag = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).hasExistingTag()
);

useMount( () => {
selectProperty( PROPERTY_CREATE );
setValues( FORM_SETUP, {
profileName: _x(
'All Web Site Data',
'default Analytics view name',
'google-site-kit'
),
} );
} );

useEffect( () => {
if ( ga4HasExistingTag ) {
setUseSnippet( ga4ExistingTag !== ga4MeasurementID );
}
}, [ setUseSnippet, ga4HasExistingTag, ga4ExistingTag, ga4MeasurementID ] );

return (
<Fragment>
{ !! accounts.length && (
Expand All @@ -114,18 +58,9 @@ export default function SetupFormGA4() {
<GA4WebDataStreamSelect />
</div>

{ hasExistingGA4Tag && <SetupUseSnippetSwitchGA4 /> }

{ shouldShowAssociatedPropertyNotice && (
<GA4PropertyNotice
notice={ __(
'An associated Universal Analytics property will also be created.',
'google-site-kit'
) }
>
<SetupUseSnippetSwitchUA />
</GA4PropertyNotice>
) }
<EnableUniversalAnalytics>
<SetupUseSnippetSwitchUA />
</EnableUniversalAnalytics>
</Fragment>
);
}

0 comments on commit 6ea9e69

Please sign in to comment.