Creation of Top traffic source driving leads ACR KMW

[zutigrm]

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:

Description: Total number of lead form submissions for top traffic source. We will extract only the top performing one and show it in the existing numeric tile template (like what we have for the existing “Top traffic source” KM tile). 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: generate_lead submit_lead_form and contact
Metrics: Total generate_lead submit_lead_form and contact events count, ordered by sessionDefaultChannelGroup dimension, returning the 1st item from results
Dimension: sessionDefaultChannelGroup
Order: Descending

---

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

Acceptance criteria

• A new Top traffic source 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 traffic source driving leads within ACR metrics section of design
  • Widget displays the percentage of generate_lead|submit_lead_form|contact event count for the sessionDefaultChannelGroup dimension (using the 1st/top channel from the results)
  • Total number of leads for the top traffic source should be used for description and the tootlip
  • Widget will not be displayed, or shown in the selection panel list if none of the above listed event names are 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_TRAFFIC_SOURCE_DRIVING_LEADS, holding a string kmAnalyticsTopTrafficSourceDrivingLeads
• Update assets/js/components/KeyMetrics/key-metrics-widgets.js
  • Register new widget for KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_LEADS
  • Use "Top traffic source driving leads" for title
  • Use "Total number of leads for the top traffic source" 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
• Add assets/js/modules/analytics-4/components/widgets/TopTrafficSourceDrivingLeads.js
  • You can use assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js as a starting point
  • In totalLeadsReportOptions:
    • Use eventCount for metrics
    • Use eventName dimension
    • 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 Creation of a New GA4 Datastore Partial for Detected ACR Events #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
  • In trafficSourceReportOptions:
    • Use sessionDefaultChannelGroup and eventName for dimensions
    • Use eventCount metric
    • Use same dimensionFilters as in previous report options
• 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 Analytics module
  • Contact Aleksej for access to the website with ACR data
• Verify that in key metrics selection panel Top traffic source driving leads widget is not available
• Enable conversionReporting feature flag
• Go to key metrics selection panel and choose Top traffic source 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 traffic source driving leads widget is showing zero data (since widget will only have data on property that has ACR data)

Changelog entry

• Add Key Metric Widget for "Top traffic source driving leads".

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment using test ACR test site.
• Verified that Top traffic source driving leads widget is not available under KMW panel if conversionReporting feature flag is not enabled.
• Verified the Top traffic source driving leads widget is showing zero data if data is not available for selected property or selected date range.
• Verified Total number of leads for the top traffic source used for description and the tooltip
• Verified that the widget is showing correct data as per analytics, and matching the Figma design

Note : In the Figma design, the traffic source title font size is set to 16px. However, for similar existing KMWs, we use a font size of 18px, which is also the size we use for ACR widgets. The 18px size looks better, while 16px appears too small.

Pass Cases