Update GA4 Disconnected Banner CTA design when 3 or 4 metric tiles rely on GA4

[jimmymadon]

Feature Description

When GA4 is disconnected and when more than 2 of the KMW tiles are dependant on GA4, we show the "Connect GA4 CTA Banner" in #6265. However, this behaviour was changed in #7337 where the individual "Connect GA4 CTA Tile" would stretch to take the space of as many GA4 widget tiles. This means that if 3 of the tiles are associated with GA4, a longer CTA tile will be displayed. The individual CTA was originally designed to cover one tile - now that this is getting longer and could potentially cover all 4 spaces, it should somehow "switch" to using the "Connect GA4 CTA Banner" component that was created in #6265.

---

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

Acceptance criteria

• Given GA4 is disconnected after the Key Metrics widget is set up:
  • When 1 or 2 of the selected metric tiles are reliant on GA4, continue to show the individual "Connect GA4 CTA Tile" implemented in Rendering KMW tiles should depend on associated modules #7337.
  • When 3 of the selected metric tiles are reliant on GA4, then adapt the individual "Connect GA4 CTA Tile" component to look as per this Figma mock.
  • When 4 (all) of the selected metric tiles are reliant on GA4, then render the "Connect GA4 CTA Banner" component that was created in Implement “Connect GA” CTA after Key Metrics widget setup with GA4 disconnected/unavailable #6265.

Implementation Brief

Maintain Existing Display for 1 or 2 Metric Tiles:

• Displaying the individual "Connect GA4 CTA Tile" component when 1 or 2 of the selected metric tiles rely on GA4 is already implemented in Rendering KMW tiles should depend on associated modules #7337.

Demonstrative POC Branch:

• A POC branch has been created to demonstrate the implementation of the "Connect GA4 CTA Tile" with the ghost cards (for 3 tiles) and the "Connect GA4 CTA Banner" component (for 4 tiles).

Implement Extended "Connect GA4 CTA Tile" (For 3 Tiles):

In assets/js/components/KeyMetrics/ConnectModuleCTATile.js:

• Check for the widgets that are reliant on GA4.
• For 3 GA4-reliant widgets, render both GhostCardGreenSVG and GhostCardRedSVG components inside a div.
• Arrange the cards horizontally. See the GhostCards component for implementation details.
• Utilize the Grid->Row->Cell structure to wrap elements.
• Ensure both existing elements and ghost cards occupy 50% width in the same row.
• The styles should match the Figma designs.

Register the "Connect GA4 CTA" widget (for 4 tiles)

In assets/js/googlesitekit/widgets/register-defaults.js:

• Register the ConnectGA4CTAWidget widget with the following slug and options:
  • keyMetricsConnectGA4CTA or any appropriate slug.
  • Component should be ConnectGA4CTAWidget.
  • width should be full width.
  • priority should be 1.
  • wrapWidget should be false.
  • isActive should check if GA4 is disconnected and if 4 of the selected metric tiles rely on GA4.
  • Should be registered in AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY.

In assets/js/modules/analytics-4/components/widgets/ConnectGA4CTATileWidget.js:

• Check if all 4 metric tiles rely on GA4. If so, use the Null component as the second argument in the useWidgetStateEffect hook. Else, use the ConnectModuleCTATile component.

In assets/js/modules/analytics-4/components/widgets/ConnectGA4CTAWidget.js:

• Modify the condition that renders the WidgetNull to check if 4 of the selected metric tiles rely on GA4.

Update the Stories

In assets/js/modules/analytics-4/components/widgets/ConnectGA4CTATileWidget.stories.js:

• Update the stories to have both versions with and without ghost cards.

Test Coverage

• No new tests are to be added.

QA Brief

Adding a note here for QAB from #7285: When we test this ticket, we also need to go through these steps:

Click on the "Maybe later" CTA on the GA Disconnected widget.
Reconnect and disconnect the Analytics module.
The widget should correctly reappear.

