Creation of `Top pages driving leads` ACR KMW

[10upsimon]

Feature Description

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

• Type: Tabular
• Description: Pages on which form is most frequently submitted. Tile should combine counts from both contact and submit_lead_form events, if present, otherwise, it will use the data for events that are present.
• Events: submit_lead_form,contact
• Metrics: screenPageViews, generate_lead, contact and submit_lead_form events count,
• Dimension: pagePath
• Order: Descending
• Purpose: Inform users of the most performing pages on the website so they can study them and try to find a pattern they can repeat to boost other pages.

Figma Design

Top pages driving leads within ACR metrics section of design

Widget Preview

---

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

Acceptance criteria

• A new Top pages driving leads ACR widget is introduced to the existing list of widgets available within KMW
  • Said widget presents visually as per the Figma design: Top pages driving leads within ACR metrics section of design (screenshot below)
  • 
  • Said widget retrieves and displays the top 3 pages ordered by generate_lead, submit_lead_form and contact event count based on the pagePath, with page titles and URLs listed on the left, and total event counts to the right
  • Said widget will display the following tooltip text when the information icon is hovered over (within the widget tile): "Pages on which forms are most frequently submitted"
  • Said new widget will not render any output if the conversionReporting feature flag is not enabled, until such time that the feature flag is removed in a future issue
  • Said new widget will not be displayed in none of the above listed event names are present

Implementation Brief

• [x] Update assets/js/googlesitekit/datastore/user/constants.js
  • Include new constant, say KM_ANALYTICS_TOP_PAGES_DRIVING_LEADS, holding a string kmAnalyticsTopPagesDrivingLeads
• [x] Update assets/js/components/KeyMetrics/key-metrics-widgets.js
  • Add a helper function, for example shouldDisplayWidgetWithConversionEvent, that will use the selector implemented in #9132 to check if this.requiredConversionEventName is present in the returned array, alongside the presence of conversionReporting feature flag. It can work similarly like shouldDisplayWidgetWithCustomDimensions
  • Register new widget for KM_ANALYTICS_TOP_PAGES_DRIVING_LEADS
  • Use "Top pages driving leads" for title
  • Use "Pages on which forms are most frequently submitted" for description and tooltip
  • Include new property requiredConversionEventName, and assign it an array value containing following event names: submit_lead_form, contact and generate_lead
  • In displayInList pass the helper function shouldDisplayWidgetWithConversionEvent
• [x] Add assets/js/modules/analytics-4/components/widgets/TopPagesDrivingLeadsWidget.js
  • You can use assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js for example, as a starting point
  • In reportOptions:
  • Use pagePath and eventName for dimensions
  • Use eventCount metric
  • Include dimensionFilters for eventName dimension. Use inListFilter for filterType and for the value include the detected event name by cross-referencing the recentEvents inline data returned from selector implemented in #9132 with - ['submit_lead_form', 'contact', 'generate_lead']. In case both contact and submit_lead_form are detected, use only submit_lead_form, to cover the cases where users have both Popup Maker and Contact Form 7 plugins installed, as both events would be tracked, making them duplicate.
    • You can see an example of how is inListFilter filter used in assets/js/modules/analytics-4/components/widgets/TopRecentTrendingPagesWidget.js
  • Render the result showing urls from pagePath and count from returned values of eventCount metric

Test Coverage

• Add stories for the new widget

QA Brief

• Setup Site Kit with Analytics module
  • Contact Aleksej for access to the website with ACR data
• Verify that in key metrics selection panel Top pages driving leads widget is not available
• Enable conversionReporting feature flag
• Go to key metrics selection panel and choose Top pages driving leads tile
• Verify it widget is showing data, and matching the figma design
• Go to analytics settings - switch to different account/property, and verify that Top pages driving leads widget is showing zero data (since widget will only have data on property that has ACR data)

Changelog entry

• Add a Key Metric widget for "Top pages driving leads" when Analytics Conversion Reporting is enabled.

[eugene-manuilov]

• Said widget makes use of the MetricTileTable component to facilitate layout of said top 3 pages, matching the design

@10upsimon, AC looks good but this point isn't needed, I'll remove it and move this ticket to IB.

[eugene-manuilov]

IB ✔️

[zutigrm]

@tofumatt I removed one point from IB, based on latest development, we will not need to use showWidget check in case you already included it, it can be removed

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified that Top pages driving leads widget is not available under KMW panel if conversionReporting feature flag is not enabled.
• Verified the Top pages driving leads widget 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 "Pages on which forms are most frequently submitted" used for description and the tooltip.