WP dashboard widget show daily uniques

[gmmedia]

Feature Description

The dashboard widget shows only the Total Unique Visitors for the whole month and also the Total Impressions. I think for the most users is a graph with the Daily Uniques much more helpful.

Something like this on the top of the widget.

---

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

Acceptance criteria

• If Analytics is active, Site Kit's WordPress dashboard widget should be enhanced to show unique visitors as follows:
  • A similar chart as is currently present in the "Search traffic over the last 28 days" widget in the Site Kit dashboard (labelled "Unique Visitors from Search" there) should be added (as a much smaller version of course) to the WP dashboard widget.
    • It should show both the current and previous period values in the same way.
    • However it should not limit the results to visitors from Search - in other words, the data you see should rather match the data that is shown in the "All Traffic" Site Kit dashboard widget by default (we want total unique visitors, not just those from Search, for the chart here).
    • The chart should only have x-axis labels as realistically feasible given the limited space (it would probably work best to only show the first and last date there).
    • As usual, if there is no data, the chart should show without data, or if Analytics is gathering data, it should have the "Gathering data" overlay.
  • It should be placed below the 2-4 main "big" numbers in the WP dashboard widget, and above the "Top content over the last 28 days" (when that is present).
  • Above the chart, there should be a label "Unique visitors over the last 28 days" with similar appearance as the existing "Top content over the last 28 days" label.
  • The loading state for the WP dashboard widget should be adjusted accordingly, with a new preview block of matching height to the new chart being added in that place.

Before merging a PR for this, please request an additional merge review from @felixarntz and @marrrmarrr.

Implementation Brief

• Create assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsWidget.js which exports the WPDashboardUniqueVisitorsWidget functional component.
  • It should render null if the Analytics module is not active or not connected.
    • To check the status of the module, query the core/modules data store via the getModule selector, passing analytics as parameter, and then accessing the active and connected properties.
  • Check if the Analytics module is still gathering data via the isGatheringData selector of the modules/analytics data store.
  • Query the modules/analytics data store via the getReport selector to get the data for the chart with the following parameters:

    tartDate,
    ndDate,
    ompareStartDate,
    ompareEndDate,
    etrics: [
    {
    	expression: 'ga:users',
    	alias: 'Total Users',
    },
    ,
    imensions: [ 'ga:date' ],
    

  • To get the startDate, endDate, compareStartDate and compareEndDate values, query the user data store via the getDateRangeDates selector, with compare: true and offsetDays: DATE_RANGE_OFFSET_ANALYTICS. Refer to assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/index.js as an example.
  • Render the label as per the AC wrapped within h3 tag.
  • Make use of/adapt the extractAnalyticsDashboardData utility function to format the data to be fed to GoogleChart.
  • Use assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/AnalyticsStats.js as reference to set the chart properties (AnalyticsStats.chartOptions) for WPDashboardUniqueVisitorsWidget.
  • Using the GoogleChart component to render the chart,
    • Pass on the isGatheringData prop with the value set to the result of the isGatheringData selector previously mentioned.
    • Pass the loaded prop to know the loading animation while the report is being fetched.
      • To get the "loading" state, query the core/modules data store via the hasFinishedResolution selector.
    • Adjust the loadingHeight and loadingWidth prop to match the dimensions of the chart when loaded.
• Update assets/js/components/wp-dashboard/WPDashboardWidgets.js to include WPDashboardUniqueVisitorsWidget positioned as per the AC.
• Given the limited available space, tweak the chart settings so that there is maximum use of space, for e.g show the first and last date on the x-axis.
• Add stories in assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsWidget.stories.js where the loaded, loading, zero data and gathering data states are illustrated.

Test Coverage

• No new tests to be added.

QA Brief

Changelog entry

[TheSmartDude]

It would be very helpfull if the stats for visitors, clicks and impressions are displayed on a daily base and shown in a graph ... like the stats in Jetpack. :) Or i could switch between the numbers of today and yesterday.

[IvanRF]

I think the Analytics graph shown at /wp-admin/admin.php?page=googlesitekit-module-analytics as Audience overview for the last X days could be reused in the dashboard widget.

In addition, that section already has a responsive layout, so it will look good too in the small dashboard widget space.

@aaemnnosttv @felixarntz what do you think about this?

The graph could be added to the widget by default or it could be an option on the plugin settings so that users can select what to see on the dashboard widget.

Adding this graph will help users that are migrating from the plugin "Google Analytics Dashboard for WP" to "Site Kit by Google" since we got used to check this graph after login to WordPress 😃 .

[gmmedia]

Do you consider an enhancement like this?

[marrrmarrr]

