New Widget: Overall Page Metrics

[tofumatt]

Feature Description

Based on the existing Search Funnel Widgets (see: dashboardSearchFunnel Widget Area) create a new widget with 4 <Sparkline /> components with the following data from Analytics:

• Pageviews
• Unique Pageviews
• Bounce Rate
• Session Duration

---

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

Acceptance criteria

• Create a new Overall Page Metrics widget in assets/js/modules/analytics/components/dashboard/OverallPageMetricsWidget.
• Based on the design of the dashboardSearchFunnel Widget Area, show four Sparkline graphs with the following Analytics metrics:
  • Pageviews
  • Unique Pageviews
  • Bounce Rate
  • Session Duration
• If Analytics isn’t connected, do not show this widget at all (eg. the component should return null; or should use the whenActive HOC)
• Note that the old Search Funnel view was actually four separate widgets (

  site-kit-wp/assets/js/modules/search-console/index.js

  Lines 60 to 79 in d77d4fc

  	widgets.registerWidget(
  	'searchConsoleImpressions',
  	{
  	Component: DashboardImpressionsWidget,
  	width: widgets.WIDGET_WIDTHS.QUARTER,
  	priority: 1,
  	wrapWidget: true,
  	},
  	[ AREA_DASHBOARD_SEARCH_FUNNEL, AREA_PAGE_DASHBOARD_SEARCH_FUNNEL ]
  	);
  	widgets.registerWidget(
  	'searchConsoleClicks',
  	{
  	Component: DashboardClicksWidget,
  	width: widgets.WIDGET_WIDTHS.QUARTER,
  	priority: 2,
  	wrapWidget: true,
  	},
  	[ AREA_DASHBOARD_SEARCH_FUNNEL, AREA_PAGE_DASHBOARD_SEARCH_FUNNEL ]
  	);

  and

  site-kit-wp/assets/js/modules/analytics/index.js

  Lines 84 to 104 in d77d4fc

  	widgets.registerWidget(
  	'analyticsUniqueVisitors',
  	{
  	Component: DashboardSearchVisitorsWidget,
  	width: widgets.WIDGET_WIDTHS.QUARTER,
  	priority: 3,
  	wrapWidget: true,
  	},
  	[ AREA_DASHBOARD_SEARCH_FUNNEL, AREA_PAGE_DASHBOARD_SEARCH_FUNNEL ]
  	);
  	widgets.registerWidget(
  	'analyticsGoals',
  	{
  	Component: DashboardGoalsWidget,
  	width: widgets.WIDGET_WIDTHS.QUARTER,
  	priority: 4,
  	wrapWidget: true,
  	},
  	[ AREA_DASHBOARD_SEARCH_FUNNEL ]
  	);

  ). But since all data is from one source, these don’t need to be four separate widgets but instead can be combined into one full-width widget that uses a grid internally to responsively size itself for mobile/tablet viewports.
• The content/report should be site-wide for the Main Dashboard, and entity-specific for the Entity Dashboard.
• This new widget should be registered when the unifiedDashboard feature flag is enabled, specifically added to the mainDashboardContent and entityDashboardContent widget areas as full-width widgets. It should appear as the third widget in each of these widget areas. See order in Unified Dashboard: Register existing widgets in new Content area #4078.

Implementation Brief

• Create a new DashboardOverallPageMetricsWidget widget in analytics/components/dashboard/DashboardOverallPageMetricsWidget—it should be functionally/visually similar to the dashboardSearchFunnel Widget Area—see the ACs. Use the whenActive HOC to make sure that the widget is not rendered if the Analytics module is not active or not connected.
  • Grab isGatheringData status using the select( MODULES_ANALYTICS ).isGatheringData() selector.
  • Request a report with 4 metrics: ga:pageviews, ga:uniquePageviews, ga:avgSessionDuration, and ga:bounceRate.
    • Add the current entity URL to the report arguments if it is not empty.
  • Return the loading state if the report hasn't been resolved yet or if the gathering data equals undefined.
  • Return the zero state if the isGatheringData variable euqals true or the isZeroReport function call returns true
  • Return the expected widget view with report data otherwise. Use widgets mentioned in AC as an example how to create the requested view.
