Implement “Connect GA” metric tile CTA after Key Metrics widget setup

[jimmymadon]

Feature Description

If one or two selected metrics within the Key Metrics widget area are from GA4, but GA4 is disconnected, then a new CTA tile should be rendered to encourage the user to reconnect the module.

Refer to the relevant section in the design doc for additional context.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new Connect GA CTA tile should be implemented as per the Figma mock. Note that the width of the tile should be the same as a widget's standard "quarter" width and not 1/3rd as in the Figma design.
• The tile should be rendered if either 1 or 2 of the selected metrics are dependant on GA4 and GA4 was disconnected after the widget's setup.
• Clicking on the link in the CTA should take the user to the Connect services page for GA.

Implementation Brief

• Wait for Scaffold Key metrics Setup CTA on Main Dashboard #6209, Improve fetching key metrics based on user selected metrics #6257, and Register the new key metric widgets #6313 are merged.
• Create a new ConnectGA4TileCTA component in the same directory Scaffold Key metrics Setup CTA on Main Dashboard #6209 is implemented.
• The component should render the following:
  • Use assets/svg/graphics/analytics.svg as the image.
  • Render the description text within a p tag per the Figma design. The text should be translated.
  • Render the link text within the Link component per the Figma design. The text should be translated. The onClick callback should follow a similar implementation as the SetupModule component:
    

    site-kit-wp/assets/js/components/settings/SetupModule.js

    Lines 57 to 82 in 43c4364

    	const onSetup = useCallback( async () => {
    	setIsSaving( true );
    	const { error, response } = await activateModule( slug );
    	if ( ! error ) {
    	await trackEvent(
    	`${ viewContext }_module-list`,
    	'activate_module',
    	slug
    	);
    	navigateTo( response.moduleReauthURL );
    	} else {
    	setInternalServerError( {
    	id: 'activate-module-error',
    	description: error.message,
    	} );
    	setIsSaving( false );
    	}
    	}, [
    	activateModule,
    	navigateTo,
    	setInternalServerError,
    	slug,
    	viewContext,
    	] );

• The component should render null if the GA4 module is connected using the isModuleConnected selector.
• Using the getKeyMetrics selector, the component should check if any of the selected metrics are from GA4. If so, it should render the CTA component. Otherwise, it should render null.
• Create a new ConnectGA4TileCTAWidget component in the same directory Scaffold Key metrics Setup CTA on Main Dashboard #6209 is implemented.
• It takes the Widget and WidgetNull components as props.
• Render the ConnectGA4TileCTA component within the Widget component if the following conditions are met:
  • If the GA4 module isn't connected. Check using the isModuleConnected selector.
  • If the selected metrics are dependent on GA4. Check using the getKeyMetrics selector.
• Otherwise, render the WidgetNull component.
• Create stories for the ConnectGA4TileCTAWidget component.

Register the widget

• Register the ConnectGA4TileCTAWidget component in the KeyMetrics widget area once Register the new key metric widgets #6313 is merged.
• The widget should be registered with the following settings:
  • width should be QUARTER.
  • wrapWidget should be false.
  • priority should be 1.
  • modules should be ['analytics'].

Test Coverage

• Add tests/storybook coverage for the ConnectGA4TileCTA component.

QA Brief

• Ensure that the ga4Reporting and userInput feature flags are enabled.
• Make sure Analytics(4) module is connected.
• Setup Key Metrics manually with the following snippet.

(async () => {
await googlesitekit.data.dispatch('core/user').setKeyMetricsSetting( 'widgetSlugs', ['kmAnalyticsTopTrafficSource', 'kmAnalyticsLoyalVisitors'] );
await googlesitekit.data.dispatch('core/user').saveKeyMetricsSettings();
})();

• Disconnect Analytics module.
• See the new widget appear in the Key Metrics area.
• All other conditions (No active analytics widget, more than 2 widgets, combination of search-console and analytics) can be tested by changing the widgetSlugs in the above snippet. ie.

