Feature Description

We should add lightweight thumbs feedback to Site Goals so users can quickly rate usefulness in context.

Feedback should be captured in two places:

• Per Site Goals widget (overall usefulness).
• In Site Goals side panel for the determined Primary Action (relevance of key action).

Votes are sent via survey triggers in format: vote:<vote_id>:up|down.
Users can vote multiple times; each click should submit a trigger (internal reporting will use the latest vote per user).

The Google Form for "Tell us more" link on thumbs down tooltip, will be provided by Mariya. Current thread on this is here

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

Acceptance criteria

• A thumbs up/down feedback control is added to each Site Goals widget card (Online store performance, Lead generation performance) to capture overall widget usefulness.
• A Primary Action row is shown in Site Goals side panel for each goal type, with read-only Key Action value and adjacent thumbs up/down control ("Is this a Key action?" section).
• Key Action label in side panel follows Primary Action mapping:
  • ecommerce purchase -> Purchase
  • ecommerce add_to_cart -> Products added to cart
  • lead primary action (aggregated lead events) -> Form completion
• Clicking thumbs up sends survey trigger vote:<vote_id>:up; clicking thumbs down sends vote:<vote_id>:down.
• After vote submission, clicked thumb is visually highlighted and acknowledgement tooltip is shown per Figma (here and here, same also in Selection Panel)
  • Upvote tooltip content is "Thanks for the feedback!".
  • Downvote tooltip content is "Thanks for the feedback! Tell us more", where "Tell us more" is a link to external Google Form (link TBD from Mariya).
  • Tooltip is dismissible via close button and can be shown again on subsequent votes
• Voting is repeatable (no one-time lockout).
• Primary action and feedback control are matching (Figma design)

Implementation Brief

• Add a reusable component under assets/js/components/surveys/ (for example ThumbsSurveyTrigger.js).

  • Component accepts voteID - required, and optional callbacks (onVote), and renders two icon buttons (up/down) from Figma.
  • On thumbs-up click: triggerSurvey( \vote:${voteID}:up )`
  • On thumbs-down click: triggerSurvey( \vote:${voteID}:down )`.
  • Keep voting repeatable/non locking after it has been voted. Do not pass a ttl to triggerSurvey (so no client timeout is added)
  • Keep local UI state for selected direction and tooltip visibility only
  • Implement post-click acknowledgement tooltip:
    • Upvote shows Thanks for the feedback!.
    • Downvote shows Thanks for the feedback! Tell us more with external link for the Google form (To be provided by Mariya).
    • Tooltip has close action and reopens on later votes.
    • Highlight currently clicked thumb according to Figma state.

• Add centralized vote ID constants in Site Goals scope (for example assets/js/modules/analytics-4/components/site-goals/constants.js).

  • Include IDs for widget-level and side-panel primary-action contexts (ecommerce + lead).
  • Keep naming deterministic and readable, e.g.: site_goals_widget_online_store, site_goals_widget_lead_generation, site_goals_primary_action_panel_online_store, site_goals_primary_action_panel_lead_generation.

• In assets/js/modules/analytics-4/datastore/conversion-reporting.js, add selector getPrimaryActionPanelLabel( goalType ) (centralized mapping for side panel Key action row).

  • Implement as createRegistrySelector, reusing existing selectors:
    • ecommerce source: select( MODULES_ANALYTICS_4 ).getPrimaryEcommerceEvent()
    • lead source: select( MODULES_ANALYTICS_4 ).getDetectedLeadEvents()
  • Mapping must be:
    • ecommerce purchase -> Purchase
    • ecommerce add_to_cart -> Products added to cart
    • lead (when any detected lead event exists) -> Form completion
  • Return undefined when source data is unresolved or no applicable primary action exists..

