Implement “Connect GA” CTA after Key Metrics widget setup with GA4 disconnected/unavailable

[jimmymadon]

Feature Description

If more than two of the selected metrics within the Key Metrics widget area are from GA4, but GA4 is disconnected, then a new CTA banner should be rendered to encourage the user to reconnect the GA.

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 banner 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 banner should be rendered if more than 2 of the selected metrics are dependant on GA4 and GA4 was disconnected after the widget's setup.
• Clicking on the button in the CTA should take the user to the "Connect service - Analytics" page to setup GA (Similar to the "Setup Google Analytics" CTA within the Search Traffic widget.

Implementation Brief

Create the components

• 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 ConnectGA4CTA component in the same directory Scaffold Key metrics Setup CTA on Main Dashboard #6209 is implemented.
• The component should render the following:
  • Start with a section tag. Followed by Grid->Row->Cell components.
  • Render the red heading text within an h3 tag per the Figma design. The text should be translated.
  • Render the description text within a p tag per the Figma design. The text should be translated.
  • Render the Connect Google Analytics button within the Button 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,
    	] );

  • Extract the SVGs from the Figma design and render them. It should match Figma design.
    
• Create a footer element or a reusable child component with the following:
  • Start with a footer tag. Followed by Grid->Row->Cell components.
  • Render the Maybe later link within the Link component per the Figma design. The text should be translated.
  • The onClick callback should dismiss the CTA by dispatching the dismissItem action. An appropriate constant key should be created to pass it to the action.
• 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 ConnectGA4CTAWidget 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 ConnectGA4CTA component within the Widget component if the following conditions are met:
  • If the GA4 connect CTA is not dismissed. Check using the isItemDismissed selector.
  • 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 ConnectGA4CTAWidget component.

Register the widget

• Register the ConnectGA4CTAWidget 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 FULL.
  • wrapWidget should be false.
  • priority should be 1.
  • modules should be ['analytics'].

Test Coverage

• Add tests for the ConnectGA4CTA component.

QA Brief

• Set up Site Kit with the Analytics module.
• Enable the userInput feature flag.
• Complete the user input questionnaire and answer Publish a blog for the first (purpose) question. This should configure key metrics to display widgets all dependant on Analytics.
• Go to the Site Kit dashboard and verify that you are able to see key metric widgets.
• Now, from Site Kit settings, disconnect the Analytics module.
• Go back to the Site Kit dashboard and verify that you can see the Google Analytics is disconnected CTA widget, according to the ACs and Figma designs.
• Clicking on the CTA should navigate you to Analytics module setup.
• Clicking on Maybe later should dismiss the widget.
• Verify the Key Metrics -> ConnectGA4CTAWidget Storybook story.

Changelog entry

• Add CTA to connect Analytics if disconnected after setting up Key Metrics.

[tofumatt]

From the Figma mocks, it looks like the CTA widget could be rendered as a half-width widget if it makes sense (eg. with multiple widgets specified, like

site-kit-wp/assets/js/modules/adsense/index.js

Line 128 in c2f085d

width: [ widgets.WIDGET_WIDTHS.HALF, widgets.WIDGET_WIDTHS.FULL ],

).

But that can be addressed in the IB. Anyway, ACs here look good, moving to IB 👍🏻

[tofumatt]

All looks good, just one minor naming point; the point of the module is to Connect GA4, so might as well name it ConnectGA4CTA instead of GA4CTAConnect which just seems a bit less obvious to parse. 😅

IB ✅

[nfmohit]

I'm seeing a discrepancy between the ACs and the IB here regarding the Connect Google Analytics CTA action.

The ACs say:

Clicking on the button in the CTA should take the user to the "Connect services" page to setup GA.

The IB says:

Render the Connect Google Analytics button within the Button component per the Figma design. The text should be translated. The onClick callback should follow a similar implementation as the SetupModule component.

I do not think connecting the module would be as simple as the SetupModule component because there are aspects of selecting an Analytics account, property, web data stream, and error handling.

@jimmymadon Any advice on which approach should be taken here?

CC: @hussain-t @tofumatt

[jimmymadon]

@nfmohit I have updated the ACs here. I think we can use the same behaviour as in the "Set up Google Analytics" CTA within the Search Traffic widget. Would this be fine?

[nfmohit]

@nfmohit I have updated the ACs here. I think we can use the same behaviour as in the "Set up Google Analytics" CTA within the Search Traffic widget. Would this be fine?

That's perfect, thank you @jimmymadon!

[wpdarren]

QA Update: ⚠️

@nfmohit this is looking good but I do have a few observations.

These could be expected at this point in the engineering, but I do not want to assume 😁

1. I am seeing console errors when I return to the dashboard after disconnecting Analytics.

Google Site Kit API Error method:GET datapoint:report type:modules identifier:analytics-4 error:"Module must be active to request data."

