Feature Description

When a user actions the new introductory feature modal, a Feature Tour should be triggered as per these Figma mocks.

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

Acceptance criteria

• When a user clicks on the "Show me" CTA on the new Introductory Feature Modal for the Site goals widget, a new 3-step feature tour should be triggered highlighting the specific areas of the new widget rendered on the dashboard, as per this figma mock.

Implementation Brief

See the Figma mock for the step copy and target areas.
Enable the setupFlowRefresh flag in the tester to render the Figma's tooltip styling.

• Update file assets/js/feature-tours/constants.js
  • Add SITE_GOALS_TOUR = 'site-goals-feature-tour' alongside WELCOME_TOUR.
• Create file assets/js/feature-tours/site-goals.ts
  • Export getSiteGoalsTour( { isEcommerceOnly }: { isEcommerceOnly: boolean } ) returning a tour config with slug: SITE_GOALS_TOUR, isRepeatable: true, contexts: [ VIEW_CONTEXT_MAIN_DASHBOARD ], and gaEventCategory that prefixes the current view context onto _site-goals-tour.
  • preloadWidgetAreas: [ AREA_MAIN_DASHBOARD_SITE_GOALS_PRIMARY ] so the targets are in view before the first callout opens.
  • Three step objects, each with target, title, content, placement: 'top', isResponsive: true, offset: 0, spotlightPadding: 0. Targets in order:
    • .googlesitekit-site-goals-primary-action (the "Key action" tile group, matching the Figma "Tour 01" spotlight).
    • .googlesitekit-site-goals-primary-action (placeholder. The Figma "Tour 02" frame spotlights a "Get breakdown" callout that doesn't exist in the codebase yet).
    • .googlesitekit-site-goals-goal-drivers-group (the "What's helping you reach your goals?" tile group).
  • Step 1 title and content match the Figma "Tour 01" frame. Step 3 matches "Tour 03".
  • Step 2 title is "Get into the details". content branches on isEcommerceOnly: leads copy mirrors the "Tour 02 leads" Figma frame, sales copy mirrors "Tour 02 // Sales".
• Create file assets/js/feature-tours/hooks/useSiteGoalsTour.ts
  • Export useSiteGoalsTour(). Read hasEcommerceConversionReportingEvents and hasLeadConversionReportingEvents from MODULES_ANALYTICS_4. Compute isEcommerceOnly = !! hasEcommerce && ! hasLead. Pass into getSiteGoalsTour. Mirrors the conditional pattern in useWelcomeTour.
• Update file assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/index.tsx
  • Pull useSiteGoalsTour and add triggerOnDemandTour to the useDispatch( CORE_USER ) destructure.
  • Add handleShowMe = useCallback( () => triggerOnDemandTour( siteGoalsTour ), [ ... ] ).
  • Extend createModalHandlers with an onShowMeCTAClicked: () => void parameter and call it inside onConfirm after onClose(), matching the close-then-trigger order used by WelcomeModal.startTourAndClose.
  • Pass handleShowMe into all three createModalHandlers calls (ECOMMERCE, LEAD, ECOMMERCE_AND_LEAD) so the tour fires regardless of variant.

Notes (no action required)

• The "Get breakdown" callout (purple banner in Figma "Tour 02") will be built in a follow-up ticket (to-be-created). Step 2 targets .googlesitekit-site-goals-primary-action as a placeholder until that callout lands. If step 2 needs to hide before then, apply Enhancement/12519 replace tour missing steps #12725's conditional-step pattern.
• Tour-tooltip pixel refinements (modal width, body font-weight, floater arrow margin) will land in a follow-up ticket (to-be-created), in assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss and following Enhancement/#11812 - Implement new designs for the TourTooltip component #11934's shape.

Test Coverage

• Add assets/js/feature-tours/site-goals.test.ts covering the tour's slug, isRepeatable, contexts, preloadWidgetAreas, gaEventCategory, the three step targets, and step 2 content for both isEcommerceOnly branches (leads and sales).
• Add assets/js/feature-tours/hooks/useSiteGoalsTour.test.ts: lead-only events > leads variant, ecommerce-only > sales variant, both > leads default.
• Update assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/index.test.js to fire-click "Show me" and assert select( CORE_USER ).getCurrentTour() returns the mocked useSiteGoalsTour value.

QA Brief

All step titles and text match the Figma. Step 2's text follows the events you set, and both event types show the leads text.

Setup

• In the Tester plugin, turn on the siteGoals and setupFlowRefresh feature flags.
• Connect Analytics-4.
• In the Tester plugin, open Analytics → Conversion Reporting and use Force detected events to set purchase for sales, submit_lead_form for leads, or both.

Test 1: the tour with the notice (3 steps)

• Open the Site goals tab on the main dashboard and click Show me on the intro pop-up. The tour opens with three steps.
• Step 1 highlights the Key action tile.
• Click Next. Step 2 highlights the breakdown notice. Check the highlight has equal space on its left and right.
• Click Next. Step 3 highlights the "What's helping you reach your goals?" group.
• Click Done. The tour closes.

Test 2: the tour without the notice (2 steps)

• After Test 1, click No thanks on the breakdown notice.
• In phpMyAdmin, open wp_usermeta, find the wp_googlesitekitpersistent_dismissed_items row for your user, change the number after site_goals_intro_modal_banner from 0 to 1, and save.
• Reload, open the Site goals tab, and click Show me.
• The tour now has two steps: Key action, then the "What's helping you reach your goals?" group. The breakdown notice step is gone.

Changelog entry

• Add Site Goals feature tour.