Add tracking for backup storage info bar chart #23461

manzoorwanijk · 2022-03-16T08:55:01Z

Changes proposed in this Pull Request:

This PR adds tracking for the new bar chart added in Add Backup Storage info to At a Glance page #23374

Jetpack product discussion

HACK WEEK project p6TEKc-61M-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Boot up the branch and run a JT site and connect Jetpack with Free plan
Goto At a Glance page.
Ensure that you have more than 20 posts published on the site OR you can also manually change (via React Dev tools) the posts prop to more than 20 in BackupUpdare component added in Add Backup Storage info to At a Glance page #23374
After the BarChart is visible, confirm that you see in Network tab new tracking request with event name jetpack_wpa_aag_backup_bar_chart_view
Close the popup that blocks the bar chart
Confirm that you see in Network tab new tracking request with event name being jetpack_wpa_click, target and type being backup_bar_chart_close and dismiss respectively.

github-actions · 2022-03-16T08:56:20Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
⚠️ All commits were linted before commit.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

Next scheduled release: April 5, 2022.
Scheduled code freeze: March 29, 2022.

elliottprogrammer

Tested, and the tracking events are firing correctly. The code LGTM, just a minor comment below to make sure we're naming the tracking properties properly.
Otherwise, everything LGTM! 👍

elliottprogrammer · 2022-03-16T21:33:47Z

projects/plugins/jetpack/_inc/client/at-a-glance/backup-upgrade/index.jsx

+		const clickEventProps = {
+			comments,
+			plugins,
+			posts,
+			target: 'backup_bar_chart_close',
+			type: 'dismiss',
+		};


I'm not exactly sure about the naming properties of recordJetpackClick(), ie- { target, feature, type } and what they should represent exactly, maybe someone from Crew can verify if your target and type properties are following convention properly.

CC @Automattic/jetpack-crew

Crew can verify if your target and type properties are following convention properly.

This looks good to me. 👍

[not verified] Create BackupUpgrade component [not verified] Wire everything up [not verified] Create add-at-a-glance-backup-storage-info [not verified] i18n for labels

jeherve

This looks good, but seems to be triggered too often in my tests:

https://videopress.com/v/sMyXVKu3

jeherve · 2022-03-18T10:06:30Z

projects/plugins/jetpack/_inc/client/at-a-glance/backup-upgrade/index.jsx

+		const clickEventProps = {
+			comments,
+			plugins,
+			posts,
+			target: 'backup_bar_chart_close',
+			type: 'dismiss',
+		};


Crew can verify if your target and type properties are following convention properly.

This looks good to me. 👍

… requests

manzoorwanijk · 2022-03-18T11:55:49Z

This looks good, but seems to be triggered too often in my tests:

I have added a fix.

It is happening because of <QueryStatsData /> rendered in <DashStats /> in "At a Glance" page. When you switch back to the tab, the query for stats data runs again, which triggers re-render.

jeherve

This tests well for me, should be good to merge!

Upon looking at that banner again, I would have 3 suggestions for improvements, in future PRs:

Use numberFormat to format the numbers displayed in the banner.
When dismissing the banner, dismiss the whole banner, including JetpackBanner
Remember the dismissal so the banner doesn't come back if I navigate away from that view and come back to it a minute later.

manzoorwanijk · 2022-03-21T14:15:50Z

I would have 3 suggestions for improvements, in future PRs:

Thank you. Will try to implement those suggestion in an upcoming PRs.

manzoorwanijk added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Status] Needs Tracks Review Added/removed/modified a tracks event. labels Mar 16, 2022

manzoorwanijk requested a review from a team March 16, 2022 08:55

manzoorwanijk self-assigned this Mar 16, 2022

github-actions bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Admin Page React-powered dashboard under the Jetpack menu labels Mar 16, 2022

github-actions bot added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Mar 16, 2022

manzoorwanijk changed the title ~~Add tracking backup storage info bar chart~~ Add tracking for backup storage info bar chart Mar 16, 2022

manzoorwanijk removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Mar 16, 2022

manzoorwanijk force-pushed the add/at-a-glance/backup-storage-tracking branch from ed655cc to 33e3586 Compare March 16, 2022 09:11

