Add GA event tracking for the Audiences Tiles (excluding the "Top content" metric area)

[techanvil]

Feature Description

GA events should be added to keep track of interaction with Audience Tiles (barring the "Top content" metric area which will be addressed separately).

---

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

Acceptance criteria

The following GA events should be tracked for the given actions. See the GA events sheet.

Event Name	Category	Label	Trigger	Condition
insufficient_permissions_error	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	Element visibility	User views an insufficient permissions audience tile error
insufficient_permissions_error_request_access	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	Click	User clicks "Request access" on the error
data_loading_error	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	Element visibility	User views a generic audience tile error
data_loading_error_retry	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	Click	User clicks "Retry" on the error
view_tile_tooltip	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	click/hover	User views the tooltip for an audience tile
view_tile_partial_data_tooltip	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	click/hover	User views the tooltip for a partial data badge for an audience tile
view_top_content_partial_data_tooltip	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	click/hover	User views the tooltip for a partial data badge in the "Top content" area of an audience tile
view_tile_collecting_data	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	Element visibility	User views the "collecting data" tile variant for an audience tile
temporarily_hide	{viewContext}_audiences-tile	one of "new-visitors", "returning-visitors", "publishers", "all-users", or empty	Click	User clicks "temporarily hide" on the tile
insufficient_permissions_error	{viewContext}_audiences-all-tiles		Element visibility	User views the insufficient permissions full width error
insufficient_permissions_error_request_access	{viewContext}_audiences-all-tiles		Click	User clicks "Request access" on the error
data_loading_error	{viewContext}_audiences-all-tiles		Element visibility	User views the generic full width error
data_loading_error_retry	{viewContext}_audiences-all-tiles		Click	User clicks "Retry" on the error

Implementation Brief

• [ ] Refactor the AudienceTileError component to be a module with its own folder and an index.js file.
• [ ] Extract the rendered JSX content from the AudienceTileError component to a new component e.g. TileErrorContent.
  • Wrap the TileErrorContent component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
  • Add an onRetry prop of type PropTypes.func to TileErrorContent, and pass it through to ReportErrorActions.
• [ ] In the AudienceTileError component:
  • Add an audienceSlug prop of type PropTypes.string.
  • Create a version of TileErrorContent wrapped by the withIntersectionObserver() HOC, e.g. TileErrorContentWithIntersectionObserver. Render this in place of the existing TileErrorContent instance.
  • Pass the onInView callback prop to TileErrorContentWithIntersectionObserver:
    • Determine the action for the GA event: insufficient_permissions_error for an insufficient permissions error, or data_loading_error for any other error.
    • Call trackEvent( '${viewContext}_audiences-tile', action, audienceSlug ).
  • Pass the onRetry callback prop to TileErrorContent:
    • Determine the action for the GA event: insufficient_permissions_error_request_access for an insufficient permissions error, or data_loading_error_retry for any other error.
    • Call trackEvent( '${viewContext}_audiences-tile', action, audienceSlug ).
• [ ] Add an onOpen prop of type PropTypes.func to both the InfoTooltip and Tooltip components. Pass the prop through from InfoTooltip to Tooltip to MuiTooltip.
• [ ] Add an onTooltipOpen prop of type PropTypes.func to the BadgeWithTooltip component. Pass the prop through as the onOpen prop to InfoTooltip.
• [ ] In the AudienceTile component:
  • Add an audienceSlug prop of type PropTypes.string and pass it through to the AudienceTilePagesMetric component.
  • Pass the onOpen callback prop to InfoTooltip. In the callback, call trackEvent( '${viewContext}_audiences-tile', 'view_tile_tooltip', audienceSlug ).
  • Pass the onTooltipOpen callback prop to BadgeWithTooltip. In the callback, call trackEvent( '${viewContext}_audiences-tile', 'view_tile_partial_data_tooltip', audienceSlug ).
• [ ] In the AudienceTilePagesMetric component:
  • Add an audienceSlug prop of type PropTypes.string.
  • Pass the onTooltipOpen callback prop to BadgeWithTooltip. In the callback, call trackEvent( '${viewContext}_audiences-tile', 'view_top_content_partial_data_tooltip', audienceSlug ).
• [ ] In the AudienceTiles component:
  • Pass the audienceSlug prop to the AudienceTile and AudienceTileError components with the value of the audienceSlug constant.
