Refactor the Audience Tiles to use new pivot report infrastructure

[benbowler]

Feature Description

As discussed on Slack, while we are initially implementing the Audience Tiles to use separate, per-audience reports to retrieve the cities and "top content" metrics (one report per audience per metric), we can reduce the number of reports needed by using pivot reports. This will allow us to retrieve metric data for all of the audiences in a single report (i.e., one report per metric).

We should add support for running pivot reports, and refactor the Audience Tiles to use them.

This is not critical to the release and can be done post-launch, hence the P2 priority.

Please also note this comment relating to the AudienceTile and AudienceTiles refactoring: #8484 (comment)

This ticket has been split from #8484, and only concerns updating the Audience Tiles to use the new pivot report infrastructure, which will be completed in that ticket.

---

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

Acceptance criteria

• The AudienceTiles component (introduced via Add the Audience Tiles widget (Storybook) #8136) should be refactored to use pivot reports for the "top cities" and "top content" metrics, thus reducing the corresponding request count by a factor of the number of selected audiences.
• The AudienceTiles and AudienceTile components should be further refactored so the reports that are retrieved in AudienceTiles are passed directly to AudienceTile, and the corresponding data parsing/extraction logic is moved from AudienceTiles to AudienceTile. Hopefully this logic can be simplified in the process.
• Additionally, refactor the AudienceTile stories to replace the hardwired mock data with generated mock report data.

Implementation Brief

Audience Segmentation Report Updates

• Update the assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget.js component:

  • Update topCitiesReportOptions to the following report structure:

    startDate,
    endDate,
    dimensions: [ { name: 'city' }, { name: 'audienceResourceName' } ],
    dimensionFilters: {
    	audienceResourceName: configuredAudiences,
    },
    metrics: [ { name: 'totalUsers' } ],
    pivots: [
    	{
    		fieldNames: [ 'city' ],
    		orderby: [
    			{ metric: { metricName: 'totalUsers' }, desc: true },
    		],
    		limit: 3,
    	},
    	{
    		fieldNames: [ 'audienceResourceName' ],
    	},
    ],
    

  • Update the topCitiesReport to use the new getPivotReport selector instead of getReportForAllAudiences, passing topCitiesReportOptions as the only prop.
  • Update topContentReportOptions to the following report structure:

    startDate,
    endDate,
    dimensions: [ { name: 'pagePath' }, { name: 'audienceResourceName' } ],
    dimensionFilters: {
    	audienceResourceName: configuredAudiences,
    },
    metrics: [ { name: 'screenPageViews' } ],
    pivots: [
    	{
    		fieldNames: [ 'pagePath' ],
    		orderby: [
    			{ metric: { metricName: 'screenPageViews' }, desc: true },
    		],
    		limit: 3,
    	},
    	{
    		fieldNames: [ 'audienceResourceName' ],
    	},
    ],
    

  • Update the topContentReport to use the new getPivotReport selector instead of getReportForAllAudiences, passing topContentReportOptions as the only prop.
  • Update topContentPageTitlesReportOptions to the following report structure:

    startDate,
    endDate,
    dimensions: [ { name: 'pagePath' }, { name: 'pageTitle' }, { name: 'audienceResourceName' } ],
    dimensionFilters: {
    	audienceResourceName: configuredAudiences,
    },
    metrics: [ { name: 'screenPageViews' } ],
    pivots: [
    	{
    		fieldNames: [ 'pagePath' , 'pageTitle' ],
    		orderby: [
    			{ metric: { metricName: 'screenPageViews' }, desc: true },
    		],
    		limit: 15,
    	},
    	{
    		fieldNames: [ 'audienceResourceName' ],
    	},
    ],
    

  • Update the topContentPageTitlesReport to use the new getPivotReport selector instead of getReportForAllAudiences, passing topContentPageTitlesReportOptions as the only prop.

• Remove the getReportForAllAudiences selector and all related code/tests.

• Update assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTiles.js:

  • Replace all of the restructuring code with a single array filter, one for each report, that filters the report .rows, based on the dimensionValues[0].value === audienceResourceName, (audienceResourceName is from the parent map). This will return two rows per metric, one for each date range.
    • For topContentPageTitlesReport, filter the rows as in the previous bullet point, passing through all 15 top page titles and paths as the AudienceTilePagesMetric.js component will continue to do the selection of titles based on topContent and topContentTitles props.
  • Calculate the percentageOfTotalPageviews, by dividing the screenPageViews metric from the current date range, with the RESERVED_TOTAL of the screenPageViews metric over the same date range.
  • Pass the raw report rows array to each of the AudienceTile component props.

AudienceTile Updates

• Update AudienceTile to use the new prop structure defined above.
• Update AudienceTile stories to use this new pivot report data-mock functionality defined in Add support for GA4 pivot reports #8484

Test Coverage

• Confirm existing tests pass, along with VRTs.

QA Brief

Changelog entry

[benbowler]

FYI, this ticket was split from #8484 on 17 May 2024. #8484 is a blocker.

[techanvil]

Hey @benbowler, thanks for drafting this IB. A few points:

• The first report in AudienceTiles doesn't seem to need the update - it's already being retrieved via getReport() rather than getReportForAllAudiences(), and seems fine as it is AFAICT.
• The remaining reports should be updated to use the getPivotReport() selector in line with the proposed changes to Add support for GA4 pivot reports #8484, assuming they have been made.
• The report with options topContentPageTitlesReportOptions should also be covered in the IB (including the refactoring of the restructuring code).
• A minor point but the report option code blocks are slightly misaligned in places.
• Another minor one, I think the point in Data Mock Updates about updating "AudienceTile stories to use this new data-mock functionality" should refer to "the new data-mock functionality introduced in Add support for GA4 pivot reports #8484" for the sake of clarity.

[techanvil]

Thanks for the update @benbowler. It looks like these two points have been missed, though, please can you take a look?

• The report with options topContentPageTitlesReportOptions should also be covered in the IB (including the refactoring of the restructuring code).
• A minor point but the report option code blocks are slightly misaligned in places.

[techanvil]

Thanks Ben! This IB LGTM. ✅