Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Key Metrics “Connect GA” CTA #7255

Merged
merged 29 commits into from
Jul 7, 2023
Merged

Key Metrics “Connect GA” CTA #7255

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
da2251a
Create CTA widget layout components.
nfmohit Jul 4, 2023
9ae0ba5
Use CTA widget layout components.
nfmohit Jul 4, 2023
422aeb8
Create `ConnectGA4CTAWidget`.
nfmohit Jul 4, 2023
df1186d
Add widget visibility conditions.
nfmohit Jul 4, 2023
0214cfa
Complete actions.
nfmohit Jul 4, 2023
7b5d9bc
Register widget.
nfmohit Jul 4, 2023
54772b5
Register widget only if feature flag is enabled.
nfmohit Jul 4, 2023
4b81db6
Handle GA4 connection.
nfmohit Jul 5, 2023
fa90fd9
Cleanup stories.
nfmohit Jul 5, 2023
05ef7a3
Add tests for `ConnectGA4CTAWidget`.
nfmohit Jul 5, 2023
3a3a2fa
Add VRT references.
nfmohit Jul 5, 2023
ea13972
Fix test case label.
nfmohit Jul 5, 2023
21d695c
Move checks to `isActive`.
nfmohit Jul 6, 2023
1c70894
Remove unnecessary data from story.
nfmohit Jul 6, 2023
669c01a
Merge branch 'develop' into enhancement/#6265-connect-ga4-cta.
nfmohit Jul 6, 2023
28e454f
Create and use `provideWidgetRegistrations`.
nfmohit Jul 6, 2023
c4127a1
Fix typography.
nfmohit Jul 6, 2023
a03b8bf
Minor enhancements.
nfmohit Jul 6, 2023
4ce1d73
Update VRT references.
nfmohit Jul 6, 2023
7a6fcfc
Fix link colour.
nfmohit Jul 6, 2023
295dd6c
Merge branch 'develop' into enhancement/#6265-connect-ga4-cta.
nfmohit Jul 6, 2023
5cee01e
Move widget inside module.
nfmohit Jul 6, 2023
e44ad83
Remove redundant check for GA4 connection inside widget.
nfmohit Jul 6, 2023
aa3fdd0
Remove `provideWidgetRegistrations`.
nfmohit Jul 6, 2023
84f2dab
Update VRT references.
nfmohit Jul 6, 2023
a67951f
Fix `receiveIsUserInputCompleted` behaviour.
nfmohit Jul 6, 2023
c3972db
Alphabetically order exports.
nfmohit Jul 7, 2023
88b514c
Isolate test-only utility.
nfmohit Jul 7, 2023
4952559
Remove unnecessary GA4 connection.
nfmohit Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 20 additions & 22 deletions assets/js/components/KeyMetrics/ConnectGA4CTAWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ import { SpinnerButton } from 'googlesitekit-components';
import KeyMetricsCTAContent from './KeyMetricsCTAContent';
import KeyMetricsCTAFooter from './KeyMetricsCTAFooter';
import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
import {
CORE_USER,
KM_CONNECT_GA4_CTA_WIDGET_DISMISSED_ITEM_KEY,
} from '../../googlesitekit/datastore/user/constants';
import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
import { AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY } from '../../googlesitekit/widgets/default-areas';
import {
Expand All @@ -47,14 +50,6 @@ import { snapshotAllStores } from '../../googlesitekit/data/create-snapshot-stor
const { useSelect, useDispatch } = Data;

export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {
const DISMISSED_ITEM_KEY = 'key-metrics-connect-ga4-cta-widget';

const isCTADismissed = useSelect( ( select ) =>
select( CORE_USER ).isItemDismissed( DISMISSED_ITEM_KEY )
);
const isUserInputCompleted = useSelect( ( select ) =>
select( CORE_USER ).isUserInputCompleted()
);
const isGA4Connected = useSelect( ( select ) =>
select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
);
Expand Down Expand Up @@ -91,13 +86,16 @@ export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {
true
)
);
const settingsURL = useSelect( ( select ) =>
select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' )
);
const connectGA4URL = useSelect( ( select ) => {
const settingsURL = select( CORE_SITE ).getAdminURL(
'googlesitekit-settings'
);

return `${ settingsURL }#connected-services/analytics/edit`;
} );
const isAnalyticsConnected = useSelect( ( select ) =>
select( CORE_MODULES ).isModuleConnected( 'analytics' )
);
const connectGA4URL = `${ settingsURL }#connected-services/analytics/edit`;
const isNavigatingToGA4URL = useSelect( ( select ) =>
select( CORE_LOCATION ).isNavigatingTo( connectGA4URL )
);
Expand Down Expand Up @@ -127,17 +125,17 @@ export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {

await snapshotAllStores();

navigateTo( `${ settingsURL }#connected-services/analytics/edit` );
navigateTo( connectGA4URL );
}
}, [
activateAnalytics,
completeAnalyticsActivation,
connectGA4URL,
isAnalyticsActive,
isAnalyticsConnected,
isGA4Connected,
navigateTo,
setValues,
settingsURL,
] );