• [ ] Create a new AudienceTileZeroData component. Make AudienceTileZeroData a module with its own index.js file and create another component, TileZeroDataContent in the module folder.
• [ ] Extract the JSX content for the zero-data tile variant from the AudienceTile component to the new TileZeroDataContent component.
  • Wrap the TileZeroDataContent component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• [ ] In the AudienceTileZeroData component:
  • Add an audienceSlug prop of type PropTypes.string.
  • Create a version of TileZeroDataContent wrapped by the withIntersectionObserver() HOC, e.g. TileZeroDataContentWithIntersectionObserver. Render the TileZeroDataContentWithIntersectionObserver component.
  • Pass the onInView callback prop to TileZeroDataContentWithIntersectionObserver. In the callback, call trackEvent( '${viewContext}_audiences-tile', 'view_tile_collecting_data', audienceSlug ).
  • Create a handleHideTile() callback:
    • Call trackEvent( '${viewContext}_audiences-tile', 'temporarily_hide', audienceSlug ), followed by onHideTile(). Chain the two calls using .finally().
  • Replace onHideTile with handleHideTile as the value for the onHideTile prop that is passed to TileZeroDataContentWithIntersectionObserver.
• [ ] Refactor the AudienceSegmentationErrorWidget component to be a module with its own folder and an index.js file.
• [ ] Extract the rendered JSX content from the AudienceSegmentationErrorWidget component to a new component e.g. ErrorWidgetContent.
  • Wrap the ErrorWidgetContent component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• [ ] In the AudienceSegmentationErrorWidget component:
  • Create a version of ErrorWidgetContent wrapped by the withIntersectionObserver() HOC, e.g. ErrorWidgetContentWithIntersectionObserver. Render this in place of the existing ErrorWidgetContent instance.
  • Pass the onInView callback prop to ErrorWidgetContentWithIntersectionObserver:
    • Determine the action for the GA event: insufficient_permissions_error for an insufficient permissions error, or data_loading_error for any other error.
    • Call trackEvent( '${viewContext}_audiences-all-tiles', action ).
  • Amend the handleRetry() callback:
    • Determine the action for the GA event: insufficient_permissions_error_request_access for an insufficient permissions error, or data_loading_error_retry for any other error.
    • Call trackEvent( '${viewContext}_audiences-all-tiles', action ) prior to the calls to setValue() and onRetry(). Chain the calls using trackEvent().finally().

Test Coverage

• Add JS test coverage for the above changes where tests exist for the affected components.

QA Brief

Changelog entry

[nfmohit]

IB ✅

[kelvinballoo]

QA Update ⚠

Couple of questions:

ITEM 1: From the AC, for {viewContext}_audiences-tile view_tile_partial_data_tooltip, is it still valid? From https://github.com/google/site-kit-wp/issues/8144#event-14208851247, it feels like Partial Data badge has been removed. Unless I am wrong, could you add the steps to simulate this please?

---

ITEM 2: Per the AC, one of the labels mentioned is "publishers". Could you clarify when "publishers" would appear as the label? From my testing, I had "purchasers" instead whenever I use the 'Purchasers' tiles.

[techanvil]

Hi @kelvinballoo! To answer your q's:

• Item 1: The partial data badge is still relevant and will be shown for audiences other than the "new visitors" and "returning visitors" audiences as we treat them as a special case as discussed in #8144. So, in order to show the partial data badge and test this case, use the default or user-defined audiences. The label in the AC should not have included the "new-visitors" and "returning-visitors" values, this was an oversight and I've amended it to removed them.
• Item 2: This was a typo and it should have been "purchasers", I've amended this too in the AC. Thanks for spotting these, sorry for the confusion!

[kelvinballoo]

QA Update ✅

All the events are firing as expected. Moving ticket to Approval.

• insufficient_permissions_error

  - {viewContext}_audiences-tile - insufficient_permissions_error - one of "new-visitors", "returning visitors", "purchasers", "all-users", or empty

  .

• insufficient_permissions_error_request_access

  {viewContext}_audiences-tile insufficient_permissions_error_request_access one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

• data_loading_error

  {viewContext}_audiences-tile data_loading_error one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

• data_loading_error_retry

  {viewContext}_audiences-tile data_loading_error_retry one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

• view_tile_tooltip

  {viewContext}_audiences-tile view_tile_tooltip one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

  

• view_tile_partial_data_tooltip

  {viewContext}_audiences-tile view_tile_partial_data_tooltip one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

  

• view_top_content_partial_data_tooltip

  {viewContext}_audiences-tile view_top_content_partial_data_tooltip one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

• view_tile_collecting_data

  {viewContext}_audiences-tile view_tile_collecting_data one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

• temporarily_hide

  {viewContext}_audiences-tile temporarily_hide one of "new-visitors", "returning-visitors", "purchasers", "all-users", or empty

  

• insufficient_permissions_error

  {viewContext}_audiences-all-tiles insufficient_permissions_error

  

• insufficient_permissions_error_request_access

  {viewContext}_audiences-all-tiles insufficient_permissions_error_request_access

  

• data_loading_error

  {viewContext}_audiences-all-tiles data_loading_error

  

• data_loading_error_retry

  {viewContext}_audiences-all-tiles data_loading_error_retry