Creation of `Top cities driving purchases` ACR KMW

[10upsimon]

Feature Description

One of the identified metric tiles for the ACR epic is Top cities driving purchases. Details of this metric tile are as follows:

• Description: Cities from which users are making the most purchases.
• Events: purchase
• Metrics: ecommercePurchases
• Dimension: city
• Order: Descending
• Purpose: Inform users of the most active countries making the purchases on the website so they can make informed decisions on increasing the effort (translating/keywords/marketing campaigns, etc) to serve their content/products to these countries.
• Type: Tabular

Figma design: TBA

---

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

Acceptance criteria

• A new Top cities driving purchases ACR widget is introduced to the existing list of widgets available within KMW
  • Said widget presents visually as per the Figma design: Top traffic source driving leads within ACR metrics section of design
  • Widget displays the list of top cities for ecommercePurchases metric based on city dimension (returning top 3 results)
  • Cities driving the most purchases should be used for description and the tooltip
  • Widget will not be displayed, or shown in the selection panel list if purchase event is not present, or conversionReporting feature flag is not enabled

Implementation Brief

• [ ] Update assets/js/googlesitekit/datastore/user/constants.js
  • Include new constant, say KM_ANALYTICS_TOP_CITIES_DRIVING_PURCHASES, holding a string kmAnalyticsTopCitiesDrivingPurchases
• [ ] Update assets/js/components/KeyMetrics/key-metrics-widgets.js
  • Register new widget for KM_ANALYTICS_TOP_CITIES_DRIVING_PURCHASES
  • Use "Top cities driving purchases" for title
  • Use "Cities driving the most purchases" for description and tooltip
  • Include new property requiredConversionEventName, and assign it an array value containing purchase event name
  • In displayInList pass the helper function shouldDisplayWidgetWithConversionEvent
• [ ] Add assets/js/modules/analytics-4/components/widgets/TopCitiesDrivingPurchasesWidget.js
  • You can use assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js for example, as a starting point
  • In reportOptions:
  • Use city for dimensions
  • Use ecommercePurchases metric
  • Filter out the not set dimension value for the city. You can see an example in TopCitiesDrivingLeadsWidget
• [ ] Update assets/js/modules/analytics-4/index.js to include new widget registration

Test Coverage

• Add stories for the new widget

QA Brief

Changelog entry

[eugene-manuilov]

IB ✔️