Implement the zero data state of an Audience Tile

[techanvil]

Feature Description

Implement the zero data state of an audience. This includes the “temporarily hide” behavior.

See audience tiles > zero data in the design doc.

---

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

Acceptance criteria

• Given that a selected audience is in the "partial data" state, and it has zero data for the current date range:
  • Its Audience Tile should be displayed in the "zero data" variant.
  • It should be implemented as per the Figma design.
  • If there is only one audience in the audience selection, the copy for the descriptive text should be:
    • Site Kit is collecting data for this group
  • If there are multiple audiences in the audience selection:
    • The copy for the descriptive text should be:
      • Site Kit is collecting data for this group. You can hide this group until data is available.
    • The tile should have a Temporarily hide CTA.
    • Clicking on Temporarily hide will hide the tile, until the audience is determined to be in a non-zero data state on a subsequent page load.

Implementation Brief

• Create two new components AudienceTileCollectingData and AudienceTileCollectingDataHideable.
  • As per the Figma design:
    • AudienceTileCollectingData will display the SVG icon and the text "Site Kit is collecting data for this group.".
    • AudienceTileCollectingDataHideable will display the SVG icon, the text "Site Kit is collecting data for this group. You can hide this group until data is available." and the "Temporarily hide" link.
      • Clicking the Temporarily hide CTA should dispatch a dismissItem action with audience-tile-${audienceResourceName} for the slug and 0 for the expiration.
• In the AudienceTiles component:
  • Refer to the main report for the configured audiences:
    • Create a function hasZeroDataForAudience inside the component to check if the slice of the report that relates to the specific audience has zero data.
    • hasZeroDataForAudience should accept audienceResourceName as the parameter.
    • hasZeroDataForAudience should check for a row where the audienceResourceName dimension matches the audience's name, and verify that it has a non-zero count for the totalUsers metric.
  • To check if an audience is in the partial state, use the isAudiencePartialData selector of the analytics-4 module.
  • To check if an audience has zero data, use the function hasZeroDataForAudience created previously.
  • Create a new visibleAudiences array - it should initially be created from configuredAudiences.
    • Iterate over the audiences in reverse order (this is so we end up with the first audience remaining in the list in the edge case where all of the configuredAudiences have been temporarily dismissed).
    • If an audience has been temporarily hidden:
      • If the audience has zero data, and visibleAudiences still has a length greater than 1, remove the audience from visibleAudiences.
      • If the audience has non-zero data, clear the item from dismissed items. To clear the dismissed item, we do not have an explicit API, but it can be achieved by re-dismissing the item via the dismissItem selector with a very short expiry time (for example, 1 second).
  • Map over visibleAudiences and do the following:
    • If the audience is in the partial data state and has zero data:
      • If the length of visibleAudiences is only 1, display the AudienceTileCollectingData component.
      • If the length of visibleAudiences is greater than 1, display the AudienceTileCollectingDataHideable component.
    • Otherwise, render the AudienceTile component as it is doing in the current implementation.

Test Coverage

1. Add stories for the AudienceTileCollectingData and AudienceTileCollectingDataHideable components.
2. Add a story and VRT scenario for the AudienceTiles component which shows both of the above components.

QA Brief

• Set up Analytics and configure audiences to test the zero data state for audience tiles.
• To properly test the flow, ensure you have at least two or three audience tiles set up:
  • One tile with data.
  • One tile without data (zero data) for the audience.
  • Optionally, a third tile to test the multi-audience scenario.

1. Verify Zero Data State for Audience Tile

   • Ensure the audience tile widgets correctly displays the zero data variant for an audience in the "partial data" state with zero data for the given date range.
   • Test scenarios:
     • Single Audience: Ensure the text reads "Site Kit is collecting data for this group." and does not include the "Temporarily hide" CTA.
     • Multiple Audiences: Ensure the text reads "Site Kit is collecting data for this group. You can hide this group until data is available." and includes the "Temporarily hide" CTA.

2. Temporarily Hide Audience Tile

   • Verify the functionality of the "Temporarily hide" CTA:
     • Clicking the "Temporarily hide" CTA should hide the corresponding audience tile.
     • Open the network tab and ensure an API request is made to dismiss-item endpoint with the correct parameters: audience-tile-${audienceResourceName} for the slug and 0 for the expiration.
     • Check that the tile remains hidden until the audience has non-zero data for the total users metric.

3. Reappearing the Temporarily Hidden Tile

   • To test the reappearance of a temporarily hidden tile, delete the wp_googlesitekitpersistent_dismissed_items item from the wp_usermeta table in the database. This will reset the dismissed state and allow the tile to reappear.
   • Ensure the tile reappears correctly after the item is deleted from the database.
   • To actually test the reappearing tile, you may need to wait for report data to be available for the audience.

4. Component Stories

   • Verify the following stories in the Storybook:
     • AudienceTile->ZeroDataHideable.
     • AudienceTile->ZeroDataNonHideable.
     • AudienceTilesWidget->DefaultWithZeroTile.
     • AudienceTilesWidget->TwoTilesWithZeroTile.
     • AudienceTilesWidget->SingleZeroTile.

Changelog entry

• Show an Audience Tile in a zero-data state, and allow it to be temporarily hidden.

[techanvil]

Hi @ankitrox, thanks for drafting this IB. A few points:

• I don't think it makes sense to repurpose the AudienceTileNoData component. It's not actually correct to say "AudienceTileNoData will never be rendered from within the AudienceTile component" because if the audience is not in the partial data state, it can still have no data for the current date range, in which case the current "no data" message should still be shown. Therefore I'd suggest creating a new component named e.g. AudienceTileCollectingData (or AudienceTileZeroData, although this might be a bit too similar to AudienceTileNoData and cause confusion) to implement this issue. In fact, I think it would probably be a good idea to create two versions - say AudienceTileCollectingData and AudienceTileCollectingDataHideable, this should help keep the logic a bit simpler with less conditionality within the component.
• For the zero data check within AudienceTiles, I think we can simply check if the audience has zero data in the top-level report, which doesn't use getReportForAllAudiences() (it's also worth noting that getReportForAllAudiences() itself will be removed as part of Refactor the Audience Tiles to use new pivot report infrastructure #8726, so keep an eye on this). However we can't use the hasZeroData() selector for the zero-data check. The hasZeroData() selector, and the isZeroReport() utility it uses are designed to check if an entire report has zero data. However we only want to check if the slice of the report that relates to the specific audience has zero data, which means checking for a row where the audienceResourceName dimension matches the audience's name, and verifying that it has a non-zero count for the totalUsers metric.
• I think some of the logic for how to show/hide the tile needs a bit of refinement too. At the moment we are mapping over configuredAudiences when we render the audiences. What I think we should do is create a new visibleAudiences array from configuredAudiences, and if there is more than one selected audience and the tile for an audience has been temporarily hidden, we remove it from visibleAudiences. Then we map over visibleAudiences instead of configuredAudiences. This will help us when it comes to implement Implement the placeholder tile variants of the Audience Tile #8146 where we need to know how many audience tiles are visible.
• We should "clear" a previously dismissed item when we do see data for a report, to guard against an edge case where the audience is found to be in a zero data state again at some point in the future, at which point we'd want to re-show the zero data state and give the user the option to temporarily hide it again. We don't have an explicit API to clear a dismissed item but we should be able to effectively clear one by re-dismissing it with a very short expiry time (say 1 second).
• A minor point - dismissed item keys are inconsistent within the plugin, some use underscores and some dashes as word separators. Generally, the more recently introduced ones use dashes and there are more keys that use dashes than underscores, so let's use dashes here, i.e. audience-tile-${audienceResourceName}. Also, I would suggest we don't normalise audienceResourceName, as doing so would obscure the value and make it harder to cross reference.
• Please remember to add an estimate for the issue.

As ever, feel free to drop me a line if you want to get on a call to discuss any of this.

[ankitrox]

Hi @techanvil ,

Thank you for reviewing the IB and adding the feedback. I have addressed the points you mentioned and revised the IB description.

Assigning this to you for re-review.

Thank you.

[techanvil]

