Creation of `Top device driving purchases` ACR KMW

[10upsimon]

Feature Description

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

• Description: Total number of purchases for the top device. We will extract only the top performing one and show it in existing numeric tile template (similar to the existing “Top traffic source” KM tile)
• Events: purchase
• Metrics: ecommercePurchases
• Order: Descending
• Purpose: Inform users of the best performing device so they can take action in that direction if needed. If their top platform driving purchases is mobile, maybe they need to put additional effort to ensure a smoother add to cart experience for visitors in order to keep growing this metric, etc.
• Type: Numerical

Figma design: TBA

---

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

Acceptance criteria

• A new Top device driving purchase 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 percentage of ecommercePurchases metric for the deviceCategory dimension (using the 1st/top device category from the results)
  • Top device 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

• [x] Update assets/js/googlesitekit/datastore/user/constants.js
  • Include new constant, say KM_ANALYTICS_TOP_DEVICE_DRIVING_PURCHASES, holding a string kmAnalyticsTopDeviceDrivingPurchases
• [x] Update assets/js/components/KeyMetrics/key-metrics-widgets.js
  • Register new widget for KM_ANALYTICS_TOP_DEVICE_DRIVING_PURCHASES
  • Use "Top device driving purchases" for title
  • Use "Top device 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
• [x] Add assets/js/modules/analytics-4/components/widgets/TopDeviceDrivingPurchases.js
  • You can use assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js as a starting point due to the similarity, with difference in report options
  • In totalPurchasesReportOptions:
    • Use ecommercePurchases metric
  • In deviceReportOptions:
    • Use deviceCategory for dimensions
    • Use ecommercePurchases metric
• 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 device driving purchases widget is not available
• Enable the conversionReporting feature flag
• Navigate to the key metrics selection panel and select the Top device driving purchases tile
• Verify that the widget is showing data, and matching the Figma design in the AC.
• Go to Analytics settings - switch to a different account/property, and verify that the Top device driving purchases 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 Top Device Driving Purchases Key Metric Widget.

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that under key metrics selection panel the Top device driving purchases widget is not available if 'conversionReporting' feature flag is not enabled.
• Verified that under key metrics selection panel the Top device driving purchases widget is available if 'conversionReporting' feature flag is enabled.
• I verified that the Top Device Driving Purchases widget matches the Figma design. However, I noticed that the device name font size is 16px in Figma and 18px in the actual implementation. I believe the 18px size looks better, as 16px appears too small, so I won’t raise this difference.
• Verified Top device driving the most purchases used for description and the tooltip.
• Verified widget data is correct.
• Verified negative and zero data state of the widget.