Add the Site Goals Key Metric tiles for the Generating leads group #13421

Feature Description

The Site Goals widget is only rendered when a supported Event Provider plugin is active, because its tabbed breakdown depends on the custom dimension data (event provider source and form ID) that Site Kit itself appends as part of Plugin Conversion Reporting. When the events are detected but tracked by another plugin, Site Kit cannot append that data, so the Site Goals widget is not shown at all.

Aggregated data for those same key actions is still useful in that situation, so we are building it out as Key Metric Widget tiles instead. This issue covers the eight new tiles in the Generating leads group. The Selling products group is covered in #13404, and renaming the existing ACR tiles in both groups in #13414.

The shared reporting module and the tooltip documentation link are introduced by #13404.

Detection logic is unchanged — the tiles are still driven by the same five events Site Kit already detects and tracks: purchase, add_to_cart, submit_lead_form, contact and generate_lead.

Figma mock: Site Goals — Key Metric tiles

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

Acceptance criteria

When at least one of the submit_lead_form, contact or generate_lead events has been detected, the Key Metrics selection panel offers these new tiles in the Generating leads group:

• Single-value tiles, each showing the change vs. the previous period:

  • Total Form completions — the count of the lead events for the selected date range
  • Form completion rate — a percentage, subtitled with the total session count
  • Form completion engagement rate — a percentage, subtitled with the total session count

• List tiles, each showing the top three rows for the selected date range with each row's share of the total as a percentage:

  • Top traffic channels by form completion rate
  • Leads by visitor type
  • Leads by countries
  • Leads by device type
  • Top authors driving leads — only offered when the googlesitekit_post_author custom dimension is available, as the existing Most popular authors by pageviews tile is

• Titles match the Figma mock.

• Each tile's selection panel description and its info tooltip are the same string, taken from the Metric description in panel/info icon column of the KMW metrics list.

• Form completion rate and Form completion engagement rate end in a Learn more link, pointing at site-goals-lead-generation-key-action and site-goals-engagement-rate — the targets the Site Goals widget already uses.

• Row values match the equivalent Site Goals widget tile.

• Tiles appear whenever any one of the three lead events is detected, regardless of whether the Site Goals widget is rendered.

Implementation Brief

• Update assets/js/modules/analytics-4/components/site-goals/goal-drivers/reports.ts

  • Add builders for the three lead headline metrics, lifted from LeadGenerationPerformanceWidget
  • The goal driver builders added by the sibling issue Add the Site Goals Key Metric tiles for the Selling products group #13404 are goal-type agnostic - pass the detected lead events as primaryEvent rather than adding lead-specific variants

