Add GA event tracking for the Audiences Tiles (excluding the "Top content" metric area) #9494
Labels
Module: Analytics
Google Analytics module related issues
P0
High priority
Team M
Issues for Squad 2
Type: Enhancement
Improvement of an existing feature
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.
Implementation Brief
AudienceTileError
component to be a module with its own folder and anindex.js
file.AudienceTileError
component to a new component e.g.TileErrorContent
.TileErrorContent
component inforwardRef()
so aref
can be passed to it, and add theref
to its top-level rendered element.onRetry
prop of typePropTypes.func
toTileErrorContent
, and pass it through toReportErrorActions
.AudienceTileError
component:audienceSlug
prop of typePropTypes.string
.TileErrorContent
wrapped by thewithIntersectionObserver()
HOC, e.g.TileErrorContentWithIntersectionObserver
. Render this in place of the existingTileErrorContent
instance.onInView
callback prop toTileErrorContentWithIntersectionObserver
:insufficient_permissions_error
for an insufficient permissions error, ordata_loading_error
for any other error.trackEvent( '${viewContext}_audiences-tile', action, audienceSlug )
.onRetry
callback prop toTileErrorContent
:insufficient_permissions_error_request_access
for an insufficient permissions error, ordata_loading_error_retry
for any other error.trackEvent( '${viewContext}_audiences-tile', action, audienceSlug )
.onOpen
prop of typePropTypes.func
to both theInfoTooltip
andTooltip
components. Pass the prop through fromInfoTooltip
toTooltip
toMuiTooltip
.onTooltipOpen
prop of typePropTypes.func
to theBadgeWithTooltip
component. Pass the prop through as theonOpen
prop toInfoTooltip
.AudienceTile
component:audienceSlug
prop of typePropTypes.string
and pass it through to theAudienceTilePagesMetric
component.onOpen
callback prop toInfoTooltip
. In the callback, calltrackEvent( '${viewContext}_audiences-tile', 'view_tile_tooltip', audienceSlug )
.onTooltipOpen
callback prop toBadgeWithTooltip
. In the callback, calltrackEvent( '${viewContext}_audiences-tile', 'view_partial_data_tile_tooltip', audienceSlug )
.AudienceTilePagesMetric
component:audienceSlug
prop of typePropTypes.string
.onTooltipOpen
callback prop toBadgeWithTooltip
. In the callback, calltrackEvent( '${viewContext}_audiences-tile', 'view_top_content_partial_data_tooltip', audienceSlug )
.AudienceTiles
component:audienceSlug
prop to theAudienceTile
,AudienceTileError
andAudienceTilePagesMetric
components with the value of theaudienceSlug
constant.AudienceTileZeroData
component. MakeAudienceTileZeroData
a module with its ownindex.js
file and create another component,TileZeroDataContent
in the module folder.AudienceTile
component to the newTileZeroDataContent
component.TileZeroDataContent
component inforwardRef()
so aref
can be passed to it, and add theref
to its top-level rendered element.AudienceTileZeroData
component:audienceSlug
prop of typePropTypes.string
.TileZeroDataContent
wrapped by thewithIntersectionObserver()
HOC, e.g.TileZeroDataContentWithIntersectionObserver
. Render theTileZeroDataContentWithIntersectionObserver
component.onInView
callback prop toTileZeroDataContentWithIntersectionObserver
. In the callback, calltrackEvent( '${viewContext}_audiences-tile', 'view_tile_collecting_data', audienceSlug )
.handleHideTile()
callback:trackEvent( '${viewContext}_audiences-tile', 'temporarily_hide', audienceSlug )
, followed byonHideTile()
. Chain the two calls using.finally()
.onHideTile
withhandleHideTile
as the value for theonHideTile
prop that is passed toTileZeroDataContentWithIntersectionObserver
.AudienceSegmentationErrorWidget
component to be a module with its own folder and anindex.js
file.AudienceSegmentationErrorWidget
component to a new component e.g.ErrorWidgetContent
.ErrorWidgetContent
component inforwardRef()
so aref
can be passed to it, and add theref
to its top-level rendered element.AudienceSegmentationErrorWidget
component:audienceSlug
prop of typePropTypes.string
.ErrorWidgetContent
wrapped by thewithIntersectionObserver()
HOC, e.g.ErrorWidgetContentWithIntersectionObserver
. Render this in place of the existingErrorWidgetContent
instance.onInView
callback prop toErrorWidgetContentWithIntersectionObserver
:insufficient_permissions_error
for an insufficient permissions error, ordata_loading_error
for any other error.trackEvent( '${viewContext}_audiences-all-tiles', action )
.handleRetry()
callback:insufficient_permissions_error_request_access
for an insufficient permissions error, ordata_loading_error_retry
for any other error.trackEvent( '${viewContext}_audiences-all-tiles', action )
prior to the calls tosetValue()
andonRetry()
. Chain the calls usingtrackEvent().finally()
.Test Coverage
QA Brief
Changelog entry
The text was updated successfully, but these errors were encountered: