Implement the placeholder tile variants of the Audience Tile

[techanvil]

Feature Description

Implement the placeholder tile variants of the Audience Tile that are displayed when only one tile is selected.

See audience tiles > placeholder tiles in the design doc.

---

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

Acceptance criteria

• If there is only one audience in the audience selection, two Audience Tiles will be shown, with a placeholder tile shown for the second one. The placeholder tile has two variants:
  • If there aren’t any non-default audiences remaining to select:
    • The placeholder tile should follow this Figma design.
    • The copy should be as follows:
      • Title: Create more visitor groups
      • Description: Learn more about how to group site visitors in Analytics
  • If there is at least one non-default audience remaining to select:
    • The placeholder tile should follow this Figma design.
    • The copy should be as follows:
      • Title: Compare your group to other groups
      • Description: Select another group to compare with your current group or learn more about how to group site visitors in Analytics
      • The Select link button will open the Selection Panel.
• On both variants, the Analytics link should open the introduction to audiences in Google Analytics article.

---

• Note that all copy should be verified with Figma as the source of truth.

Implementation Brief

• Create a component PlaceholderTile in assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/
  • This component should accept props as follows:
    • Widget - This component is already available in AudienceTilesWidget and can be directly passed to the PlaceholderTile component.
    • availableAudiences - List of available audiences in Google Analytics.
    • configuredAudiences - List of configured audiences (saved audiences to display) in Site Kit dashboard.
  • Filter out configuredAudiences from availableAudiences and check if there are any non-default audiences available in the filtered list. Default audiences can be determined by having the audienceType value of DEFAULT_AUDIENCE in the list of availableAudiences, any audiences apart from these will be non-default audiences. Store the result in nonDefaultAudiencesAvailable.
  • If nonDefaultAudiencesAvailable is true.
    • Create a const title and assign the value Compare your group to other groups.
    • Create a const description and assign the value Select another group to compare with your current group or learn more about how to group site visitors in Analytics.
      • Make use of createInterpolateElement to form the description with the link.
      • Select link will be a component and clicking it should open the audience selection panel. Refer to the ChangeGroupsLink component for how to open of the selection panel from a link.
      • For the Analytics link, make use of the getGoogleSupportURL selector from the core/site store. Pass the path parameter as analytics/answer/12799087. A similar example can be found here.
  • If nonDefaultAudiencesAvailable is false.
    • Create a const title and assign the value Create more visitor groups.
    • Create a const description and assign the value Learn more about how to group site visitors in Analytics. Make use createInterpolateElement as state above.
  • Export the graphic from the Figma design which is same across both the variants. Match the component with the Figma design given in AC.
• In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidet.js.
  • After this block of code, check if the length of visibleAudiences is one, if it is one, render the PlaceholderTile component with the mentioned props.

Test coverage

• Add stories for the PlaceHolderTile component for both the cases mentioned in AC.

QA Brief

• Set up the Audience Segmentation feature with a single audience selected in a desktop viewport.
• Observe the Placeholder Tile in the second tile slot.
• For the purposes of testing we'll assume the "new visitors" and "returning visitors" audiences are initially available post-setup.
• Ensure there is at least one non-default audience available to select in order to view the "Compare your group to other groups" variant of the tile.
  • For example, select only the "new visitors" audience and save the selection.
  • The "Compare your group to other groups" tile variant should be visible.
• Ensure there are no non-default audiences available to select in order to view the "Create more visitor groups" variant of the tile.
  • For example, with "new visitors" selected, archive "returning visitors" and any other custom audiences in Analytics.
  • Refresh the page and open the Selection Panel to trigger a resync of the audiences.
  • The "Create more visitor groups" tile variant should become visible.

Changelog entry

• Implement the placeholder tile variants for the Audience Tile that appear when only one audience is selected.

[techanvil]

Hi @ankitrox, thanks for drafting this IB. I started making an amendment to rename PlaceholderTile with placeholder being a single word, and decided to make a few grammatical tweaks as well. Please take a look at my revision for details. Beyond that, I have a couple of minor points for your consideration:

• Filter out configuredAudiences from availableAudiences and check if there are any non-default audiences available in the filtered list. Default audiences are All Users and Purchasers, any audiences apart from these will be non-default audiences. Store the result in nonDefaultAudiencesAvailable.

It's worth mentioning these default audiences can be determined by having the audienceType value of DEFAULT_AUDIENCE in the list of availableAudiences.

• After this block of code, check if the length of visibleAudiences is one, if it is one, render the PlaceholderTile component with the mentioned props.

This link is out of date, the code has moved to the AudienceTiles component.

[ankitrox]

Thank you @techanvil for reviewing the IB. Your changes in grammatical mistakes looks all good, thanks for correcting it.

I have updated the couple of points mentioned by you so that IB is again ready for your review.

Thanks

[techanvil]

Thanks @ankitrox, that's great.

The IB LGTM. ✅

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified both placeholder tile variants of the Audience Tile with Figma design.
• Verified both placeholder tile variants of the Audience Tile implemented as per AC.

Verified -

    -    If there aren’t any non-default audiences remaining to select:
   -   The placeholder tile should follow this [Figma design](https://www.figma.com/design/7pSrkEy8t00BcYRAi9LjjH/Audience- 
   -    Segmentation?node-id=1046-39823&t=CdsDGZ0qt1CAeBrT-0).
     - The copy should be as follows:
   - **Title:** Create more visitor groups
   - **Description**: Learn more about how to group site visitors in [Analytics](https://github.com/google/site-kit-wp/issues/8146)

Verified

- If there is at least one non-default audience remaining to select:
- The placeholder tile should follow this [Figma design](https://www.figma.com/design/7pSrkEy8t00BcYRAi9LjjH/Audience-Segmentation?node-id=1046-40242&t=CdsDGZ0qt1CAeBrT-0).
 - The copy should be as follows:
 - **Title:** Compare your group to other groups
 - **Description:** [Select](https://github.com/google/site-kit-wp/issues/8146) another group to compare with your current 
     group or learn more about how to group site visitors in [Analytics](https://github.com/google/site-kit-wp/issues/8146)
- The Select link button will open the Selection Panel.
  - On both variants, the Analytics link should open the [introduction to audiences in Google Analytics] 
  (https://support.google.com/analytics/answer/12799087) article.