Change CTA placement for Search Funnel on mobile

[tofumatt]

Feature Description

Currently, when Analytics is not connected (or when no Goals are setup for Analytics), the Search Funnel shows the CTA between the "Total Impressions" and "Total Clicks" metrics and the chart:

As part of the Zero States epic, the CTA for Search Funnel on mobile should be moved below the chart:

---

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

Acceptance criteria

• This feature should be implemented behind the zeroDataStates feature flag. #4726
• On mobile viewports only, the Search Funnel CTA to connect Analytics should appear below the Search Funnel chart, but only when Analytics is entirely disconnected. If Analytics is connected but the Goals CTA should appear, then it makes more sense to show the Goals CTA in the normal place (otherwise we'll have two half-width rows)
• The desktop and tablet views should not be changed as a result of this change.
• The CTA to complete Analytics setup should appear above the chart as well, because this is a more "important" CTA so it makes sense to stay where it is.

Implementation Brief

• Once https://github.com/google/site-kit-wp/issues/4694 has been merged.
• Using assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/Overview.js,
  • Check if the zeroDataStates feature flag is enabled via the useFeature hook.
  • Get the breakpoint from the useBreakpoint hook.
  • If we are on a mobile breakpoint and the zeroDataStates feature flag is enabled, do not render ActivateModuleCTA and CompleteModuleActivationCTA when the Analytics modules is not active or not connected.
• Using assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/index.js,
  • Check if the zeroDataStates feature flag is enabled via the useFeature hook.
  • Get the breakpoint from the useBreakpoint hook.
  • If we are on a mobile breakpoint and the zeroDataStates feature flag is enabled, render assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/ActivateAnalyticsCTA.js when the Analytics modules is not active or not connected.
• When Analytics is connected, the "Goals" CTA should be rendered where it is currently.

Test Coverage

• No new tests to be added.

QA Brief

• Ensure you're on the mobile view.

• Ensure Analytics is disconnected.

• Enable zeroDataStates feature flag.

• Verify Activate Analytics CTA is rendered below the chart as per the AC:

  

• Ensure the CTA to complete Analytics setup should appear above the chart. As it is as of now.

• Ensure the Goals CTA should appear as it is as of now.

Changelog entry

• Update CTA placement for the Search Funnel widget on mobile.

[felixarntz]

@tofumatt I marked this as blocked by #4694. The order doesn't really matter, but I think it makes sense to block one by the other to avoid conflicts.

[asvinb]

@tofumatt Can you clarify what you meant by the following?:

If Analytics is connected but the Goals CTA should appear, then it makes more sense to show the Goals CTA in the normal place (otherwise we'll have two half-width rows)

[tofumatt]

So there are two Analytics CTA states. One is when Analytics isn't connected at all, and it takes up two <DataBlock /> and is "full-width" on mobile:

The other is when Analytics is connected, but you don't have any goals:

For the first one (Analytics not connected), the Figma mocks show the CTA below the chart, which I think is good and we want to implement.

But in the case of the second one, we want a CTA that just shows one chart and mentions connecting goals, and should maintain the layout used in the second screenshot.

[eugene-manuilov]

IB :heavy_check_mark:

[hussain-t]

@tofumatt @asvinb there is another case where Analytics is active but not connected. Hence the Search Funnel shows the CTA between the "Total Impressions" and "Total Clicks" metrics and the chart:

What do we do in this case?

[tofumatt]

I'm not sure we have a design for that, but there's sort of two schools of thought there:

1. Keep it where the CTAs are, because that's "consistent"
2. bring it up higher to draw attention to the half-way setup

I'm actually for the second option (eg. leaving it as it is), because this isn't a CTA to encourage users, it's more of a notice that they didn't quite complete setup and still have more to do.

That said, it's pretty minor. It's probably easier code-wise to always have the CTA to connect and the CTA to complete setup in the same place. If that's the case let's always put them in the same spot. That might make it easier for QA too.

So let's say the CTAs should always appear below the chart, including the "complete activation" CTA.

Let's keep that CTA where it is actually, because it makes sense to make it more prominent. I've noted that in the ACs 👍🏻

[hussain-t]

Thanks, @tofumatt. I agree with leaving it as it is now. Moving it below the chart requires some style tweaks since the CTA overlaps the below widget.

[wpdarren]

QA Update: ✅

@hussain-t @tofumatt I have passed this but did wonder why we still have the blue to complete Analytics setup CTA? Is this worth including in a separate ticket to make the UI look like more like the activate analytics/goals CTA. I can see it was discussed here. Thoughts?

Verified:

• The Activate Analytics CTA is rendered below the chart as per the AC
• The CTA to complete Analytics setup does above the chart. As it is as of now.
• The Goals CTA appears as it is as of now.
• Tested this on various mobile devices on Android and iOS.

Screenshots

  

[felixarntz]

invalid