Implement the “no audiences” banner happy path view

[techanvil]

Feature Description

Implement the banners shown in the scenarios where all of the selected audiences have been archived in Analytics. This includes both variants of the banner that will be shown to the primary user.

The error state and the secondary user variants of the banner will be implemented separately, see https://github.com/google/site-kit-wp/issues/8190 and https://github.com/google/site-kit-wp/issues/8577.

See no audiences banner in the design doc.

---

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

Acceptance criteria

• Given there is a populated audience selection:
  • Upon the next sync of the cached audience list, if all of the audiences in the selection have been removed from Analytics, the "no audiences" banner should be displayed instead of the set of audiences tiles on the dashboard.
  • The "no audiences" banner will be shown in one of two variants:
  • If there are still audiences available to select, the banner will include a select other groups link button.
    • The variant should follow the Figma design with the following copy:
    • It looks like your visitor groups aren’t available anymore. [Select other groups]().
      You can deactivate this widget in [Settings]().
    • The select other groups link button should open the Selection Panel.
    • The Settings link should navigate to the Settings section.
  • If there are no audiences available to select, the banner will include a link to a relevant support article.
    • The variant should follow the Figma design with the following copy:
    • It looks like your visitor groups aren’t available anymore. Learn more about how to group site visitors in [Analytics]().
      You can deactivate this widget in [Settings]().
    • The Analytics link should open the introduction to audiences in Google Analytics article in a new tab.
    • The Settings link should navigate to the Settings section.
  • The "no audiences" banner should continue to be shown in the appropriate variant until a new audience selection has been saved.
• The Info Notice Widget should only be displayed when the Audience Tiles Widget is displayed.

---

• Ensure the mobile designs are implemented as per Figma.
• Note that all copy should be verified with Figma as the source of truth.

Implementation Brief

• [ ] Create following 4 new components inside assets/js/modules/analytics-4/components/audience-segmentation/dashboard/

  • [x] NoAudienceBannerWidget - Component responsible for returning the appropriate component, either NonConfigurableNoAudienceBannerContent or ConfigurableNoAudienceBannerContent. Component should accept the Widget and WidgetNull just like AudienceTilesWidget component mentioned above.
  • [ ] ConfigurableNoAudienceBannerContent - This component is respondible for rendering the "no audience" banner when dashboard is not in view only context.
  • [ ] NonConfigurableNoAudienceBannerContent - This component is respondible for rendering the "no audience" banner when dashboard is in view only context.
  • [x] AudienceTiles - This component will be respondible to display the configured audiences tiles. This will only be called from inside AudienceTilesWidget component, when we made a successful check that at least one of the configured audiences exist in the Google analytics.

• [x] AudienceTilesWidget component. Accepts Widget and WidgetNull props. WidgetNull should be passed already, we just need to destructure it in the component.

  • [x] Inside this component only retrieve the configured audiences and the available audiences using useSelect hook. This should be already there in the component.
  • [x] All other business logic which is mainly related to fetching different reports for audiences, needs to be moved to AudienceTiles component as mentioned in AudienceTiles component brief.
  • [x] If none of selected audiences are available in getAvailableAudiences:
  • [x] Return WidgetNull from the component if none of the configured audiences present in the available audiences. This implies that we need to display the NoAudienceBannerWidget component described below.

• [x] NoAudienceBannerWidget component. Accepts Widget and WidgetNull prop.

  • [x] Inside this component only retrieve the configured audiences (configuredAudiences) and the available audiences (getAvailableAudiences) using useSelect hook, refer AudienceTilesWidget component for the same.
  • [x] Return WidgetNull from component if any of the audience in configuredAudiences is available inside getAvailableAudiences.
  • [x] If none of selected audiences are available in getAvailableAudiences:
  • [ ] If the dashboard is not in view only context, return ConfigurableNoAudienceBannerContent component.
  • [ ] If the dashboard is in view only context, return NonConfigurableNoAudienceBannerContent banner component.

• [ ] ConfigurableNoAudienceBannerContent component. Accepts Widget prop.

  • [ ] If there are audiences available (apart from the one selected previously) in getAvailableAudiences, then the banner should match the figma design.
  • [ ] This component should be created from the Widget component.
  • [ ] "Select other groups" will open the selection panel. To open the panel, AUDIENCE_SELECTION_PANEL_OPENED_KEY needs to be set to true in CORE_UI data store as can be seen here.
  • [ ] "Settings" link should navigate to the Site Kit's Admin Settings > Visitor groups.
  • [ ] If there are audiences unavailable in getAvailableAudiences, we should display a different text in the banner as shown in figma design.
  • [ ] The "Analytics" link should open the introduction to audiences in Google Analytics article in a new tab.

• [ ] NonConfigurableNoAudienceBannerContent component. Accepts Widget prop.

  • [ ] This component should be created from the Widget component and should match the figma design.
  • [ ] "Temporarily Hide" link should dismiss the banner and make use of dismissible items infra to note that banner should not get dismissed.
  • [ ] Hiding the banner would effectively hide the widget altogether. So add an additional check here before registring widget to check if the item is in the dismissed items list.