Hi @gmmedia and thanks for the suggestion! We're actually working on customising the dashboard to match specific users' needs, so that's really helpful feedback to hear in the product definition process. Could you share a bit more about which are the most important metrics for you in relations to site(s) you're managing? E.g. when you log in, you'll check metrics A, B, C (and presumably daily unique users is one of them?). Does what you check differ from site to site? (E.g. we've seen a lot of sites where there's not sufficient dynamic in stats to show changes from day to day, more from week to week). Is it only the number of unique users that you're interested in seeing on a daily basis? Do you care also about your site's top pages / top queries / traffic distribution on a daily basis? Is the diff from today to yesterday more useful for you, or you prefer to do comparisons yourself?

[gmmedia]

The most important thing is the daily unique users for the last 30 days. With that data I can quickly react to certain circumstances. I am happy with just that in the WP dashboard.

Other important metrics: sessions by source sessions by organic keyword completed goals top pages

This is how my external dashboard looks:

[myedgy]

Feature Description

The dashboard widget shows only the Total Unique Visitors for the whole month and also the Total Impressions. I think for the most users is a graph with the Daily Uniques much more helpful.

Something like this on the top of the widget.

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

Acceptance criteria

Implementation Brief

Changelog entry

Any updates?

[marrrmarrr]

@felixarntz can you confirm whether if we add the chart from the Analytics detailed report here, we would lose the interactivity? It's possible in the detailed report to switch the trendline by clicking on one of the four metrics on top, here it wouldn't be possible.

[felixarntz]

@marrrmarrr That is for us to decide, but I think having the full thing with the four different metrics in the WP dashboard widget would be overkill, particularly as our space is limited. The original issue request here is to only have unique visitors, so I think we would be good to only have that one metric in a chart.

[felixarntz]

Per discussion with @marrrmarrr, we're going to display the Total Users line chart (including previous period), above the top pages and below the initial numbers in the WP dashboard widget. The graph should have a heading "Unique visitors over the last 28 days".

[techanvil]

IB :white_check_mark:

[mohitwp]

QA Update ❌

@sashadoes

Issue -

• As per AC the label should be "Unique visitors over the last 28 days" but currently label is "Unique Visitors from Search".

-Verified on dev. -Verified on WP dashboard Unique Visitors from Search widget is implemented successfully.

• Verified for zero data states - zero and gathering.
• Verified the data matching the data that is shown in the "All Traffic" Site Kit dashboard widget by default.
• Verified the chart have only have x-axis labels.

[felixarntz]

@techanvil @sashadoes Reviewing the widget here: Can we please change the color of the previous period chart line to be aligned with the color we use elsewhere for that?

• See https://google.github.io/site-kit-wp/storybook/develop/?path=/story/views-wpdashboardapp-wpdashboarduniquevisitorschartwidget--ready, it is red here but that does not align with our convention.
• Here is an example what it looks like in existing areas and we should probably stick with that: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-searchconsole-widgets-searchfunnelwidget--ready

cc @marrrmarrr

[techanvil]

Thanks @felixarntz, good spot!

[marrrmarrr]

This LGTM with the correction that @felixarntz already mentioned. Also related to the comment from @mohitwp -- can we confirm that not only the title of the widget is changed, but the actual API query we make corresponds to the title? I.e. we are showing the stats for total unique visitors, and not for unique visitors from Search?

[techanvil]

Thanks @marrrmarrr, I can confirm this does show the stats for total unique visitors across the board, rather than those from search. This is evident in the report args used for this component:

https://github.com/google/site-kit-wp/blob/6ae8f3e9c3dd0fc231723442790ed906f89e0dc9/assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsChartWidget.js#L62-L74

Vs those used for the Unique Visitors from Search datapoint which includes the dimension filter for "Organic Search":

https://github.com/google/site-kit-wp/blob/6ae8f3e9c3dd0fc231723442790ed906f89e0dc9/assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/index.js#L174-L184

[techanvil]

Further on the above, @mohitwp, it would be useful to verify @marrrmarrr's point about the chart showing total unique visitors rather than unique visitors from search from a QA perspective too, if possible?

[mohitwp]

QA Update ❌

• Verified on dev.
• Verified title of the widget changed to "Unique visitors over the last 28 days".
• Verified for zero data states - zero and gathering.
• Verified the data matching the data that is shown in the "All Traffic" Site Kit dashboard widget by default.
• Verified the chart have only have x-axis labels.
• Verified that color of the previous period chart line changed as suggested here

Note : I've found that while checking widget through dev tool when I'm resizing window, then widget size is not changing. Although, it looks perfect when we reload the page. So, I will add a separate ticket for this as an enhancement.