Site Tour skips Traffic Overview step when feature flag is enabled #13656

Bug Description

This was reported in the Performance Benchmarking bug bash. When the Traffic Overview feature flag is enabled, the Site Tour skips the second step and moves directly from Step 1 to Step 3. This appears to happen because there is currently no tour step defined for the Traffic Overview widgets.

Note: We do have a ticket #13413 which will fix this issue, but we would like this change made earlier in the sprint as we have to test the modal in all of the SFR scenarios.

Steps to reproduce

1. Setup Site Kit on a fresh site with the trafficOverview feature flag enabled.
2. When you complete the setup the modal should appear.
3. Go through the tour and observe the issue above.

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

Acceptance criteria

• On the main dashboard with Analytics connected and the trafficOverview feature flag enabled, the welcome tour includes a traffic step that highlights the Traffic Overview card and anchors its tooltip against that card's chart.
• The traffic step keeps its current position in the tour (directly after the Key Metrics step) and its existing title and copy, for both the flag-enabled and flag-disabled states.
• With the trafficOverview feature flag disabled, the tour is unchanged and its traffic step still highlights the All Traffic card.
• Running the tour end to end on the main dashboard reaches every step in order in both flag states and for both authenticated and view-only users.

Implementation Brief

• Update the traffic step of the Analytics-connected tour

  site-kit-wp/assets/js/feature-tours/welcome.ts

  Lines 297 to 314 in a98127b

  	{
  	target: '.googlesitekit-widget--analyticsAllTrafficGA4',
  	floaterProps: {
  	target: '.googlesitekit-widget--analyticsAllTraffic__user-count-chart',
  	},
  	title: __(
  	'Track traffic trends, identify baselines',
  	'google-site-kit'
  	),
  	content: __(
  	'Know what’s normal for your site. This is how you spot trends and measure real growth.',
  	'google-site-kit'
  	),
  	offset: 35,
  	spotlightPadding: 0,
  	placement: 'top',
  	isResponsive: true,
  	},

  so it targets whichever traffic card is actually registered:
  • Extract the step into its own helper alongside getTopSearchQueriesStep

    site-kit-wp/assets/js/feature-tours/welcome.ts

    Line 161 in a98127b

    function getTopSearchQueriesStep() {

    and getActivateAnalyticsStep, taking a boolean for which card is rendered and returning the step with the matching selectors. Title, content and the step's position in the array stay as they are.
  • Add the corresponding boolean to the getWelcomeTour

    site-kit-wp/assets/js/feature-tours/welcome.ts

    Line 196 in a98127b

    export function getWelcomeTour( {

    parameter object and its JSDoc, following the existing isKeyMetricsWidgetPresent / isAudienceSegmentationWidgetPresent pattern, so the module stays a pure function of its parameters.
  • The Traffic Overview card renders with the class derived from its widget slug, TRAFFIC_OVERVIEW_WIDGET_SLUG, and the chart element the tooltip should anchor to is the container rendered by TrafficChart, which is the counterpart of the All Traffic user count chart used today.
  • Re-check offset, spotlightPadding and placement against the Traffic Overview card - the current offset: 35 was tuned for the All Traffic chart - and adjust for the new card if the tooltip or spotlight sits wrong.
• Update useWelcomeTour to read the flag with the useFeature hook and pass the new parameter through to getWelcomeTour, leaving the flag check out of welcome.ts itself.
• preloadWidgetAreas needs no change - both cards register into the same Traffic widget area.
  Note: this is intentionally a minimal, flag-aware fix ahead of Remove the trafficOverview feature flag, All Traffic widget, and retarget the welcome tour #13413, which removes the trafficOverview flag and the All Traffic card altogether. Keep the change small enough that Remove the trafficOverview feature flag, All Traffic widget, and retarget the welcome tour #13413 only has to delete the flag-disabled branch and the extra parameter.

Test Coverage

• Extend assets/js/feature-tours/welcome.test.ts with cases asserting that the traffic step targets the Traffic Overview selectors when the new parameter is true, and the All Traffic selectors when it is false, and that the step count and order are the same in both cases.
• Extend assets/js/feature-tours/hooks/useWelcomeTour.test.ts with a case that enables the flag via the features option of the test renderer and asserts the returned tour carries the Traffic Overview traffic step, plus the existing flag-disabled expectation..

QA Brief

• With setupFlowRefresh on and trafficOverview off, on a site with Key Metrics and the visitor groups set up, open the main dashboard. Click Help in the Site Kit header, then Start a feature tour, then Next until the tour ends. Make sure the 2 / 5 tooltip, Track traffic trends, identify baselines, still highlights the All Traffic card. Its arrow points at the card's line chart. The counter reaches 5 / 5 with no step skipped.
• Turn on trafficOverview and start the tour again from the Help menu. Click Next once and make sure the counter reads 2 / 5, not 3 / 5. The tooltip now highlights the Traffic Overview card, with its arrow on the card's chart. It keeps the title Track traffic trends, identify baselines and the text Know what’s normal for your site. This is how you spot trends and measure real growth.
• Click Next until the tour ends. Make sure the counter reaches 5 / 5 with no step skipped. The last tooltip reads Share insights with your team.
• Narrow the browser to a phone width of 375 pixels and run the tour again. Make sure the 2 / 5 tooltip, Track traffic trends, identify baselines, highlights the Traffic Overview card.
• Share Analytics with the Editor role, sign in as an editor, and run the tour from the Help menu. Make sure the 2 / 5 tooltip highlights the Traffic Overview card. The tour ends on 5 / 5, Get instant access to insights, no setup, at the "View only" menu in the Site Kit header.
• On a fresh site with setupFlowRefresh and trafficOverview on, set up Site Kit and connect Analytics to a property with data. When the "Welcome to Site Kit" modal appears, click Start tour, then Next until the tour ends. Make sure the Track traffic trends, identify baselines tooltip highlights the Traffic Overview card. The counter goes up by one with each Next rather than skipping a step.

Changelog entry

• Fix the welcome tour skipping its traffic step when the new Traffic Overview widget is enabled.