(async () => {
await googlesitekit.data.dispatch('core/user').setKeyMetricsSetting( 'widgetSlugs', ['kmAnalyticsTopTrafficSource', 'kmAnalyticsLoyalVisitors', "kmAnalyticsPopularProducts"] );
await googlesitekit.data.dispatch('core/user').saveKeyMetricsSettings();
})();

Changelog entry

• Add the Connect GA tile to Key Metrics widget.

[tofumatt]

ACs here are good 👍🏻

[tofumatt]

Similar to #6265, just an adjustment to naming (GA4CTATileConnect -> ConnectGA4TileCTA). Added storybook coverage as well.

Otherwise looks good, IB ✅

[mohitwp]

QA Update ❌

@kuasha420

Issue 1 : Font color for link is not consistent with other links color on dashboard and not same as font color mentioned under Figma.

Question :

1. CTA text missing 'Google' as mentioned under Figma. Did we make changes to text ?
2. Also, analytics related KM tiles and "Connect GA" tile appears on Dashboard also when Analytics module is not set up on new site. Is this expected for now ?

[jimmymadon]

@mohitwp Assigning @kuasha420 as he did the execution here. Thanks.

[mohitwp]

Thanks, @jimmymadon ! Sorry for the confusion.

[kuasha420]

@mohitwp Thank you for sharing your observations.

I have filled a follow up PR to fix this. See the discussion on slack for more detail on it, specially regarding accessibility.

1. This was a conscious decision made during the development as it is consistent with how we refer Analytics plugin wide. See here for details.
2. The Other tiles will be tackled in a separate issue. But this one should not be visible on a fresh site if it doesn't have 1-3 KM Widgets setup that depends on Analytics. If you are using the snippet in the QAB, it will appear because the snippet is forcefully setting up KM. In a normal circumstance, it will not appear.

Cheers.

[mohitwp]

QA Update ⚠️

@kuasha420

• Tested on staging environment.
• CTA font color issue is fixed now.

As discussed on slack 'Connect Analytics' tile will appear when 1-3 of the KM widgets are from Analytics. I use the snippet mentioned under QAB and tried different combination of 1-3 KMA widgets but 'Connect Analytics' tile is not showing on when we are using 3 KMW. In case of 2 widgets it is showing.
IN AC number is 1-2 and in doc it is 1-3.
https://docs.google.com/document/d/1k8NOo2xEHUQAcgYG0TB5sUjGcPiC8SWIalEdd9G8-9g/edit#heading=h.hfwitp2lb9g3
So, can you please confirm the exact number here in this case. ?

Tested below cases-

• Tested when Number of KMAW is 2 - PASS
• Tested when Number of KMAW widget is 1 - PASS
• Tested combination of KMAW and SC widget - PASS
• Tested only SC console widget - PASS
• Tested when Number of KMAW is 3 - FAIL
• Tested when Number of KMAW is 4 - PASS

Recording.420.mp4

[jimmymadon]

Just a quick summary based on our discussion in Slack of when to show the Connect GA4 CTA:

0 metrics rely on GA4 => Do nothing.
1 or 2 metrics rely on GA4 => Show Tile CTA
3 or all metrics rely on GA4 => Show the long bar CTA (Issue #6265).

[mohitwp]

QA Update ✅

• Tested on dev environment.

• Verified 'Connect Analytics CTA' tile with Figma designs.

• Verified 'Connect Analytics CTA' tile is showing in below conditions.

  -- When Number of KMAW is 2 - PASS
  -- When Number of KMAW widget is 1 - PASS
  -- When Number of KMAW is 0 - PASS
  -- Combination of KMAW and SC widget - PASS
  --Only SC console widget - PASS
  -- When Number of KMAW is 3 - PASS
  -- When Number of KMAW is 4 - PASS