Create the "Top cities driving traffic" key metric widget tile

[jimmymadon]

Feature Description

• Refer to the widget tables in the design doc and the PRD explaining the sources of data and other details.
• Figma mock for all widgets

---

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

Acceptance criteria

• A new component should be created for the 'Top cities driving traffic' Key metric widget and should be displayed within the Key Metrics widget area if it is selected (based on Improve fetching key metrics based on user selected metrics #6257 and Register the new key metric widgets #6313).
  • The component should reflect the screenshot supplied above, see the Figma link above for more detail.
• The top three cities with the highest number of totalUsers should be displayed from the Google Analytics Data API using the following metric/dimension and the global date range selected on the Site Kit dashboard:
  • metric: totalUsers
  • dimension: city
• Existing GA4 datapoints and datastore infrastructure that is being added as part of the GA4 Reporting Epic should be used where available.

Implementation Brief

• Once Create the "Top performing keywords" key metric widget tile #6251 have been merged.
• In assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js:
  • Return null if the GA4 module is not connected.
  • Using the getKeyMetrics selector, check if any of the selected Metric is from GA4. If not, return null. Otherwise, continue.
  • Most of the styles should already be in place as a result of Create the "Top performing keywords" key metric widget tile #6251 - reuse the MetricTileTable reusable component.
  • To get the data for the component, use the following options:
    • metrics: totalUsers
    • dimensions: city
    • limit: 3
    • orderBy: city (descending)
  • Query the GA4 data store via the getReport selector with the metric and dimension as mentioned above.
    • To get the selected date range, query the core/user data store via the getDateRangeDates with compare set to true.
  • To get the %, use the values from the totals[0].metricValues and the value for each city.
  • Use the numFmt function from assets/js/util/i18n.js to format the % number.
• Add stories for AnalyticsTopCitiesWidget in assets/js/modules/analytics-4/components/widgets/AnalyticsTopCitiesWidget.stories.js.

Test Coverage

• Add tests for the newly added TopCitiesWidget component.

QA Brief

• With the userInput feature flag enabled, answer the questionnaire. As part of this issue, test the design and metric values of the Top Cities Widget widget rendered in the Key Metrics section.
• To render the Top Cities Widget widget, run the following code on the browser console:

googlesitekit.data.dispatch( 'core/user' ).receiveGetKeyMetricsSettings( {
    widgetSlugs: [ 'kmAnalyticsTopCities' ]
} )

• Verify the Top Cities Widget stories within the Key Metrics widget section in the Storybook.
• Note: Cities are displayed as non-interactive plain text. The color of the plain text is changed, as can be seen in the Figma design.

Changelog entry

• Add "Top cities driving traffic" key metric widget.

[tofumatt]

ACs 👍🏻 Moving this to IB.

[eugene-manuilov]

IB ✔️

[hussain-t]

@nfmohit, I have moved it back to execution to apply the changes @sigal-teller provided for the non-interactive plain text.

[mohitwp]

QA Update ⚠️

• Tested on dev environment.
• Tested using oi.ie site.
• Verified the Top Cities Widget stories within the Key Metrics widget section in the Storybook.
• Verified the Top Cities Widget rendered in the Key Metrics section.
• Verified its design with Figma.

@hussain-t We already have one issue for data inconsistency under Key metrics widgets. For ' Top Cities Widget' I calculated the percentage with the data I'm getting in Analytics. I found percentage is different when I filter data for 'Last 7 days". In this case for first city Dublin percentage is same. But, getting different percentage for not set and cork city. In my calculation, percentage is 15.6 for not set city whereas widget showing 13.9% . See screenshots below and let me know if I create a separate ticket to investigate this.

[techanvil]

Hey @mohitwp, the short answer here re. the data consistency is that you need to add a hostname filter in your report, to match the default hostname filter that is applied to all of our Analytics reports.

Every Analytics report is automatically filtered for the hostname dimension to only return rows matching the hostname or its www variant, as can be seen in this screengrab of an example report request:

The main GA4 property we use for oi.ie is also used on some other sites so if we don't apply this filter when viewing data on the Analytics site, it's likely the data won't match.

So, please can you update your report by adding a hostname filter to match oi.ie (you don't actually need to filter by www.oi.ie because the www subdomain just redirects to oi.ie), and try again.

[mohitwp]

@techanvil @hussain-t I added dimension hostname and getting the same numbers in result.

[techanvil]

Hi @mohitwp, thanks for checking. Apologies, I should have sounded a bit less certain in my previous comment - I've been looking into the GA4 data inconsistencies for #7214, and this is the reason for the discrepancy with other totalUsers based reports.

It does appear to be a different situation here and it's not yet evident what the cause is.

Seeing as this issue has been implemented as per the spec, I'd suggest we add this tile to the AC for #7214 where I can continue to investigate it further, and we can move this one to Approval.

[hussain-t]

Thanks for jumping in and providing the information, @techanvil 👍

[mohitwp]

QA Update ✅

Thank you @techanvil !

• Tested on dev environment.
• Tested using oi.ie site.
• Verified the Top Cities Widget stories within the Key Metrics widget section in the Storybook.
• Verified the Top Cities Widget rendered in the Key Metrics section.
• Verified its design with Figma.

[mohitwp]

Data discrepancy issue reported above will investigate as a part of #7214