Implment the GA promo banner in /stats #77037

southp · 2023-05-17T16:50:01Z

Fixes to Automattic/martech#1718

Proposed Changes

This PR implements the requested changes in the linked issue above regarding the banner carousell in /stats:

Show the GA promo banner for sites on the Free plan and the Personal plan.
Automatically rotate the banner by the given period. Currently I've anecdotally set it as 5 secs.

The automatical rotation mechanism is lifted into the underlying <DotPager> component, since it's a general functionality that the rest of the codebase can be benefited from as well.

Screencast:

2023-06-05.2.12.34.mov

Testing Instructions

Logging into a Free site, visit /stats and confirm that the GA promo banner exists.
Logging into a Personal site, visit /stats and confirm that the GA promo banner exists.
Dismissing the GA promo banner by clickgin "hide this" should make the banner disappear even after refreshing.
Confirm that the carousell rotates automatically. After manually navigating back-and-forth the banners, it should still advance automatically.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

github-actions · 2023-05-17T16:50:14Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-05-17T16:59:21Z

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

App Entrypoints (~37 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +129 B  (+0.0%)      +37 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1137 bytes added 📈 [gzipped])

name       parsed_size           gzip_size
stats          +2930 B  (+0.4%)     +912 B  (+0.4%)
reader          +129 B  (+0.0%)      +48 B  (+0.0%)
home            +129 B  (+0.0%)      +44 B  (+0.0%)
domains         +129 B  (+0.0%)      +59 B  (+0.0%)
backup          +129 B  (+0.0%)      +58 B  (+0.0%)
marketing       +124 B  (+0.0%)      +16 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 (~925 bytes removed 📉 [gzipped])

name                                                 parsed_size           gzip_size
async-load-calypso-my-sites-stats-summary                -1748 B  (-3.4%)     -527 B  (-3.6%)
async-load-calypso-my-sites-stats-stats-subscribers      -1748 B  (-1.8%)     -498 B  (-1.3%)
async-load-calypso-my-sites-stats-stats-insights         -1748 B  (-2.0%)     -498 B  (-1.9%)
async-load-design-blocks                                  +129 B  (+0.0%)      +48 B  (+0.0%)
async-load-design                                         +129 B  (+0.0%)      +52 B  (+0.0%)
async-load-calypso-components-web-preview-component       +129 B  (+0.0%)      +48 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.

Automattic/martech#1718

and use it in the mini carousell component.

aneeshd16

Works well! I left some minor code comments below.

Regarding the auto-scroll, I feel the scrolling should pause if the mouse is within the banner area, and this feature is present in most carousel implementations. I'm not sure of the dev-lift to implement this, so please consider this a non-blocking comment.

aneeshd16 · 2023-06-05T10:57:33Z

client/components/dot-pager/index.jsx

+
+			return () => clearTimeout( timerId );
+		}
+	}, [ currentPage ] );


The dependencies array should also include numPages and rotateTime.

Added in bd2b441. I think I need to update my linter :)

aneeshd16 · 2023-06-05T11:03:43Z

client/components/dot-pager/index.jsx

@@ -97,6 +98,16 @@ export const DotPager = ( {
 		}
 	}, [ numPages, currentPage ] );

+	useEffect( () => {
+		if ( rotateTime > 0 ) {


Small optimization: We can run the following lines only if numPages > 1.

Good call. Added in bd2b441

when there are more than 1 page.

southp · 2023-06-06T09:30:44Z

Regarding the auto-scroll, I feel the scrolling should pause if the mouse is within the banner area, and this feature is present in most carousel implementations. I'm not sure of the dev-lift to implement this, so please consider this a non-blocking comment.

Great suggestion, @aneeshd16 . For this PR, I'll deploy it as it is; the pause-on-hovering functionality is tracked here: #77837 and will be worked on separately :)

a8ci18n · 2023-06-07T03:19:58Z

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

Hi @southp, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include this string: Linking Google Analytics to your account is effortless with our Premium plan – no coding required. Gain valuable insights in seconds.

Thank you in advance!

This reverts commit bf61b49.

a8ci18n · 2023-06-15T23:30:21Z

Translation for this Pull Request has now been finished.

southp self-assigned this May 17, 2023

Implment the GA promo banner in /stats per design in

67494e7

Automattic/martech#1718

southp force-pushed the update/ga-upsell-in-stats branch from 5126850 to 67494e7 Compare June 2, 2023 02:15

Add rotateTime prop to <DotPager> supporting automatic page rotation,

5f058b2

and use it in the mini carousell component.

southp added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 5, 2023

southp requested review from a team and aneeshd16 June 5, 2023 06:24

southp marked this pull request as ready for review June 5, 2023 06:24

aneeshd16 approved these changes Jun 5, 2023

View reviewed changes

Add the missing dependencies and only trigger automatic page advancement

bd2b441

when there are more than 1 page.

southp mentioned this pull request Jun 6, 2023

dot-pager: implement the functionality that the auto-scrolling is paused upon mouse hovering. #77837

Open

southp merged commit bf61b49 into trunk Jun 7, 2023
17 of 19 checks passed

southp deleted the update/ga-upsell-in-stats branch June 7, 2023 01:34

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 Jun 7, 2023

southp added a commit that referenced this pull request Jun 7, 2023

Revert "Implment the GA promo banner in /stats (#77037)"

3a271b6

This reverts commit bf61b49.

southp mentioned this pull request Jun 7, 2023

Revert "Implment the GA promo banner in /stats" #77878

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implment the GA promo banner in /stats #77037

Implment the GA promo banner in /stats #77037

southp commented May 17, 2023 •

edited

github-actions bot commented May 17, 2023 •

edited by matticbot

matticbot commented May 17, 2023 •

edited

aneeshd16 left a comment

aneeshd16 Jun 5, 2023

southp Jun 6, 2023

aneeshd16 Jun 5, 2023

southp Jun 6, 2023

southp commented Jun 6, 2023

a8ci18n commented Jun 7, 2023 •

edited

a8ci18n commented Jun 15, 2023

Implment the GA promo banner in /stats #77037

Implment the GA promo banner in /stats #77037

Conversation

southp commented May 17, 2023 • edited

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented May 17, 2023 • edited by matticbot

matticbot commented May 17, 2023 • edited

aneeshd16 left a comment

Choose a reason for hiding this comment

aneeshd16 Jun 5, 2023

Choose a reason for hiding this comment

southp Jun 6, 2023

Choose a reason for hiding this comment

aneeshd16 Jun 5, 2023

Choose a reason for hiding this comment

southp Jun 6, 2023

Choose a reason for hiding this comment

southp commented Jun 6, 2023

a8ci18n commented Jun 7, 2023 • edited

a8ci18n commented Jun 15, 2023

southp commented May 17, 2023 •

edited

github-actions bot commented May 17, 2023 •

edited by matticbot

matticbot commented May 17, 2023 •

edited

a8ci18n commented Jun 7, 2023 •

edited