• Add component: assets/js/modules/analytics-4/components/site-goals/selection-panel/PrimaryActionRow.tsx.

  • PrimaryActionRow should read:
    • primaryActionLabel from getPrimaryActionPanelLabel( goalType )
    • voteID from Site Goals vote constants
  • Render structure:
    • Left: Key action label + read-only value (primaryActionLabel)
    • Right: Is this a Key action? + ThumbsSurveyTrigger
  • For goal sections:
    • ecommerce row uses goalType='ecommerce' and ecommerce panel vote id
    • lead row uses goalType='lead' and lead panel vote id
  • Render the component in Side panel header

• Integrate reusable thumbs control into: assets/js/modules/analytics-4/components/site-goals/widgets/OnlineStorePerformanceWidget.js and assets/js/modules/analytics-4/components/site-goals/widgets/LeadGenerationPerformanceWidget.js.

  • Place control in widget footer/section-helpful area matching design.
  • Wire each widget to its own voteID.

• Ensure repeat click behavior remains enabled.

  • Clicking up/down multiple times continues to dispatch triggers each time.

Test Coverage

• Add unit tests for reusable thumbs component in assets/js/components/surveys/.

  • Verifies up/down click dispatches triggerSurvey with exact vote:<vote_id>:up|down payload.
  • Verifies repeated clicks continue dispatching.
  • Verify highlight state, tooltip content by direction, close behavior, and downvote external link rendering.

• Add/extend tests for Site Goals side panel Primary Action row.

  • Verifies Key Action label mapping for ecommerce and lead contexts.
  • Verifies side-panel thumbs controls dispatch goal-type-specific panel voteID triggers.

• Add/extend tests for both Site Goals widgets.

  • Verifies widget-level thumbs controls render and dispatch correct widget-level voteID triggers.

QA Brief

Setup

• Sign in as an admin with Site Kit set up and Analytics 4 connected.
• Enable the Site Goals feature flag in the Tester plugin.
• Use the Conversion Reporting helpers in the Tester plugin to set detected events. Use purchase for ecommerce and contact for lead.
• Open the Survey Helper to watch for survey triggers as you test.

Widget feedback

• Scroll to the Online store performance widget. Verify an "Is this section helpful?" row with thumbs up/down buttons appears at the bottom.
• Click thumbs-up. Verify a survey trigger fires in the Survey Helper and a tooltip appears saying "Thanks for the feedback!"
• Click thumbs-down. Verify a trigger fires and the tooltip says "Thanks for the feedback!" followed by a "Tell us more" link.
• Repeat for the Lead generation performance widget and confirm the same behavior.

Side panel Primary Action row

• Click "Change goal drivers" on a widget to open the side panel.
• Verify the ecommerce section shows a "Key action" label with the value "Purchase" (or "Products added to cart" when add_to_cart is the primary event). Next to it, confirm thumbs buttons appear under "Is this a key action?"
• Click thumbs-up and verify a trigger fires in the Survey Helper.
• Verify the lead section shows "Form completion" as the key action when any lead event is detected.
• Click thumbs-down in the lead section and verify a trigger fires.

Tooltip and repeat behavior

• Dismiss the tooltip via the close button. Click the same thumb again and confirm the tooltip reopens.
• Click a thumb several times in a row. Confirm each click sends a new survey trigger (no lockout after voting).
• Confirm the clicked thumb shows a highlighted state and the opposite thumb returns to its default look.
• On mobile, confirm the widget tooltip appears centered above the thumbs. On tablet and desktop, confirm it appears right-aligned. In the side panel, confirm it appears below the thumbs.

Accessibility

• Tab into the thumbs group in a widget. Confirm the screen reader announces "Is this section helpful?"
• Tab into the side panel thumbs group. Confirm it announces "Is this a key action?"
• Confirm each button reads "Yes, this was helpful" or "No, this was not helpful" and toggles its pressed state after click.

Figma

• Compare spacing, colors, and tooltip placement against the Figma references linked in the AC for widget thumbs, panel acknowledgement, and Primary Action row.

Changelog entry

• Add thumbs up/down survey to Site Goals feature.