• Set up Site Kit and connect to GA4.
• Set up the Key Metrics widgets.
• Disconnect GA4.
• For 1 or 2 KMW Tiles Reliant on GA4:
  • Adjust your setup to have 1 or 2 of the selected metric tiles reliant on GA4.
  • You should see the individual "Connect GA4 CTA Tile" as designed in ticket Rendering KMW tiles should depend on associated modules #7337.
• For 3 KMW Tiles Reliant on GA4:
  • Adjust your setup to have 3 of the selected metric tiles reliant on GA4.
  • Expect to see an extended "Connect GA4 CTA Tile Widget" as per the Figma mock, which now includes 1 or 2 or 3 ghost cards based on the container width.
  • Note: The Figma mock has only two ghost cards, but the implementation displays three for the larger container width.
  • Also note that displaying the ghost cards is implemented based on the container width, not the viewport width.
• For 4 KMW Tiles Reliant on GA4:
  • Adjust your setup to have all 4 of the selected metric tiles rely on GA4.
  • You should now see the full-width "Connect GA4 CTA Widget" (banner) component as designed in ticket Implement “Connect GA” CTA after Key Metrics widget setup with GA4 disconnected/unavailable #6265.

Update

• Verify that clicking the "Maybe later" button dismisses the "Connect GA4 CTA Widget" (full-width banner) permanently.

Changelog entry

• Update the design of the CTA shown in the Key Metrics section when GA4 has been disconnected, for the cases where three or four GA4 widget tiles are present.

[jimmymadon]

Need to wait for the blocking issues here to be merged before we finalise the AC here. c.c. @bethanylang

[nfmohit]

Hi, @jimmymadon! Just a heads-up that I code-reviewed #7061 and it does look like we'll need to proceed with this issue.

Currently, we're rendering a metric widget based on its availability in the response of the core/user getKeyMetrics selector, which doesn't account for the connection of GA4.

I don't think it needs to, but at least we should update the widget registrations for GA4-dependent metrics only to be active when GA4 is connected, I think that will most likely solve the issue.

Thanks!

[jimmymadon]

@nfmohit Thanks! I think the getWidgets selector takes into consideration the modules that are active if module slugs are passed as a param option. We probably don't want to modify the getKeyMetrics selector as it would be nice to know which key metrics are "selected" based on user input answers or user-picked metrics. Unless we refactor this selector to return more widget data in addition to the slugs. Of course, the exact implementation can be discussed in the IB.

[aaemnnosttv]

• There should be no console errors from requests being made by any such non-rendered widget tiles.

@jimmymadon should any requests be made at all from non-rendered widget tiles? I would think that really no side-effects should be triggered in this case since the widgets wouldn't be rendered at all? WDYT?

[jimmymadon]

@aaemnnosttv Absolutely - no requests should be made in the first place. I have worded this better.

[aaemnnosttv]

Thanks @jimmymadon 👍 AC ✅

[aaemnnosttv]

Reducing the priority here as discussed as non-critical for launch and more thought is needed around the full-width widget special cases.

[jimmymadon]

@marrrmarrr @sigal-teller

As the description suggests, when engineering the full-width "Connect GA4 CTA Banner" @aaemnnosttv realised that the approach to render this banner was not in line with our existing Widgets API infrastructure. In order to reuse the Widgets API, we have decided to "stretch" the single "Connect GA4 CTA Tile" to cover as many spaces as there were GA4 widget tiles. So we are deviating slightly from the design doc here.

Originally, if 1 or 2 metric tiles were reliant on GA4, we would show the individual "Connect GA4 CTA" tile. If 3 or 4 metric tiles were reliant on GA4, then we would show the banner.

Now, in 7337, we have decided to stretch the individual "Connect GA4 CTA" tile to take up either 1, 2, 3 or 4 spaces depending on how many ever GA4 tiles there were.

The main deviation here is when 3 metrics are GA4 tiles and 1 metric is a Search Console tile. Originally, we planned to not show the SC tile and simply render the "Connect GA4 CTA" full width banner. This "special case", while possible, is causing us to deviate from patterns we use in our existing widgets API infrastructure. We also think that showing the single SC metric tile data might be helpful to some users who temporarily have some problems connecting GA4 (and not force them to hide the Key Metrics widget completely).

