Create the "Top performing keywords" key metric widget tile

[jimmymadon]

Feature Description

• Refer to the widget tables in the design doc and the PRD explaining the sources of data and other details.
• Figma mock for all widgets

---

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

Acceptance criteria

• A new component should be created for the 'Top performing keywords' Key metric widget and should be displayed within the Key Metrics widget area if it is selected (based on Improve fetching key metrics based on user selected metrics #6257 and Register the new key metric widgets #6313).
  • The component should reflect the screenshot supplied above, see the Figma link above for more detail.
• Fetch 100 of the top search queries from from the Google Search Console API which are automatically sorted by Clicks. Then select the top 3 with the highest CTR.
  • This endpoint is already implemented in the plugin as GET:searchanalytics. The getReport selector from the modules/search-console store can be used passing QUERY as the dimension to fetch top search queries ordered by clicks.

Implementation Brief

• Wait for Create the "New visitors" key metric widget tile #6244 to be merged.

• Create assets/js/components/KeyMetrics/MetricTileTable.js which exports the MetricTileTable functional component. Similar to MetricTileNumeric, it should render the title and the 2-columns table which can be re used by other keymetrics components.. For the table: similar to the existing https://github.com/google/site-kit-wp/blob/199f1212fbfea6b52aa55ea9aa2dcf59b551fc6c/assets/js/components/ReportTable.js but with less options

  • It can accept the following table specific props in addition to the title:
    • rows: PropTypes.arrayOf( PropTypes.oneOfType( [ PropTypes.array, PropTypes.object ] ) ).isRequired, similar to the existing ReportTable component.

• Query the modules/search-console data store via the getReport selector with the metric and dimension as per the AC.

  • See the existing DashboardPopularKeywordsWidget for the correct args that need to be passed to the getReport selector.
    

    site-kit-wp/assets/js/modules/search-console/components/dashboard/DashboardPopularKeywordsWidget.js

    Lines 61 to 81 in 199f121

    	const reportArgs = {
    	...dateRangeDates,
    	dimensions: 'query',
    	limit: 10,
    	};
    	const url = useSelect( ( select ) =>
    	select( CORE_SITE ).getCurrentEntityURL()
    	);
    	if ( url ) {
    	reportArgs.url = url;
    	}
    	const data = useInViewSelect( ( select ) =>
    	select( MODULES_SEARCH_CONSOLE ).getReport( reportArgs )
    	);
    	const error = useSelect( ( select ) =>
    	select( MODULES_SEARCH_CONSOLE ).getErrorForSelector( 'getReport', [
    	reportArgs,
    	] )
    	);

  • To get the selected date range, query the core/user data store via the getDateRangeDates selector

• Create assets/js/modules/analytics-4/components/widgets/AnalyticsTopPerformingKeywordsWidget which exports the AnalyticsTopPerformingKeywordsWidget functional component.

• It should render the info as per the designs in Figma.

  • Use the assets/js/modules/analytics-4/components/common/MetricWidget.js component created in Create the "New visitors" key metric widget tile #6244 as a base.
  • Use the KeyMetricsReportTable from above.

• Create assets/js/modules/analytics-4/components/widgets/AnalyticsTopPerformingKeywordsWidget.stories.js

  • Stories should cover following cases:
    • Loading
    • Zero Data
    • Error
    • Ready (data available and non-zero)

• All styles should live in the assets/sass/components/key-metrics folder

Test Coverage

• Add unit tests for KeyMetricsReportTable and AnalyticsTopPerformingKeywordsWidget components.
• Add new stories to VRT scenarios

QA Brief

• Same as for the Create the "New visitors" key metric widget tile #6244 ticket:
  • With the userInput feature flag enabled, answer the questionnaire. For now, all widgets are displayed on the dashboard (which will change with future commits). As part of this issue, test the design and metric values of the Top performing keywords widget rendered in the Key Metrics section.
  • Test the generic Top performing keywords stories within the Key Metrics widget section in Storybook.
  • Note 1: The mobile version currently does not display Key Metric tiles in a single column. A new issue is or will be created for this.
  • Note 2: There is no design for the loading state - we need to speak to UX and finalise a design and implement loading states for all widgets.
  • Note 3: Designing the error state for widget tiles is out of the scope of this issue. A new issue is or will be created for this.

Changelog entry

• Create the "Top performing keywords" key metric widget tile.

[tofumatt]

Fetch 100 of the top search queries from from the Google Search Console API which are automatically sorted by Clicks. Then select the top 3 with the highest CTR.

Makes sense, but the ACs should be a bit more clear about the method, just for clarity's sake.

I assume we'll do this via the WP REST API/Site Kit API—do we need to add a new endpoint? If we can just use an existing one it's fine to say that, but if we need to add one we should be clear in the ACs, I think 😅

[jimmymadon]

@tofumatt I've just clarified that no new endpoint is required here, just need to use our existing selector with a different dimension passed to it. I wasn't sure whether this detail should be part of the AC or the IB, but the clarification here is definitely helpful. 🙂 Thanks!

[tofumatt]

I think here it's helpful to mention it in the ACs, thanks! 🙂

ACs look good, moving to IB 👍🏻

[tofumatt]

IB ✅

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified "Top performing keywords" key metric widget tile with Figma design.
• Verified "Top performing keywords" key metric widget tile when search console is in zero or gathering state.
• Verified Story book story for 'Popular Keywords Widget'.
• Verified loading state as per storybook.

As mentioned in QAB-
Note 1: The mobile version currently does not display Key Metric tiles in a single column. A new issue is or will be created for this.
Note 3: Designing the error state for widget tiles is out of the scope of this issue. A new issue is or will be created for this.