• [x] AudienceTiles component. Accepts Widget prop.

  • [ ] This can be taken as is from the existing AudienceTilesWidget component.
  • [ ] Remove the call for below from the component as it is no longer needed.

    export default whenActive()

• [x] In assets/js/modules/analytics-4/index.js, register a new widget using widgets.registerWidget(...) after analyticsAudienceTiles.

  • [x] Pass component as NoAudienceBannerWidget.

• [x] Most of the styling from #8798 can be reused for the banner as those are mostly similar in aesthetics.

• [x] Ensure that mobile design is matching the figma design

  • [ ] Use the Cell component within the widget to stack the components vertically for the mobile design.
  • [ ] A reference of ConsentModeSetupCTAWidget can be take here for how it uses Grid and Cell components to take into account about the mobile design.

Test Coverage

1. Add the tests for NoAudienceBannerWidget, ConfigurableNoAudienceBannerContent and NonConfigurableNoAudienceBannerContent components.
2. Add the tests for AudienceTiles component.
3. Update tests for AudienceTilesWidget component as we need to test whether it is returning appropriate components from it based on audiences availability and dashboard view context.
4. Update tests for AudienceTilesWidget component as we need to test whether it is returning WidgetNull when no configured audiences available anymore.
5. Fix any other failing VRTs.

QA Brief

• Enable Audience Segmentation feature flag.
• Connect Analytics module.
  • At this point, only the Setup CTA should be present. (Ignore the InfoNoticeWidget always being there, it is being tackled in a separate issue.)
• Setup Audience Segmentation Feature.
  • The Audience Tile should appear.
• Delete one of the currently selected audiences.
  • The audience tiles should continue to appear with the available audiences
• Delete all currently selected audience.
  • The No Audience Banner should appear as described in AC instead of the Audience Tiles.
    • If there are still audience to select, the "Select other groups" CTA should appear.
      • Clicking that will open Audience Selection Panel.
  • If there is no additional audience available to select, the alternate version should appear with a support link to analytics as described in AC.
• Confirm that the Info Notice Widget is only displayed when the actual Audience Tiles Widget is also being displayed.

TIP: It may be necessary to sync available audiences after archiving/deleting them in Analytics. You can force this using the following snippet.

await googlesitekit.data.dispatch('modules/analytics-4').syncAvailableAudiences()

For Quickly testing the banner. You can set configured audience to a non-existent one.

await googlesitekit.data.dispatch('modules/analytics-4').setConfiguredAudiences(['garboge'])

And for seeing the alternate version, sett the available audiences to an empty array so no audience is available.

await googlesitekit.data.dispatch('modules/analytics-4').setAvailableAudiences([])

Changelog entry

• Implement the Audience Segmentation "no audiences" banner.

[techanvil]

I've moved this back to Backlog as the final in-progress changes to the design doc, relating to audience caching, will probably affect the AC for this one

[techanvil]

The audience caching aspect of the design doc has been sufficiently finalised, and I've moved this back to AC.

[kuasha420]

Hey @ankitrox, Thanks for drafting the IB. A few suggestions:

Instead of baking this inside AudienceTilesWidget, what about we create a separate NoAudienceBannerWidget widget, and we can encapsulate the logic for the banner with/without configurable audiences inside this new widget.

The implication is that we need to render WidgetNull from either widget when they're not relevant, ie. return WidgetNull when configured audiences are not available from AudienceTilesWidget and reverse for NoAudienceBannerWidget.

Also instead of having two banners, we can keep the logic in a single one, since the difference is only copy and link. Should be manageable in one place.

Finally, some styling and layout ideas can be borrowed from ConnecAnalyticsCTA which is being implemented in #8156 (PR) since they're very similar.

Cheers.

[ankitrox]

Thank you for reviewing the IB @kuasha420

Adding the NoAudienceBannerWidget seems like a good approach. I have updated the IB to include that component, using this will no longer need a new AudienceTiles component so I removed it.

However, I think we should keep the ConfiguarblesNoAudienceBanner and NonConfiguarblesNoAudienceBanner components separate just to keep them simpler. Earlier, a similar feedback has been received in IBR from @techanvil on #8143

Assigning this to you for re-review.

Thanks again!

[kuasha420]

Hi @ankitrox, Thank you for updating the IB. Looking pretty good. Just a couple of points:

