Stepper Tracking: Simplify calypso_new_user_site_creation (#97130)

* New HC to 75% of users * Simplify new user site tracking * Remove unrelated changes * Set is_new_user to false instead of null * Simplify logic * Switch to Id and localStorage
Automattic · Dec 9, 2024 · 9343aba · 9343aba
1 parent a3203d2
commit 9343aba
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 114 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/__user/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/__user/index.tsx
@@ -61,8 +61,8 @@ const UserStepComponent: Step = function UserStep( {
 	const shouldRenderLocaleSuggestions = ! isLoggedIn; // For logged-in users, we respect the user language settings
 
 	const handleCreateAccountSuccess = ( data: AccountCreateReturn ) => {
-		if ( 'username' in data ) {
-			setSignupIsNewUser( data.username );
+		if ( 'ID' in data ) {
+			setSignupIsNewUser( data.ID );
 		}
 	};
 

diff --git a/...ng/stepper/declarative-flow/internals/steps-repository/__user/use-create-user-mutation.ts b/...ng/stepper/declarative-flow/internals/steps-repository/__user/use-create-user-mutation.ts
@@ -2,7 +2,6 @@
 // import { initGoogleRecaptcha, recordGoogleRecaptchaAction } from 'calypso/lib/analytics/recaptcha';
 import { useMutation } from '@tanstack/react-query';
 import { createAccount } from 'calypso/lib/signup/api/account';
-import { setSignupIsNewUser } from 'calypso/signup/storageUtils';
 import { useDispatch } from 'calypso/state';
 import {
 	SOCIAL_LOGIN_REQUEST,
@@ -22,9 +21,6 @@ export function useCreateAccountMutation() {
 			} );
 		},
 		onSuccess: ( data ) => {
-			if ( 'isNewAccountCreated' in data && data.isNewAccountCreated ) {
-				setSignupIsNewUser( data?.username );
-			}
 			dispatch( {
 				type: SOCIAL_LOGIN_REQUEST_SUCCESS,
 				data: data,

diff --git a/client/landing/stepper/hooks/use-record-signup-complete.ts b/client/landing/stepper/hooks/use-record-signup-complete.ts
@@ -3,45 +3,30 @@ import { useSelect } from '@wordpress/data';
 import { useCallback } from 'react';
 import { USER_STORE, ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { SIGNUP_DOMAIN_ORIGIN, recordSignupComplete } from 'calypso/lib/analytics/signup';
-import { clearSignupIsNewUser, getSignupIsNewUser } from 'calypso/signup/storageUtils';
-import { useSelector } from 'calypso/state';
-import isUserRegistrationDaysWithinRange from 'calypso/state/selectors/is-user-registration-days-within-range';
+import { getSignupIsNewUserAndClear } from 'calypso/signup/storageUtils';
 import { useSite } from './use-site';
 import type { UserSelect, OnboardSelect } from '@automattic/data-stores';
 
 export const useRecordSignupComplete = ( flow: string | null ) => {
 	const site = useSite();
 	const siteId = site?.ID || null;
 	const theme = site?.options?.theme_slug || '';
-	const { username, siteCount, domainCartItem, planCartItem, selectedDomain, signupDomainOrigin } =
-		useSelect( ( select ) => {
+	const { userId, domainCartItem, planCartItem, selectedDomain, signupDomainOrigin } = useSelect(
+		( select ) => {
 			return {
-				username: ( select( USER_STORE ) as UserSelect ).getCurrentUser()?.username,
-				siteCount: ( select( USER_STORE ) as UserSelect ).getCurrentUser()?.site_count,
+				userId: ( select( USER_STORE ) as UserSelect ).getCurrentUser()?.ID,
 				domainCartItem: ( select( ONBOARD_STORE ) as OnboardSelect ).getDomainCartItem(),
 				planCartItem: ( select( ONBOARD_STORE ) as OnboardSelect ).getPlanCartItem(),
 				selectedDomain: ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDomain(),
 				signupDomainOrigin: ( select( ONBOARD_STORE ) as OnboardSelect ).getSignupDomainOrigin(),
 			};
-		}, [] );
-
-	const isNewishUser = useSelector( ( state ) =>
-		isUserRegistrationDaysWithinRange( state, null, 0, 7 )
+		},
+		[]
 	);
 
 	return useCallback(
 		( signupCompletionState: Record< string, unknown > ) => {
-			const siteSlug = site?.slug ?? signupCompletionState?.siteSlug;
-			const isNewUser = getSignupIsNewUser( username );
-			if ( isNewUser ) {
-				clearSignupIsNewUser( username );
-			}
-
-			const isNew7DUserSite = !! (
-				isNewUser ||
-				( isNewishUser && siteSlug && siteCount && siteCount <= 1 )
-			);
-
+			const isNewUser = getSignupIsNewUserAndClear( userId ) ?? false;
 			// Domain product slugs can be a domain purchases like dotcom_domain or dotblog_domain or a mapping like domain_mapping
 			// When purchasing free subdomains the product_slugs is empty (since there is no actual produce being purchased)
 			// so we avoid capturing the product slug in these instances.
@@ -64,7 +49,6 @@ export const useRecordSignupComplete = ( flow: string | null ) => {
 					siteId: siteId ?? signupCompletionState?.siteId,
 					isNewUser,
 					hasCartItems,
-					isNew7DUserSite,
 					theme,
 					intent: flow,
 					startingPoint: flow,
@@ -77,23 +61,19 @@ export const useRecordSignupComplete = ( flow: string | null ) => {
 						hasPaidDomainItem && domainCartItem ? isDomainTransfer( domainCartItem ) : undefined,
 					signupDomainOrigin: signupDomainOrigin ?? SIGNUP_DOMAIN_ORIGIN.NOT_SET,
 					framework: 'stepper',
-					isNewishUser,
 				},
 				true
 			);
 		},
 		[
 			domainCartItem,
 			flow,
-			isNewishUser,
 			planCartItem,
 			selectedDomain,
 			signupDomainOrigin,
-			site?.slug,
-			siteCount,
 			siteId,
 			theme,
-			username,
+			userId,
 		]
 	);
 };
diff --git a/client/lib/analytics/signup.js b/client/lib/analytics/signup.js
@@ -46,7 +46,6 @@ export function recordSignupComplete(
 		hasCartItems,
 		planProductSlug,
 		domainProductSlug,
-		isNew7DUserSite,
 		theme,
 		intent,
 		startingPoint,
@@ -55,7 +54,6 @@ export function recordSignupComplete(
 		signupDomainOrigin,
 		elapsedTimeSinceStart = null,
 		framework,
-		isNewishUser,
 	},
 	now
 ) {
@@ -75,15 +73,13 @@ export function recordSignupComplete(
 				hasCartItems,
 				planProductSlug,
 				domainProductSlug,
-				isNew7DUserSite,
 				theme,
 				intent,
 				startingPoint,
 				isTransfer,
 				isMapping,
 				signupDomainOrigin,
 				framework,
-				isNewishUser,
 			},
 			true
 		);
@@ -123,16 +119,14 @@ export function recordSignupComplete(
 	gaRecordEvent( 'Signup', 'calypso_signup_complete:' + flags.join( ',' ) );
 
 	// Tracks, Google Analytics
-	if ( isNew7DUserSite ) {
+	if ( isNewSite && isNewUser ) {
 		const device = resolveDeviceTypeByViewPort();
 
 		// Tracks
 		recordTracksEvent( 'calypso_new_user_site_creation', {
 			flow,
 			device,
 			framework,
-			is_new_user: isNewUser,
-			is_newish_user: isNewishUser,
 		} );
 		// Google Analytics
 		gaRecordEvent( 'Signup', 'calypso_new_user_site_creation' );

diff --git a/client/lib/signup/api/account.tsx b/client/lib/signup/api/account.tsx
@@ -4,6 +4,7 @@ import { recordRegistration } from 'calypso/lib/analytics/signup';
 import { getLocaleSlug } from 'calypso/lib/i18n-utils';
 import getToSAcceptancePayload from 'calypso/lib/tos-acceptance-tracking';
 import wpcom from 'calypso/lib/wp';
+import { setSignupIsNewUser } from 'calypso/signup/storageUtils';
 import type {
 	AccountCreationAPIResponse,
 	CreateAccountParams,
@@ -117,24 +118,24 @@ export async function createAccount( {
 		} );
 	}
 
-	if ( 'error' in response ) {
-		return { ...response, isNewAccountCreated: false };
+	// Handling special case where users log in via social using signup form.
+	if (
+		'error' in response ||
+		( service && response && 'created_account' in response && ! response?.created_account )
+	) {
+		return { ...response };
 	}
 
-	// Handling special case where users log in via social using signup form.
-	let isNewAccountCreated = true;
-	if ( service && response && 'created_account' in response && ! response?.created_account ) {
-		isNewAccountCreated = false;
-	} else {
-		const username = response?.signup_sandbox_username || response?.username;
+	const username = response?.signup_sandbox_username || response?.username;
+	const userId = response?.signup_sandbox_user_id || response?.user_id;
+	recordNewAccountCreation( {
+		response,
+		flowName,
+		username,
+		signupType: service ? 'social' : 'default',
+	} );
 
-		recordNewAccountCreation( {
-			response,
-			flowName,
-			username,
-			signupType: service ? 'social' : 'default',
-		} );
-	}
+	setSignupIsNewUser( userId );
 
-	return { ...response, isNewAccountCreated };
+	return { ...response };
 }
diff --git a/client/lib/signup/api/type.ts b/client/lib/signup/api/type.ts
@@ -9,7 +9,6 @@ export type AccountCreationAPIResponse =
 			oauth2_redirect?: string;
 			marketing_price_group?: string;
 			created_account?: boolean;
-			isNewAccountCreated?: boolean;
 	  }
 	| {
 			error: 'user_exists';
@@ -65,6 +64,7 @@ export type AccountCreateReturn =
 			};
 	  }
 	| {
+			ID?: string;
 			username?: string;
 			marketing_price_group?: string | undefined;
 			bearer_token?: string | undefined;

diff --git a/client/signup/main.jsx b/client/signup/main.jsx
@@ -63,7 +63,6 @@ import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selector
 import getCurrentLocaleSlug from 'calypso/state/selectors/get-current-locale-slug';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
 import isDomainOnlySite from 'calypso/state/selectors/is-domain-only-site';
-import isUserRegistrationDaysWithinRange from 'calypso/state/selectors/is-user-registration-days-within-range';
 import { getSignupDependencyStore } from 'calypso/state/signup/dependency-store/selectors';
 import { submitSignupStep, removeStep, addStep } from 'calypso/state/signup/progress/actions';
 import { getSignupProgress } from 'calypso/state/signup/progress/selectors';
@@ -525,14 +524,10 @@ class Signup extends Component {
 	handleFlowComplete = ( dependencies, destination ) => {
 		debug( 'The flow is completed. Destination: %s', destination );
 
-		const { isNewishUser, existingSiteCount } = this.props;
+		const { existingSiteCount } = this.props;
 
 		const isNewUser = !! ( dependencies && dependencies.is_new_account );
 		const siteId = dependencies && dependencies.siteId;
-		const isNew7DUserSite = !! (
-			isNewUser ||
-			( isNewishUser && dependencies && dependencies.siteSlug && existingSiteCount <= 1 )
-		);
 		const hasCartItems = dependenciesContainCartItem( dependencies );
 		// @TODO: cartItem is now deprecated. Remove this once all steps and flows have been
 		// updated to use cartItems
@@ -548,11 +543,9 @@ class Signup extends Component {
 			: cartItem?.product_slug;
 
 		const debugProps = {
-			isNewishUser,
 			existingSiteCount,
 			isNewUser,
 			hasCartItems,
-			isNew7DUserSite,
 			flow: this.props.flowName,
 			siteId,
 			theme: selectedDesign?.theme,
@@ -582,7 +575,6 @@ class Signup extends Component {
 					undefined !== domainItem && domainItem.is_domain_registration
 						? domainItem.product_slug
 						: undefined,
-				isNew7DUserSite,
 				// Record the following values so that we can know the user completed which branch under the hero flow
 				theme: selectedDesign?.theme,
 				intent,
@@ -592,7 +584,6 @@ class Signup extends Component {
 				isTransfer: isTransfer,
 				signupDomainOrigin: signupDomainOriginValue,
 				framework: 'start',
-				isNewishUser,
 			} );
 		}
 	};
@@ -1008,7 +999,6 @@ export default connect(
 			signupDependencies,
 			isLoggedIn: isUserLoggedIn( state ),
 			isEmailVerified: isCurrentUserEmailVerified( state ),
-			isNewishUser: isUserRegistrationDaysWithinRange( state, null, 0, 7 ),
 			existingSiteCount: getCurrentUserSiteCount( state ),
 			isPaidPlan: isCurrentPlanPaid( state, siteId ),
 			sitePlanName: getSitePlanName( state, siteId ),