• Register the new widget with the following parameters, when the unifiedDashboard feature flag is enabled:
  • slug should be analyticsOverallPageMetrics
  • width should be FULL
  • priority should be 3
  • widgetAreas array should contain AREA_MAIN_DASHBOARD_TRAFFIC_PRIMARY and AREA_ENTITY_DASHBOARD_TRAFFIC_PRIMARY area slugs
• Add the new widget to the storybook.

Test Coverage

• NA

QA Brief

Note: Please read this comment which clarifies a couple of points about the AC.

For reference here's a screen grab of the new widget:

• Install the Tester Plugin and ensure the Unified Dashboard feature is enabled:
  
• Navigate to the Dashboard, the new Overall Page Metrics widget should be displayed as per the AC.
• Navigate to an Entity Dashboard and verify the Overall Page Metrics widget is displayed as per the AC.

Changelog entry

• Add the new Overall Page Metrics widget to unified dashboards.

[felixarntz]

@tofumatt The ACs here are somehow a duplicate off #4123 - that one is actually about the search funnel. Sticking to the (correct) issue description here, this issue is not about the search funnel, it is about "overall page metrics", which are all Analytics metrics. The only thing this has to do with the search funnel is that it should visually look like today's search funnel widget, but semantically it is unrelated.

Can you rewrite the ACs here to focus on the "overall page metrics" widget? Also the title should probably be changed as it has nothing really to do with a search funnel. The widget JS file here can live in the Analytics module, since it only pulls stats from Analytics.

Last but not least: Let's add one more bullet point to the ACs that this widget should also be registered on the entity dashboard, which is technically a follow-up to #4078, since the widget at that point doesn't exist yet.

[tofumatt]

@felixarntz Sounds good—as mentioned I think the mix-up between the Design Doc/PRD and the Figma designs sometimes meant I got these shuffled around in my head—though here I thought I updated this, and maybe I just didn't hit "submit" on my changes or something 😓

At any rate, I've updated the ACs to include the right info for this widget, and include registering it once created. If these ACs look good feel free to move it over to IB 👍🏻

[felixarntz]

@tofumatt No worries, looks good now! Only a few comments where I think it could be clarified:

Create a new Overall Page Metrics widget in assets/js/ANALYTICS.

Is that a placeholder? Maybe we should specify something like assets/js/modules/analytics/components/dashboard/OverallPageMetricsWidget.

If Analytics isn’t connected, show a "connect Analytics CTA"

That's not something we've defined before on how it should be, but I think we should rephrase this to not show the entire widget at all if Analytics is not active/connected, for two reasons:

• It's no longer only partially Analytics like in the Search Funnel, now the entire 4 metrics require Analytics anyway.
• We already would display a CTA to activate Analytics when this widget is shown in another widget above, so hiding this widget here instead results in a less cluttered UI.

Let me know if that sounds good to you, and if so could you update the ACs? Other than that lgtm!

[tofumatt]

Ah, shoot, that was indeed a placeholder or a typo! Fixed the file issue.

Regarding not showing the widget at all: that seems fine to me. I thought the CTA might be useful but true: it's not in the original doc and your reasoning here makes sense. I've amended the ACs so I think this is good; moving to IB 👍🏻

[eugene-manuilov]

@felixarntz @tofumatt AC says that this widget should display the Bounce Rate metric. Do we need to display it on the main dashboard as well or only on the entity dashboard page? I am asking because currently, we display it only on the entity page and don't on the dashboard page.

[felixarntz]

@eugene-manuilov Yes, the Bounce Rate should be included here regardless. The only reason it's only displayed on the entity dashboard today is because as part of the Search Funnel, it's only a "fallback" to goals, which are not really applicable at the per-page level. That's not really important for the widget here though, as bounce rate is also a relevant metric at the site level.

