View Switcher: Add Tracking and update tab label #61046

obenland · 2022-02-11T20:56:24Z

Also updates the tab label to differ from screen options in wp-admin, so the same UI can be re-used there.

Changes proposed in this Pull Request

Bumps stats for when the View tab is opened
Bumps stat for when a view is selected.

Testing instructions

Navigate to the posts screen for a test site.
Open dev tools and select the navigation tab.
Click the View tab in the top right of the screen and select a preferred view
Verify that g.gif requests are sent for those clicks.

Before	After

There will be a corresponding Jetpack PR that will change the wp-admin version to look the same.

github-actions · 2022-02-11T20:56:38Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-28647

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-28647&env=jetpack

obenland · 2022-02-11T20:57:19Z

@ianstewart @olaolusoga I just used bumpStat for now to add counts to an MC stat. Let me know if we need something more sophisticated than that.

a8ci18n · 2022-02-11T21:01:03Z

client/components/screen-options-tab/index.js

@@ -94,7 +97,9 @@ const ScreenOptionsTab = ( { wpAdminPath } ) => {
 	return (
 		<div className="screen-options-tab" ref={ ref } data-testid="screen-options-tab">
 			<button className="screen-options-tab__button" onClick={ handleToggle }>
-				<span className="screen-options-tab__label">{ __( 'Screen Options' ) }</span>
+				<span className="screen-options-tab__label">
+					{ _x( 'View', 'View options to switch between' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 42 times:
translate( 'View', { context: 'Stats: List item action to view content'} ) ES Score: 10
See 1 additional suggestions in the PR translation status page

ℹ️ This context is really long. Are you sure you don't want to use a translator comment instead?

matticbot · 2022-02-11T21:01:39Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~4159 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
settings-discussion      +2213 B  (+0.6%)     +556 B  (+0.5%)
people                   +2213 B  (+0.4%)     +691 B  (+0.4%)
pages                    +2213 B  (+0.5%)     +675 B  (+0.5%)
import                   +2213 B  (+0.6%)     +687 B  (+0.6%)
export                   +2213 B  (+0.8%)     +663 B  (+0.7%)
comments                 +2213 B  (+0.3%)     +660 B  (+0.3%)
themes                    +262 B  (+0.0%)      +93 B  (+0.1%)
settings-writing          +262 B  (+0.0%)      +90 B  (+0.0%)
settings                  +262 B  (+0.0%)     +134 B  (+0.1%)
posts-custom              +262 B  (+0.0%)     +171 B  (+0.1%)
posts                     +262 B  (+0.0%)     +171 B  (+0.1%)
media                     +262 B  (+0.0%)     +106 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~55 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks        -83 B  (-0.0%)      +55 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

obenland · 2022-02-11T23:28:22Z

I just saw that there is tracks tracking on the wp-admin side, so this will have to be updated with that.

mmtr · 2022-02-28T10:28:25Z

client/components/screen-options-tab/index.js

@@ -86,6 +89,13 @@ const ScreenOptionsTab = ( { wpAdminPath } ) => {
 	}

 	const onSwitchView = ( view ) => {
+		recordTracksEvent( 'wpcom_dashboard_quick_switch_link_clicked', {


The event is not being tracked right now, I think because this is lacking a dispatch call:

dispatch( recordTracksEvent( 'wpcom_dashboard_quick_switch_link_clicked', { /* ... */ } ) );

mmtr · 2022-02-28T10:30:28Z

Verify that g.gif requests are sent for those clicks.

You can also use the "Vigilante" Chrome extension to debug these events: p7H4VZ-3cB-p2

Also updates the tab label to differ from screen options in wp-admin, so the same UI can be re-used there.

@mmtr

Props @mmtr

Copons

LGTM!

Just FYI I couldn't see the g.gif file showing up in my Network tab, but the event seems to be fired correctly when debugging it in console with localStorage.setItem( 'debug', 'calypso:analytics*' );

a8ci18n · 2022-03-04T21:16:38Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7166970

Thank you @obenland for including a screenshot in the description! This is really helpful for our translators.

inaikem · 2022-03-07T02:00:32Z

@Automattic/ajax / @ianstewart. This one caught us on the back step! To help make sure we give Happiness, Docs and other teams enough time to prepare for changes like these (even tiny UI/label updates that might seem inconsequential), please be sure to ping me or someone else in the WPcom PA group in future. Thanks! 🙏

obenland · 2022-03-07T15:53:03Z

@inaikem My apologies, that's on me. Thanks for the reminder, you're absolutely right.

a8ci18n · 2022-03-10T12:29:09Z

Translation for this Pull Request has now been finished.

obenland added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Type] Task [Feature] Calypso & wp-admin Navigation All navigation in Calypso and wp-admin, and the unified transitions between the two. labels Feb 11, 2022

obenland requested a review from a team February 11, 2022 20:56

obenland self-assigned this Feb 11, 2022

a8ci18n reviewed Feb 11, 2022

View reviewed changes

obenland added [Status] In Progress and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 11, 2022

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 11, 2022

mmtr removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 14, 2022

obenland mentioned this pull request Feb 25, 2022

Masterbar: Make Desktop Switcher look the same between Calypso and wp-admin Automattic/jetpack#22826

Merged

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 25, 2022

mmtr removed the [Status] In Progress label Feb 28, 2022

mmtr reviewed Feb 28, 2022

View reviewed changes

obenland added 3 commits March 4, 2022 09:11

View Switcher: Add Tracking

6fdd2ed

Also updates the tab label to differ from screen options in wp-admin, so the same UI can be re-used there.

Switch to using existing event name and tracking library

edbed75

Dispatch event for fame and glory

184fb0a

Props @mmtr

obenland force-pushed the add/view-switch-tracking branch from 3f2a54d to 184fb0a Compare March 4, 2022 17:11

Use calypso_ namespace to not get blocked

b2617e7

Copons approved these changes Mar 4, 2022

View reviewed changes

obenland merged commit 051e36a into trunk Mar 4, 2022

obenland deleted the add/view-switch-tracking branch March 4, 2022 19:26

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

View Switcher: Add Tracking and update tab label #61046

View Switcher: Add Tracking and update tab label #61046

obenland commented Feb 11, 2022

github-actions bot commented Feb 11, 2022 •

edited by matticbot

obenland commented Feb 11, 2022

a8ci18n Feb 11, 2022

matticbot commented Feb 11, 2022 •

edited

obenland commented Feb 11, 2022

mmtr Feb 28, 2022 •

edited

mmtr commented Feb 28, 2022

Copons left a comment

a8ci18n commented Mar 4, 2022

inaikem commented Mar 7, 2022

obenland commented Mar 7, 2022

a8ci18n commented Mar 10, 2022

View Switcher: Add Tracking and update tab label #61046

View Switcher: Add Tracking and update tab label #61046

Conversation

obenland commented Feb 11, 2022

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Feb 11, 2022 • edited by matticbot

obenland commented Feb 11, 2022

a8ci18n Feb 11, 2022

Choose a reason for hiding this comment

matticbot commented Feb 11, 2022 • edited

obenland commented Feb 11, 2022

mmtr Feb 28, 2022 • edited

Choose a reason for hiding this comment

mmtr commented Feb 28, 2022

Copons left a comment

Choose a reason for hiding this comment

a8ci18n commented Mar 4, 2022

inaikem commented Mar 7, 2022

obenland commented Mar 7, 2022

a8ci18n commented Mar 10, 2022

github-actions bot commented Feb 11, 2022 •

edited by matticbot

matticbot commented Feb 11, 2022 •

edited

mmtr Feb 28, 2022 •

edited