2. On the Figma designs, all of the key metrics tiles disappear, but I still see them but they are set to 0% etc.

3. If you click on the 'Maybe later' link the CTA does disappear, but when you connect Analytics again, and then disconnect later, the CTA no longer appears. Is this expected? I suspect not.

See Screenshot below.

[nfmohit]

Thank you for sharing your observations, @wpdarren!

@jimmymadon Could you possibly help a little to answer Darren's questions here?

On the Figma designs, all of the key metrics tiles disappear, but I still see them but they are set to 0% etc.

The ACs of this issue don't mention about updating the visibility of the other widgets. Is this something that will be addressed by another issue?

I am seeing console errors when I return to the dashboard after disconnecting Analytics.

According to my observation, these errors are caused by the other widgets making GA4 report requests. Not rendering them when GA4 is disconnected should solve it.

If you click on the 'Maybe later' link the CTA does disappear, but when you connect Analytics again, and then disconnect later, the CTA no longer appears. Is this expected? I suspect not.

This is indeed a valid concern. What do you think of setting an expiry to the dismissal so that it expires after a while, say 24 hours? That way, it'll not show up if GA4 is connected again, but will show up again if it is disconnected again.

Thank you!

[jimmymadon]

@nfmohit @wpdarren

On the Figma designs, all of the key metrics tiles disappear, but I still see them but they are set to 0% etc.

#7061 will prevent other widget tiles from showing up as long as the getKeyMetrics selector does not return any widgets. If GA4 is disconnected, the widget tiles that rely on GA4 will not show up but the one that relies on Search Console probably will. I have created #7278 which we can implement or simply close once this is tested after #7061 is merged.

I am seeing console errors when I return to the dashboard after disconnecting Analytics.

According to my observation, these errors are caused by the other widgets making GA4 report requests. Not rendering them when GA4 is disconnected should solve it.

Yup - I think so too.

If you click on the 'Maybe later' link the CTA does disappear, but when you connect Analytics again, and then disconnect later, the CTA no longer appears. Is this expected? I suspect not.

This is indeed a valid concern. What do you think of setting an expiry to the dismissal so that it expires after a while, say 24 hours? That way, it'll not show up if GA4 is connected again, but will show up again if it is disconnected again.

I feel we should "reset" this persistent dismissal when GA4 is "connected" rather than relying on expiry times. We could perhaps do this in the on_activation callback? A merge reviewer can perhaps approve this quickly before we proceed.

[nfmohit]

If you click on the 'Maybe later' link the CTA does disappear, but when you connect Analytics again, and then disconnect later, the CTA no longer appears. Is this expected? I suspect not.

This is indeed a valid concern. What do you think of setting an expiry to the dismissal so that it expires after a while, say 24 hours? That way, it'll not show up if GA4 is connected again, but will show up again if it is disconnected again.

I feel we should "reset" this persistent dismissal when GA4 is "connected" rather than relying on expiry times. We could perhaps do this in the on_activation callback? A merge reviewer can perhaps approve this quickly before we proceed.

That is a good idea. However, if I'm not wrong, I do not think we have in our infrastructure a way to remove a dismissed item. One way could be updating the dismissed item with a very small expiry, e.g. 1 second. Otherwise, we'll have to enhance the Dismissed_Items class to allow removing dismissed items.

Additionally, I think it'd be wiser to address this in a new issue as everything else is according to spec.

@jimmymadon What do you think? Thank you!

@eugene-manuilov @aaemnnosttv @tofumatt @techanvil Requesting feedback from one/more of you here too please, thank you!

[aaemnnosttv]

That is a good idea. However, if I'm not wrong, I do not think we have in our infrastructure a way to remove a dismissed item. One way could be updating the dismissed item with a very small expiry, e.g. 1 second. Otherwise, we'll have to enhance the Dismissed_Items class to allow removing dismissed items.

It seems reasonable that we should allow for removing a dismissed item. We could technically do it now as you said by re-adding it again with the smallest possible TTL, but that would be unnecessarily indirect to avoid adding a simple method to do the same thing explicitly.

Additionally, I think it'd be wiser to address this in a new issue as everything else is according to spec.

Agreed, this is outside of the scope and also involves some changes that wouldn't be entirely behind the feature flag so it's best to handle this separately.

[wpdarren]

QA Update: ✅

Verified:

• Go to the Site Kit dashboard after setting up Site Kit and GA. and are able to see key metric widgets.
• Disconnect the Analytics module. You can see the Google Analytics is disconnected CTA widget.
  • Clicking on the CTA navigates you to Analytics module setup.
  • Clicking on Maybe later dismisses the widget.
• Verified the Key Metrics -> ConnectGA4CTAWidget Storybook story.

Please note that 3 issues were identified above. All will be fixed in other tickets.

Screenshots