[tofumatt]

IB ✅

[techanvil]

@eugene-manuilov @tofumatt the IB suggests creating analytics/components/dashboard/OverallPageMetricsWidget, but the other widgets under dashboard/ are prefixed with Dashboard - see https://github.com/google/site-kit-wp/tree/develop/assets/js/modules/analytics/components/dashboard

Should I update the IB to create the widget in analytics/components/dashboard/DashboardOverallPageMetricsWidget ?

Also - is this degree of deviation from the IB enough to merit the question? :)

[techanvil]

@eugene-manuilov @tofumatt also, I have a feeling that ga:pageValue in the IB should be ga:pageviews, please can you confirm if that is the case?

[techanvil]

@felixarntz @tofumatt @eugene-manuilov

Another question - should the new Overall Page Metrics widget include title/subtitle text, similar to the Search Console design, and if so, what should the copy be? Thanks!

Update: Looking into this a bit further, would this be the right approach - following the same title style as the "Top content" widget?

[techanvil]

@felixarntz @tofumatt @eugene-manuilov hi, folks - can someone also please clarfify what the report type/URL(s) & any necessary args should be for the links?

I've currently got it pencilled in as a visitors-overview report with optional _r.drilldown: 'analytics.pagePath:<entity url>' for each source link...

[felixarntz]

@techanvil Great questions, I guess this was a bit too loosely specified:

Another question - should the new Overall Page Metrics widget include title/subtitle text, similar to the Search Console design, and if so, what should the copy be? Thanks!

Let's not add an overall heading for the new widget, each column having its own "heading" (Pageviews, Unique Pageviews, etc.) is sufficient.

hi, folks - can someone also please clarfify what the report type/URL(s) & any necessary args should be for the links?

We can keep using the current visitors-overview report, and it should continue to add the drilldown argument in case of an existing "entity URL", similar to today. That said, now that the 4 metrics all come from one service (Analytics), let's remove the 4 source links and only display it once instead, at the bottom of the widget. You can do that by using the Footer prop on the Widget component, the same way how e.g. the DashboardPopularPagesWidget component does it today. Let me know if that makes sense to you.

Also, good catch putting "Bounce Rate" before "Session Duration" (based on your screenshot)! This differs from the order in the ACs, but it makes sense to align this with the order in #4124 (comment).

[techanvil]

Hi @cole10up, you might have already spotted this, but I have noticed that I have missed out the unit character(s) for Bounce Rate and Session Duration when implementing the Overall Page Metrics widget, as is apparent when comparing it to a similar widget.

Overall Page Metrics widget:

Vs Analytics Overview widget:

[techanvil]

@cole10up re. the above, I have created a separate ticket for the unit characters fix: #4312

[cole10up]

QA ❌

Thanks for logging the character fix @techanvil

I was able to confirm statistics on the new widget:

Verified the Analytics link.

I noticed with the unified dashboard feature flag on - the analytics and search console pages are showing blank:

Flipping the feature flag off shows these pages with proper content.

Sending back to @techanvil to check.

[aaemnnosttv]

I noticed with the unified dashboard feature flag on - the analytics and search console pages are showing blank:

@cole10up this is expected as these pages are going away with the unified dashboard. See #4134

Sending back to @wpdarren in case there's anything left to review here 👍

[wpdarren]

I will give this a run through as a sanity check and then approve. 😄

[wpdarren]

QA Update: ✅

I've sent this to approved. Cole previously confirmed that the only issue was blank module pages.

@felixarntz @tofumatt one small observation: I did notice in the AC, widgets were ordered: Session Duration
then Bounce Rate, but the widgets are displayed the other way around on the screenshots above. Reading through the comments it looks like a change was made but AC not updated.

[felixarntz]

@wpdarren You're right - I've now updated this in the ACs as well, for any future reference.