const [ inProgress, setInProgress ] = useState( false );
Expand Down Expand Up @@ -166,12 +164,7 @@ export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {
isNavigatingToGA4URL,
] );

if (
isCTADismissed ||
! isUserInputCompleted ||
isGA4Connected ||
ga4DependantKeyMetrics.length < 3
) {
if ( ga4DependantKeyMetrics.length < 3 ) {
return <WidgetNull />;
}

Expand All @@ -180,7 +173,11 @@ export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {
noPadding
Footer={ () => (
<KeyMetricsCTAFooter
onActionClick={ () => dismissItem( DISMISSED_ITEM_KEY ) }
onActionClick={ () =>
dismissItem(
KM_CONNECT_GA4_CTA_WIDGET_DISMISSED_ITEM_KEY
)
}
/>
) }
>
Expand All @@ -198,6 +195,7 @@ export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {
<SpinnerButton
onClick={ handleCTAClick }
isSaving={ inProgress }
aaemnnosttv marked this conversation as resolved.
Show resolved Hide resolved
disabled={ inProgress }
>
{ __( 'Connect Google Analytics', 'google-site-kit' ) }
</SpinnerButton>
Expand Down
59 changes: 17 additions & 42 deletions assets/js/components/KeyMetrics/ConnectGA4CTAWidget.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,17 @@
* Internal dependencies
*/
import {
CORE_USER,
KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
KM_ANALYTICS_LOYAL_VISITORS,
KM_ANALYTICS_NEW_VISITORS,
KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
} from '../../googlesitekit/datastore/user/constants';
import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
import { AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY } from '../../googlesitekit/widgets/default-areas';
import { CONTEXT_MAIN_DASHBOARD_KEY_METRICS } from '../../googlesitekit/widgets/default-contexts';
import { provideKeyMetrics, provideModules } from '../../../../tests/js/utils';
import {
provideKeyMetrics,
provideWidgetRegistrations,
} from '../../../../tests/js/utils';
import { withWidgetComponentProps } from '../../googlesitekit/widgets/util';
import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
import ConnectGA4CTAWidget from './ConnectGA4CTAWidget';
Expand All @@ -44,25 +45,13 @@ export const Default = Template.bind( {} );
Default.storyName = 'ConnectGA4CTAWidget';
Default.scenario = {
label: 'KeyMetrics/ConnectGA4CTAWidget',
delay: 250,
};

export default {
title: 'Key Metrics/ConnectGA4CTAWidget',
decorators: [
( Story ) => {
const setupRegistry = ( registry ) => {
registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
global._googlesitekitUserData.isUserInputCompleted = true;

provideModules( registry, [
{
slug: 'analytics-4',
active: false,
connected: false,
},
] );

const keyMetricWidgets = [
KM_ANALYTICS_LOYAL_VISITORS,
KM_ANALYTICS_NEW_VISITORS,
Expand All @@ -74,33 +63,19 @@ export default {
widgetSlugs: keyMetricWidgets,
} );

registry
.dispatch( CORE_WIDGETS )
.registerWidgetArea(
AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY,
{
title: 'Key metrics',
}
);
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea(
AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY,
CONTEXT_MAIN_DASHBOARD_KEY_METRICS
);

keyMetricWidgets.forEach( ( slug ) => {
registry.dispatch( CORE_WIDGETS ).registerWidget( slug, {
Component: () => <div>Hello test.</div>,
modules: [ 'analytics-4' ],
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget(
slug,
AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY
);
} );
provideWidgetRegistrations(
registry,
AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY,
'Key metrics',
CONTEXT_MAIN_DASHBOARD_KEY_METRICS,
keyMetricWidgets.reduce(
( acc, widget ) => ( {
...acc,
[ widget ]: { modules: [ 'analytics-4' ] },
} ),
{}
)
);
};

return (
Expand Down
Loading