Hey @ankitrox, thanks for updating the IB. I've actually updated it further myself; I had started a minor update to correct some grammatical points and a couple of minor errors, however, it ended up being more of a rewrite than I'd initially intended.

Please can you review the changes, again if you are happy then feel free to move it to the EB.

I'll give this an IB ✅ for now but if you want to discuss any of it just let me know :)

[ankitrox]

Thank you @techanvil . I have reviewed the changes and those are looking good to me, so moving this to EB.

Thanks again!

[kelvinballoo]

QA Update ❌

I tested this but some parts are not working out as they should.

ITEM 1: ❌
When I clicked on 'Temporarily hide' there is nothing happening and the tile remains there.
An API request is made to dismiss-item endpoint with the parameter of expiration being zero but I did not see the 'audience-tile-${audienceResourceName}'
The resourcename doesn't tally.
Tested URL: https://qaaudiencesegmentationtest.instawp.xyz/wp-admin/admin.php?page=googlesitekit-dashboard&notification=audience_segmentation#traffic
(Do let me know in case you want to access the page and I can share credentials)

I think this might only happen when the tile is in position 2.

Video is attached below for reference:

https://github.com/google/site-kit-wp/assets/125576926/02228bed-194d-4906-8de8-93a2b0a9c01a

---

ITEM 2: ❌
The 2nd tile doesn't come with value at all. It is always 0, even if it actually should have data.
Refer to the images where I swapped the positions of an audience where there was a tile with numbers.

When 'All Visitors' is in position 1, there is data for the first 4 lines with 5.9K visitors, etc...:

When the same tile is swapped in position 2, there is no data. It's worth noting that the analytics figures at the bottom are showing accordingly.

---

ITEM 3: ⚠️
Do we have any figma whereby we have the zero data state for Single Tile?
SO far from Figma, it's always having a few tiles scenario and not a single tile.

---

ITEM 4: ⚠️
At 100% zoom, when we have 3 tiles, there will be scrollbar appearing.
Is that expected or we have to re-adjust to make it show without scrollbar?

[hussain-t]

Hi @kelvinballoo, thanks for raising your observations.

ITEM 1: ❌
When I clicked on 'Temporarily hide' there is nothing happening and the tile remains there.

That's a good catch. The logic changed while working on the CR feedback, which caused it. I have fixed it in this follow-up PR.

An API request is made to dismiss-item endpoint with the parameter of expiration being zero but I did not see the 'audience-tile-${audienceResourceName}'

You're referring to the display name, not the audienceResourceName. I could confirm from your screencast that the audienceResourceName is correctly being passed in the payload.

ITEM 2: ❌
The 2nd tile doesn't come with value at all. It is always 0, even if it actually should have data.

That's a good catch. However, it is an existing issue, not part of the changes made to this ticket. I confirmed it by reverting all the changes made in this PR. Could you please create a separate ticket? cc: @techanvil

ITEM 3: ⚠️
Do we have any figma whereby we have the zero data state for Single Tile?

Unfortunately, we don't have a Figma design for the zero data state single tile.

ITEM 4: ⚠️
At 100% zoom, when we have 3 tiles, there will be scrollbar appearing.

That's expected, not an issue.

[kelvinballoo]

Thanks @hussain-t !
Item 2 raised under : #8921

[techanvil]

Back to you for another pass @kelvinballoo!

[kelvinballoo]

QA Update ✅

Tested this and it's looking good

• Clicking on 'Temporarily hide' will actually hide the tile with the proper dismiss request with the proper expiration and audience resource name.

  

• The tile reappears after deleting it from the wp_usermeta table in the database. Also tested with 3 tiles and 2 tiles behaviour

  

• Verified the following stories in the Storybook and they are looking good. There was no detailed visual tests done as this was done from another ticket. We don't have figma for single tile but it's looking good:

  • AudienceTile->ZeroDataHideable.
  • AudienceTile->ZeroDataNonHideable.
  • AudienceTilesWidget->DefaultWithZeroTile.
  • AudienceTilesWidget->TwoTilesWithZeroTile.
  • AudienceTilesWidget->SingleZeroTile.

Moving this ticket to approval.