elliottprogrammer previously approved these changes Mar 16, 2022

View reviewed changes

manzoorwanijk force-pushed the add/at-a-glance/backup-storage-info branch from ea195c3 to de89dc2 Compare March 17, 2022 05:35

manzoorwanijk force-pushed the add/at-a-glance/backup-storage-tracking branch from 33e3586 to 363fa0a Compare March 17, 2022 05:40

Base automatically changed from add/at-a-glance/backup-storage-info to master March 17, 2022 15:39

manzoorwanijk dismissed elliottprogrammer’s stale review via 363fa0a March 17, 2022 15:39

manzoorwanijk added 12 commits March 17, 2022 21:12

[not verified] Create custom RecordMeterBar component

52036df

[not verified] Create BackupUpgrade component [not verified] Wire everything up [not verified] Create add-at-a-glance-backup-storage-info [not verified] i18n for labels

[not verified] Use the new record meter bar component in backup upgrade

ed748b8

[not verified] Get rid of chart.js dependency

e768686

[not verified] Oops! Remove the unused import

082f94a

[not verified] Fix language and remove unnecessary empty string node

2b3b45c

[not verified] Use constant for number of posts

fdda1ab

[not verified] EOL for CSS files

b942295

[not verified] Extract BarChart to its own component

4ee0064

[not verified] Add docs to Popup

76d7c92

[not verified] Update popup.jsx

387a371

[not verified] Organize imports

5fd1d44

[not verified] Use CSS var for border color

2414236

manzoorwanijk added 3 commits March 17, 2022 21:13

[not verified] Add tracking for the new bar chart component

9e429dd

[not verified] Fix imports

53d0139

[not verified] Create add-at-a-glance-backup-storage-bar-chart-tracking

e0a571f

manzoorwanijk force-pushed the add/at-a-glance/backup-storage-tracking branch from 363fa0a to e0a571f Compare March 17, 2022 15:43

manzoorwanijk requested a review from a team March 17, 2022 15:45

jeherve added the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Mar 17, 2022

manzoorwanijk enabled auto-merge (squash) March 18, 2022 05:26

jeherve reviewed Mar 18, 2022

View reviewed changes

Fix unnecessary re-renders for BackupUpgrade caused by stats data API…

266d8de

… requests

manzoorwanijk added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Mar 18, 2022

manzoorwanijk requested a review from jeherve March 21, 2022 09:16

Apply a better fix for multiple tracking requests for bar chart view

62fd868

jeherve approved these changes Mar 21, 2022

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Mar 21, 2022

jeherve added this to the jetpack/10.8 milestone Mar 21, 2022

manzoorwanijk merged commit 19d650b into master Mar 21, 2022

manzoorwanijk deleted the add/at-a-glance/backup-storage-tracking branch March 21, 2022 14:14

github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tracking for backup storage info bar chart #23461

Add tracking for backup storage info bar chart #23461

manzoorwanijk commented Mar 16, 2022

github-actions bot commented Mar 16, 2022 •

edited

elliottprogrammer left a comment

elliottprogrammer Mar 16, 2022

manzoorwanijk Mar 17, 2022

jeherve Mar 18, 2022

jeherve left a comment

jeherve Mar 18, 2022

manzoorwanijk commented Mar 18, 2022

jeherve left a comment

manzoorwanijk commented Mar 21, 2022

Add tracking for backup storage info bar chart #23461

Add tracking for backup storage info bar chart #23461

Conversation

manzoorwanijk commented Mar 16, 2022

Changes proposed in this Pull Request:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Mar 16, 2022 • edited

elliottprogrammer left a comment

Choose a reason for hiding this comment

elliottprogrammer Mar 16, 2022

Choose a reason for hiding this comment

manzoorwanijk Mar 17, 2022

Choose a reason for hiding this comment

jeherve Mar 18, 2022

Choose a reason for hiding this comment

jeherve left a comment

Choose a reason for hiding this comment

jeherve Mar 18, 2022

Choose a reason for hiding this comment

manzoorwanijk commented Mar 18, 2022

jeherve left a comment

Choose a reason for hiding this comment

manzoorwanijk commented Mar 21, 2022

github-actions bot commented Mar 16, 2022 •

edited