Add the Audiences Widget Area happy path view

[techanvil]

Feature Description

Add the Audiences Widget Area to the dashboard in the happy path view. This includes displaying an Audience Tile per selected audience with live data, the Info Notice showing a static message, and the Analytics source link.

See audiences widget area in the design doc.

---

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

• With the audienceSegmentation feature flag enabled, and an audience selection defined, the Audiences Widget Area should be displayed on the dashboard.
• This new widget area should be added to the Traffic section (i.e. the traffic widget context).
• It should follow the Figma design and the design doc, with the following aspects implemented as part of this issue:
  • The widget area title (please confirm this with Figma, which is the source of truth): Understand how different visitor groups interact with your site
    • This should not include the "New" badge, which will be added via #8169.
  • The audience tiles showing live data for the selected audiences.
    • This means displaying the Audience Tiles widget, created in https://github.com/google/site-kit-wp/issues/8136, which will show the audiences in a list in desktop viewports or a tabbed view in mobile viewports.
    • This should be displayed in its happy path view, with edge cases and error handling implemented in subsequent issues.
  • The Info Notice, showing a static message (this can be a placeholder message with the full list to be implemented later via https://github.com/google/site-kit-wp/issues/8139)
  • The Analytics source link, which as discussed in the design doc should be added to a footer section beneath the main body of the widget area.
    • The link should open the Audiences report for the current property and date range in a new window.
    • The source link should not be shown if Analytics is disconnected.

Implementation Brief

• [x] Implement Footer in and make title optional widgetAPI.registerWidgetArea:

  • [x] In assets/js/googlesitekit/widgets/datastore/areas.js:
    • [x] Similarly how it's been done for CTA, take in Footer as a setting property in registerWidgetArea action.
      • [x] It should accept a react component.
    • [x] For title ensure it can be undefined.
  • [ ] In assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js:
    • [x] For title, nothing needs to be done as it's already conditionally rendered.
    • [x] Add a googlesitekit-widget-area-footer cell and render the Footer component when it is available.
    • [ ] Style accordingly in assets/sass/widgets/_widget-area.scss.

• [x] Inside of assets/js/googlesitekit/widgets/register-defaults.js, register a new widget area using widgetsAPI.registerWidgetArea when audienceSegmentation feature flag is enabled with the following properties:

  • [x] Widget area slug should created in a new constant AREA_MAIN_DASHBOARD_TRAFFIC_AUDIENCE_SEGMENTATION = "mainDashboardTrafficAudienceSegmentation", stored in assets/js/googlesitekit/widgets/default-contexts.js
  • [x] subtitle should match the copy in Figma.
  • [x] Footer should be a new component AudienceAreaFooter that displays the Source Link as seen in Figma. Detailed below.
  • [x] priority should be set to 2 to show the widget area below the primary traffic widget area within the traffic widget context.

• [x] Create InfoNoticeWidget in assets/js/modules/analytics-4/components/audience-segmentation/dashboard folder.:

  • [x] This should be a widget to be placed using the widgets API, therefore take in Widget prop.
  • [x] It should render the InfoNoticecomponent, and for now, pass static text The higher the portion of new visitors you have, the more your audience is growing. Looking at what content brings them to your site may give you insights how to reach even more people. as content and Got it as dismissLabel. onDismiss should be no-op for now.
  • [x] The widget export should be wrapped with whenActive( { moduleName: 'analytics-4' } ) hoc.

• [x] Rename the AudienceTiles component to AudienceTilesWidget and wrap the export in a whenActive( { moduleName: 'analytics-4' } ) hoc.

• [x] Inside of assets/js/modules/analytics-4/index.js, register the above two widgets using widgets.registerWidget when audienceSegmentation feature flag is enabled with the following properties:

• [x] AudienceTilesWidget

  • [x] slug : analyticsAudienceTiles
  • [x] priority : 1
  • [x] wrapWidget : false.
  • [x] modules : [ 'analytics-4' ].
  • [x] Widget Area Slugs [ AREA_MAIN_DASHBOARD_TRAFFIC_AUDIENCE_SEGMENTATION ]

• [x] InfoNoticeWidget

  • [x] Mostly same as above, with the following changes.
  • [x] slug : analyticsAudienceInfoNotice
  • [x] priority : 2

• [x] Within the assets/js/modules/analytics-4/components/audience-segmentation/dashboard/ folder, create a new component called AudienceAreaFooter which renders the source link using the SourceLink component.

  • [x] The source link should open the audiences report as per the AC. The URL can be generated via a call to the analytics-4 getServiceReportURL() selector with a type argument of 'audiences' and the dates supplied as usual.

• [x] Only render the component if Analytics module is connected, otherwise return null.

Test Coverage

• Update existing tests to ensure they work as expected with this additional Widget Area.
• Add test coverage for the changes made for registerWidgetArea action.

QA Brief

• Setup Site Kit with Analytics connected.
• Ensure the audienceSegmentation feature flag is enabled using the tester plugin.
• Visit the dashboard and ensure the Audiences Widget Area is displayed below the primary traffic widget area.
• If the Audiences Widget Area is not displayed, check if the configured audiences are available in the Analytics property by running the following selector in the console:

googlesitekit.data.select( 'modules/analytics-4' ).getConfiguredAudiences()

• If the audiences are not available, execute the following commands one by one in the console to configure the audiences:
  • Run the getAvailableAudiences selector to get the available audiences.

  googlesitekit.data.select( 'modules/analytics-4' ).getAvailableAudiences()
  

  • Copy the value of the name property from the output of the above command and run the setConfiguredAudiences action with the copied audiences:

  googlesitekit.data.dispatch( 'modules/analytics-4' ).setConfiguredAudiences(['name1', 'name2'])
  

  • Run the saveAudienceSettings action to save the configured audiences:

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

• Now, visit the dashboard and ensure the Audiences Widget Area is displayed below the primary traffic widget area.
• Verify that the Info Notice and Audience Tiles are displayed as expected.
• Verify the source link is displayed only when the Analytics module is connected.
• Please note the following:
  • The new badge will be implemented in #8169.
  • The Info Notice will be updated in #8139.
  • The loading states will be implemented in #8145. Currently, we've implemented a basic loading state with the preview block as part of this issue.
  • The zero data state will be implemented in #8143.

Changelog entry

[techanvil]

Note that I've moved this back to the Backlog pending the approval of the additional source link section in the design doc. Cc @ivonac4

[techanvil]

The source link aspect has now been finalised, so I've moved this back to AC.

[benbowler]

@techanvil I've created a draft IB here, however, I'm curious why we need the new WidgetArea here. With the title, info notice and source link inside the AudienceTiles component, we could renamed this to AudienceTilesWidget then simply register this as a widget within the existing AREA_MAIN_DASHBOARD_TRAFFIC_PRIMARY widget area. We would achieve the same with less code and keep the dashboard consistent with other modules where each module has it's own single widget area.

[techanvil]

Thanks @benbowler. It's a fair question, however, in my view the new audiences section on the dashboard conceptually fits better with the idea of a widget area - it follows the layout of a widget area with the title, "change groups" CTA, and the discrete widgets which follow the general look of individual widgets. Indeed I had initially envisaged each audience tile would itself be a widget but the design choice to show them in a tabbed view for mobile resulted in the move to the single AudienceTiles widget.

If we implement the whole thing as a widget we'll effectively be reproducing the look of a widget area in a widget and have to reimplement the title and CTA section for one thing.

I don't see it being an issue to have an additional widget area for the Traffic context - if we were only going to have a single area per context, we wouldn't really need widget areas at all as a separate grouping under the widget contexts. Plus the _PRIMARY suffix on the current names is a pretty good indicator we don't expect these to be the only areas per context.

I'd rather stick with the current plan of using a widget area with individual widgets for the components as described in the widgets section in the design doc. The widget area should be responsible for rendering the title and CTA, with each individual widget responsible for determining its own visibility and thus active state. The widget area then doesn't need any top level logic for determining its own active state and it keeps things a bit more modular.

Admittedly, as time goes on we might find it could be preferable and simpler to actually consolidate things as you've suggested, but I'd rather stick with the current plan for now and iterate/optimise further down the line if we need to.

With that in mind if you are happy taking this approach, please can you update the IB accordingly. Please let me know your thoughts either way.

[benbowler]

I'm un-assigning myself as I'm about to take some holiday. I can pick this up after and address the comments unless someone from Squad 2 picks it up in the mean time.

[techanvil]

Hi @kuasha420, thanks for drafting the IB, which is looking good. A few points:

• The intention is for the Info Notice to be registered as a separate widget in the widget area, rather than rendered in the footer component. This should allow the forthcoming conditional rendering within the Info Notice to inform the active state of the widget area. This is mentioned in the design doc, which discusses the various widgets that will be implemented, and is alluded to in the AC which only mentions adding the source link to the footer.
• It would be good to rename the AudienceTiles and InfoNotice for consistency, to AudienceTilesWidget and InfoNoticeWidget.
• I'd therefore also suggest naming the widget slugs analyticsAudienceTiles and analyticsInfoNotice.
• It would be nice to refactor InfoNotice to use the Widget component for consistency. It's arguably getting a bit out of scope here - please consider this for inclusion, or we can address this via a separate issue.

[kuasha420]

@techanvil Makes sense. I've incorporated your feedback and bumped up the estimate. I think we can do it here. Cheers.

[techanvil]

Thanks @kuasha420, SGTM! Please note that I've added an additional point to hopefully save a bit of time when it comes to generating the source link URL.

IB :white_check_mark:

[kelvinballoo]

QA Update ⚠️

Clarifications needed:

• I was not able to get the audience tiles at the get-go but was able to get them after executing the scripts:

  

  Questions from here:

  • Are we to validate the live data that appears? If yes, I'd like to konw a bit more in detailed how we are computing / getting each value from. For example, how are we getting the visits per visitor? On analytics, I don't see that number and chances are we are computing it?

    

  • Similarly, the values for cities are strange/inaccurate to me. 119400% doesn't seem right.

  • Do I need to test the 2nd tile for values as well? Currently, there isn't data for purchases but I will try to create a custom audience to test this out if there is a need.

• One point from the QAB states : Verify the source link is displayed only when the Analytics module is connected. Can we confirm that when I disconnect the analytics module, what would be the expectation? From the QAB, it feels like the audience tile would still appear but not the source link. However, currently the audience tile will also not appear.

[hussain-t]

Hi @kelvinballoo, regarding your observations:

I was not able to get the audience tiles at the get-go but was able to get them after executing the scripts:

That's expected, and hence, it was stated in the QAB. Configuring the audience is part of #8131.

Are we to validate the live data that appears?

Validating the data is not part of this ticket. This ticket is solely responsible for registering (displaying) the widgets on the dashboard. The data logic was implemented in #8136. It applies to the rest of your observations regarding validations. If you encounter any issues, please check with @techanvil and create a new ticket.

One point from the QAB states : Verify the source link is displayed only when the Analytics module is connected. Can we confirm that when I disconnect the analytics module, what would be the expectation? From the QAB, it feels like the audience tile would still appear but not the source link. However, currently the audience tile will also not appear.

If Analytics is not connected, the widgets will not be registered/displayed. Sorry, but this was not explicitly stated in the QAB.

[kelvinballoo]

QA Update ✅

Thanks @hussain-t

• Noted that this ticket isn't for data validation but mainly to ensure that the audience tiles appear. For the data validation, I have raised another ticket here: https://github.com/google/site-kit-wp/issues/8763 ✅

• Good to note also that widgets won't appear as well if Analytics is disconnected. System is behaving as expected. ✅

With that I confirm that this ticket is working as expected: ✅

• Audience tiles are shown after executing the scripts below the primary traffic widget area.

  Below traffic section:

  Full tiles:

• Info section and source link appear accordingly and clicking it will lead to the analytics page.

  

Moving this ticket to 'Approval'