1. A separate AudienceTiles component may still provide some value. Essentially, we can rename the current AudienceTilesWidget to AudienceTiles, and keep the reporting and other logic inside it, and render the markup without the Widget wrapper. And in the "new" AudienceTilesWidget we will essentially render the AudienceTiles wrapped in Widget if the audiences are available, and WidgetNull otherwise. This will probably save us from making bunch of API requests and getting hit with API errors when audiences are not available.
2. I'm not super opposed to separate ConfiguarblesNoAudienceBanner and NonConfiguarblesNoAudienceBanner, but seeing that their design is identical, and the logic to determine the difference in copies relies on same thing, I don't see a lot of value in it. We can probably make the separate components for the inner parts, which will essentially be just UI components, and keep the styling and layout in NoAudienceBanner, but doing that vs a couple of conditions in JSX markup doesn't really make much of a difference.
3. Finally, if we decide to keep the separate components, the suggested name should be something like ConfiguarbleNoAudienceBannerContent and NonConfiguarbleNoAudienceBannerContent, to make it clear that they only render the inner content, also not the singular term Configuarble.

Cheers.

[ankitrox]

Thank you @kuasha420

I have made the necessary changes as suggested, but kept the configurable and non-configurable components separate with the changes in name as suggested.

Assigning this to you for re-review.

Cheers!

[kuasha420]

Thanks @ankitrox. IB LGTM. :white_check_mark:

[techanvil]

Thanks guys! Just a heads up, I tweaked the IB to correct the "Configuarble" -> "Configurable" typo.

[nfmohit]

Hi @kuasha420 . As discussed internally, this issue is back with you to review if its PR needs any changes post the reversal of pivot reports. The AudienceTilesWidget component resulted in significant changes and your PR changes its file structure. Thank you!

[kelvinballoo]

QA Update ⚠️

I tried to do the first test about archiving one audience.

• Upon running the script to force the audience sync, the label for my archived audience is gone but the tile remains. Is that the expectation?
• If I open the dashboard in a new tab, the tile doesn't really appear but the tile box keeps on loading. I was not expecting this. Could we clarify on the expectation for this?

I have attached a video for reference as well:

https://github.com/user-attachments/assets/e07c6335-7a5e-4c3d-bf3b-60620f328336

[techanvil]

Hi @kelvinballoo, thanks for flagging this. These points are known issues, and we will be addressing them via https://github.com/google/site-kit-wp/issues/8145, ensuring the list of selected audiences is updated following the sync.

[kelvinballoo]

QA Update ⚠️

I've tested this and I have 2 items to be reviewed: ITEM 1: The 'settings' CTA on the banner would rightly link to the settings page of SK. However, I would suggest we could deeplink it to the actual setting so that the user doesn't need to scroll down and figure out where it is. That would be a better UX.

ITEM 2: Currently, based on my testing, I could not archive all the audiences because one will ultimately remain e.g. all users. Hence, I could not verify this from a user point of view. I only verified this through the script in the QAB which would blank all audiences. Would that be any concern if we don't test it practically?

Notice how only the 'Returning Visitors' have the 3 dots and hence the option to be archived.

---

Other than that, the other areas are tested good:

• First variant is showing up accordingly when there is no audience selected but there are selectable ones. Copy and layouts are looking good on desktop and mobile viewport. ✅

  

• Second variant is showing up accordingly when there is no selectable audience. This was achieved by running the script: await googlesitekit.data.dispatch('modules/analytics-4').setAvailableAudiences([])

  Copy and layouts are looking good on desktop and mobile viewport. ✅

  

• It's confirmed that the Info Notice Widget is only displayed when the actual Audience Tiles Widget is also being displayed. ✅

  

[techanvil]

Hi @kelvinballoo, thanks for reviewing this and raising these issues.

I've tested this and I have 2 items to be reviewed: ITEM 1: The 'settings' CTA on the banner would rightly link to the settings page of SK. However, I would suggest we could deeplink it to the actual setting so that the user doesn't need to scroll down and figure out where it is. That would be a better UX.

Good spot, and agreed, it will be better UX as you've described. We do already have an issue for this, https://github.com/google/site-kit-wp/issues/8875 - it's a P2 though as it's not essential for launch.

ITEM 2: Currently, based on my testing, I could not archive all the audiences because one will ultimately remain e.g. all users. Hence, I could not verify this from a user point of view. I only verified this through the script in the QAB which would blank all audiences. Would that be any concern if we don't test it practically?

Another good point to raise. I was debating whether to leave this aspect in. I'm pretty sure I was at one point able to remove all audiences including the "All users" default. However in recent testing, it's not possible to remove it. I figured that we can leave this edge case in for now as it's a small addition and will be a robust way to handle the scenario if it does occur again for one reason or another. In the meantime, testing it programmatically by using the snippet in the QAB is the way to go here.

[kelvinballoo]

QA Update ✅

Thanks @techanvil for checking. We are good to go on this issue.

• First variant is showing up accordingly when there is no audience selected but there are selectable ones. Copy and layouts are looking good on desktop and mobile viewport. ✅

  

• Second variant is showing up accordingly when there is no selectable audience. This was achieved by running the script: await googlesitekit.data.dispatch('modules/analytics-4').setAvailableAudiences([])

  Copy and layouts are looking good on desktop and mobile viewport. ✅

  

• It's confirmed that the Info Notice Widget is only displayed when the actual Audience Tiles Widget is also being displayed. ✅