Improve zero data message for "Top recent trending pages" key metric tile

[nfmohit]

Feature Description

The "Top recent trending pages" key metric tile displays report data for traffic that is targeted to posts that were published in the past 3 days. For sites that have traffic, but there aren't any posts created in the past 3 days, or they haven't got much traffic yet, the zero data state message is misleading. See:

In cases where the site has traffic in general but there isn't any data to show in the "Top recent trending pages", the zero data state message should be improved to reflect the correct scenario.

---

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

Acceptance criteria

• The zero data state message for the "Top recent trending pages" key metric tile should be updated to say the following when the site has Analytics data in general, i.e. it is not in a zero data state, but there is not enough data to display for posts published in the past three days:
  • "No data to display: either no pages were published in the last three days, or they haven't received any visitors yet"

Implementation Brief

• [ ] Update assets/js/modules/analytics-4/components/widgets/TopRecentTrendingPagesWidget.js:
  • [ ] Import the the WordPress translation function __: import { __ } from '@wordpress/i18n';
  • [ ] Create a new inline component function called CustomZeroDataMessage which returns the new language string using the __ function:

    const CustomZeroDataMessage = () => {
    return __(
        "No data to display: either no pages were published in the last three days, or they haven't received any visitors yet",
        'google-site-kit'
    );
    };

  • [ ] Get the isGatheringData value for the MODULES_ANALYTICS_4 using the isGatheringData selector.
  • [ ] Conditionally pass the ZeroState prop on the MetricTileTable:

        ZeroState={
            ! isGatheringData && rows.length === 0
                ? CustomZeroDataMessage
                : ZeroDataMessage
        }

Test Coverage

• Add a new VRT for this specific KM widget state.
• Update any broken VRTs

QA Brief

• To QA this change, you'll need a site with traffic, but that hasn't had any posts published in the past three days. Using this site, sign in to the Site Kit Dashboard and view the "Top Recent Trending Pages" key metric tile.
• The message displayed should be "No data to display: either no pages were published in the last three days, or they haven't received any visitors yet"

Changelog entry

• Improve the "Top recent trending pages" empty state when no posts have been recently published.

[nfmohit]

Hi @marrrmarr.

In the ACs, I have added a placeholder updated text for this state, and have assigned it to you if you would like to help with an improved version.

Thank you!

[nfmohit]

Update: Mariya kindly updated the copy, moving this to ACR.

[eugene-manuilov]

AC ✔️

[benbowler]

Added an IB, I considered adding a prop and extending the ZeroDataMessage message, however this component is super simple, returning text only based on a few conditions. It was simpler to replace it's use in this component only, if in future we need to customise more of these messages we can consider updating the ZeroDataMessage adding a customMessage prop.

[eugene-manuilov]

@benbowler, the idea for this task is not to replace the existing zero data state message, but to add a new one that will be shown if Analytics has data in general but there is not enough data to display in that widget in particular. For the standard case, when Analytics has no data at all, we should continue showing the standard zero data message.

[benbowler]

Hey @eugene-manuilov, updated to fully address the AC.

[eugene-manuilov]

Thanks, @benbowler. IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified The zero data state message for the "Top recent trending pages" key metric tile updated to say the following when the site has Analytics data in general, i.e. it is not in a zero data state, but there is not enough data to display for posts published in the past three days:

"No data to display: either no pages were published in the last three days, or they haven't received any visitors yet"

**zero data state**  **gathering state** : 

[aaemnnosttv]

The change looks good but it also looks like this message requires the height of the widgets to become taller than they would be otherwise. If so, then this would create a layout shift in response to the report that comes back which would not be good. Would you please check @mohitwp ? I don't think this need to block the issue but could inform a follow-up.

[mohitwp]

QA Update ✅

@aaemnnosttv

I verified padding of tiles on both latest and main environment. On both environment tiles padding and sizes are same. So, heights of tiles are same on both latest and main. cc @wpdarren

**Latest :**   **Main :**  

[aaemnnosttv]

Great, thanks @mohitwp !