Creation of `Top cities driving add to cart` ACR KMW

[10upsimon]

Feature Description

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

• Description: Cities from which users are triggering the most add to cart events.
• Events: add_to_cart
• Metrics: addToCarts
• Dimension: city
• Order: Descending
• Purpose: Inform users of the most active cities taking the add to cart actions on the website so they can make informed decisions.
• 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 add to cart 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 addToCarts metric based on city dimension (returning top 3 results)
  • Cities where visitors most frequently add products to their carts should be used for description and the tooltip
  • Widget will not be displayed, or shown in the selection panel list if add_to_cart 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_ADD_TO_CART, holding a string kmAnalyticsTopCitiesDrivingAddToCart
• [ ] Update assets/js/components/KeyMetrics/key-metrics-widgets.js
  • Register new widget for KM_ANALYTICS_TOP_CITIES_DRIVING_ADD_TO_CART
  • Use "Top cities driving add to cart" for title
  • Use "Cities where visitors most frequently add products to their carts" for description and tooltip
  • Include new property requiredConversionEventName, and assign it an array value containing add_to_cart event name
  • In displayInList pass the helper function shouldDisplayWidgetWithConversionEvent
• [ ] Add assets/js/modules/analytics-4/components/widgets/TopCitiesDrivingAddToCartWidget.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 addToCarts 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

• Setup Site Kit with the Analytics module enabled
• Contact @zutigrm for access to the test website containing ACR data
• Verify that in key metrics selection panel the Top cities driving add to cart widget is not available
• Enable the conversionReporting feature flag
• Navigate to the key metrics selection panel and select the Top cities driving add to cart tile
• Verify that the widget is showing data, and matching the Figma design
• Go to Analytics settings - switch to a different account/property, and verify that the Top cities driving add to cart widget is showing zero data (since the widget will only be having data on properties that have required ACR events and data associated with them)

Changelog entry

• Add the Top cities driving add to cart widget.

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[techanvil]

Hey @10upsimon, it looks like the VRT tests for the KeyMetrics/TopCitiesDrivingAddToCartWidget/Ready were failing when they were added - here's the VRT test run from the Checks tab for the PR: https://github.com/google/site-kit-wp/actions/runs/11047842007/job/30689883579?pr=9409

Please could you raise a followup PR to fix these?

@mohitwp I've moved this back to execution with Simon for the fix.

Cc @zutigrm @eugene-manuilov

[mohitwp]

@10upsimon Is this ticket ready for CR ?

[10upsimon]

@mohitwp this should be good to go straight into QA as it was merged prior to the failing tests. I have opened a new PR against develop that show the VRTs now pass against the current develop branch (see https://github.com/google/site-kit-wp/actions/runs/11146601551/job/30978940714?pr=9452)

This is good to be QA'd no and I've assigned to you.

cc @techanvil @zutigrm @tofumatt @aaemnnosttv

[mohitwp]

QA Update ❌

• Tested on main environment.
• @10upsimon Changes introduced under this ticket are not behind feature flag. Top cities driving add to cart widget available under KMW panel when conversionReporting feature flag is not enabled.

https://github.com/user-attachments/assets/fd3d4d07-cda4-434b-816d-6b9755047ead

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified that Top cities driving add to cart widget is not available under KMW panel if conversionReporting feature flag is not enabled.
• Verified the Top cities driving add to cart is showing zero data if data is not available for selected property or selected date range.
• Verified that the widget is showing correctdata, and matching the Figma design
• Verified that "Cities where visitors most frequently add products to their carts" used for description and the tooltip.

_When conversionReporting feature flag not enabled._ https://github.com/user-attachments/assets/e65e5211-23bc-4641-88c8-ec05b227ecf4 _When conversionReporting feature flag is enabled._ https://github.com/user-attachments/assets/1ee1c40d-1ecc-43fd-a475-da8194effe31