• Update assets/js/googlesitekit/datastore/user/constants.js

  • Add a KM_ANALYTICS_* constant per tile in the ACs, following the existing kmAnalytics* value convention
  • Add each to keyMetricsGA4Widgets

    site-kit-wp/assets/js/googlesitekit/datastore/user/constants.js

    Line 98 in 582d0b4

    export const keyMetricsGA4Widgets = [

• Update assets/js/components/KeyMetrics/key-metrics-widgets.js

  • Add a KEY_METRICS_WIDGETS entry per new slug with title, description and infoTooltip from the ACs
  • Set metadata.group to KEY_METRICS_GROUP_GENERATING_LEADS.SLUG
  • Set requiredConversionEventName to the three lead events and use shouldDisplayWidgetWithConversionEvent for displayInSelectionPanel and displayInList, as the existing ACR lead entries do
  • For Top authors driving leads also set requiredCustomDimensions to [ 'googlesitekit_post_author' ] and use shouldDisplayWidgetWithCustomDimensions, as KM_ANALYTICS_POPULAR_AUTHORS

    site-kit-wp/assets/js/components/KeyMetrics/key-metrics-widgets.js

    Lines 192 to 206 in 582d0b4

    	[ KM_ANALYTICS_POPULAR_AUTHORS ]: {
    	title: __( 'Most popular authors by pageviews', 'google-site-kit' ),
    	description: __(
    	'Authors whose posts got the most visits',
    	'google-site-kit'
    	),
    	infoTooltip: __(
    	'Authors whose posts got the most visits',
    	'google-site-kit'
    	),
    	requiredCustomDimensions: [ 'googlesitekit_post_author' ],
    	displayInSelectionPanel: shouldDisplayWidgetWithCustomDimensions,
    	displayInWidgetArea: shouldDisplayWidgetWithCustomDimensions,
    	displayInList: shouldDisplayWidgetWithCustomDimensions,
    	metadata: { group: KEY_METRICS_GROUP_CONTENT_PERFORMANCE.SLUG },

    does
  • Add a documentation slug field on the two entries whose copy ends in Learn more, using the field introduced by the sibling issue Add the Site Goals Key Metric tiles for the Selling products group #13404 and the slugs in the ACs

• Add a widget component per tile in assets/js/modules/analytics-4/components/widgets/

  • Use MetricTileNumeric for Total Form completions, Form completion rate and Form completion engagement rate, passing the value, subText and currentValue/previousValue
  • Use MetricTileTable for the other five, following the columns shape in TopCitiesDrivingLeadsWidget

    site-kit-wp/assets/js/modules/analytics-4/components/widgets/TopCitiesDrivingLeadsWidget.js

    Lines 164 to 185 in 582d0b4

    	const columns = [
    	{
    	field: 'dimensionValues',
    	Component( { fieldValue } ) {
    	const [ title ] = fieldValue;
    	return <MetricTileTablePlainText content={ title.value } />;
    	},
    	},
    	{
    	field: 'metricValues.0.value',
    	Component( { fieldValue } ) {
    	return <strong>{ numFmt( fieldValue ) }</strong>;
    	},
    	},
    	];
    	return (
    	<MetricTileTable
    	Widget={ Widget }
    	widgetSlug={ KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS }
    	loading={ loading }

  • Take report options and rows from reports.ts
  • Lead reports filter on three event names rather than one - reuse the existing getDimensionFiltersForEvents helper rather than reintroducing per-widget filtering.

• Update assets/js/modules/analytics-4/widgets/index.js

  • Register each new slug in AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY with WIDGET_WIDTHS.QUARTER, wrapWidget: false, modules: [ MODULE_SLUG_ANALYTICS_4 ] and an isKeyMetricActive guard, following whatever registration shape the sibling issue settled on

• Update assets/js/modules/analytics-4/datastore/conversion-reporting.js

  • Add the new slugs to leadRelatedMetrics in getKeyMetricsConversionEventWidgets

    site-kit-wp/assets/js/modules/analytics-4/datastore/conversion-reporting.js

    Lines 352 to 372 in 582d0b4

    	getKeyMetricsConversionEventWidgets() {
    	const leadRelatedMetrics = [
    	KM_ANALYTICS_TOP_PAGES_DRIVING_LEADS,
    	KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS,
    	KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_LEADS,
    	];
    	return {
    	purchase: [
    	KM_ANALYTICS_TOP_CITIES_DRIVING_PURCHASES,
    	KM_ANALYTICS_TOP_DEVICE_DRIVING_PURCHASES,
    	KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_PURCHASES,
    	],
    	add_to_cart: [
    	KM_ANALYTICS_TOP_CITIES_DRIVING_ADD_TO_CART,
    	KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_ADD_TO_CART,
    	],
    	contact: leadRelatedMetrics,
    	submit_lead_form: leadRelatedMetrics,
    	generate_lead: leadRelatedMetrics,
    	};

    , which all three lead events share

• Update assets/js/components/KeyMetrics/key-metrics-pdf-tiles.js

  • Add an entry per new slug mirroring the on-screen layout and value formatting

Test Coverage

• Add unit tests for the lead headline builders added to reports.ts
• Update assets/js/components/KeyMetrics/key-metrics-widgets.test.js and assets/js/modules/analytics-4/datastore/conversion-reporting.test.js to cover the new slugs — offered when any one of the three lead events is detected, and Top authors driving leads additionally requiring googlesitekit_post_author
• Add a test file per new widget component following TopCitiesDrivingLeadsWidget.test.js — loading, error, zero-data and populated states, asserting percentage row formatting
• Add coverage for a site where only one of the three lead events is detected, since the group is gated on any of them
• Add a Storybook story per new tile, matching the existing ACR tile stories

QA Brief

• With any of submit_lead_form, contact or generate_lead detected as a conversion event, open the Key Metrics selection panel → Generating leads tab and confirm all 8 new tiles are offered (Total Form completions, Form completion rate, Form completion engagement rate, Top traffic channels by form completion rate, Leads by visitor type, Leads by countries, Leads by device type, Top authors driving leads), alongside the group's existing tiles.
• Select and apply all 8; confirm each renders on the dashboard: Total Form completions / Form completion rate / Form completion engagement rate as a single value with a change badge vs. the previous period, and the remaining five as a 3-row list with each row's share of the total as a percentage.
• Hover the info icon on Form completion rate and Form completion engagement rate; confirm a working Learn more link. Confirm the other 6 tiles show a plain-text tooltip with no link, and that every tile's tooltip text matches its panel description.
• On a site where only one of the three lead events is detected (e.g. just contact), confirm all 8 tiles are still offered — the group is gated on any one of the three, not all three.
• With none of the three lead events detected, confirm none of the 8 tiles are offered in the selection panel.
• On an admin dashboard without the googlesitekit_post_author custom dimension, confirm Top authors driving leads shows the "Update Analytics to track metric" CTA, and that clicking it creates the dimension and moves the tile to a gathering-data state.
• On a view-only (shared) dashboard, confirm Top authors driving leads is only offered when googlesitekit_post_author is available, even if a lead event is detected.
• Where the Site Goals widget is also visible (a supported Event Provider plugin active), compare row values for Top traffic channels by form completion rate, Leads by visitor type, Leads by countries, Leads by device type and Top authors driving leads against their equivalent Site Goals tile and confirm they match.
• Export the dashboard to PDF and confirm all 8 new tiles appear with the same layout and values as on-screen.

Changelog entry

• Add Site Goals key metric tiles for "Generating leads".