This issue is being treated as a "Nice to have" currently and will be implemented in the bug bash remediation sprints and so we would like to (re)define this. So in the event where 1 of the metric tiles is dependant on SC and the remaining three are dependant on GA4, how should we proceed? Some potential options:

1. Show the SC tile and the individual "Connect GA4 CTA" metric tile stretched to 3 spaces. Looks like this:
   
2. Show the SC tile and show the "Connect GA4 CTA" banner for the remainder 3 spaces. (Might be worth redesigning a mock here).
3. Hide the SC tile completely and show the full-width banner as we planned originally in the design doc. (We can still engineer this somehow - not impossible).

[mohitwp]

QA update ❌

@hussain-t

Issue 1: I found little awkward responsive issue when viewport size is 601px to 960px. Can we show CTA with 1 ghost tile or no ghost tile in this case ?

When 2 KMW Tiles Reliant on GA4:

When 3 KMW Tiles Reliant on GA4:

Issue 2 : Different wording on CTA version For 4 KMW Tiles Reliant on GA4 and For 3 KMW Tiles Reliant on GA4 or For 2 KMW Tiles Reliant on GA4

Issue 3 : 'May be later' button is not functional. Nothing happen when user clicks on 'May be later' button.

[hussain-t]

Thanks, @mohitwp. Regarding your observations:

Issue 1: I found little awkward responsive issue when viewport size is 601px to 960px. Can we show CTA with 1 ghost tile or no ghost tile in this case ?

The tile is displayed in full width regardless of the ghost cards. It's an existing issue. You can verify it in the main branch. Previously, I had discussed this with @jimmymadon as well.

I want to clarify the visibility of the ghost cards again, it is displayed based on the container width, i.e., the size of the CTA banner width, not the viewport width. Please refer to this point in the IB:

Also note that displaying the ghost cards is implemented based on the container width, not the viewport width.

CTA without the Ghost Cards

Issue 2 : Different wording on CTA version For 4 KMW Tiles Reliant on GA4 and For 3 KMW Tiles Reliant on GA4 or For 2 KMW Tiles Reliant on GA4

This is not related to this issue. @jimmymadon can provide if keeping the text as it is or changing would be preferred.

Issue 3 : 'May be later' button is not functional. Nothing happen when user clicks on 'May be later' button.

This is a valid issue. I will fix it in a follow-up PR.

[hussain-t]

@mohitwp, I have created a follow-up PR to fix the non-functional "Maybe later" button issue and updated the QAB.

[techanvil]

Back to you for another pass, @mohitwp.

[jimmymadon]

Issue 2 : Different wording on CTA version For 4 KMW Tiles Reliant on GA4 and For 3 KMW Tiles Reliant on GA4 or For 2 KMW Tiles Reliant on GA4

I would like to get @sigal-teller's / @marrrmarrr's opinion here. Currently, we use the "module's name" for this CTA since it is being used by other modules as well (AdSense). When referring to Analytics throughout the plugin, we always just use "Analytics". Should the "Disconnected Module CTA"'s here be an exception where we use "Google Analytics" or should we stick to just "Analytics"? Or should we consider changing the name of Analytics to Google Analytics all throughout the plugin?

[marrrmarrr]

@jimmymadon Site Kit is Google's official plugin, so all the services connected are by default Google services. So I don't think it's necessary to explicitly append "Google Analytics" everywhere.

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified GA4 Disconnected Banner CTA design when 1 or 2 or 3 or 4 metric tiles rely on GA4 as per AC.
• Verified 'May be later' button functionality.
• Verified that that clicking the "Maybe later" button dismisses the "Connect GA4 CTA Widget" (full-width banner) permanently.
• Verified that after reconnecting and disconnecting analytics The widget correctly reappears.
  Note : I will create separate ticket for issue 2 reported above.

Recording.589.mp4