Implement the total elapsed time tracking between `calypso_signup_sta…

…rt` and `calypso_signup_complete` (#83944)

* Implement the total elapsed time tracking between `calypso_signup_start`
and `calypso_signup_complete`

* Remove start_time from `calypso_signup_start` since it's likely not used
in the analysis

* Take the implicit queuing of `recordSignupCompleteEvent` into account.

* `elapsedTime` should be mark as optional

* Use the performance clock to compute the elapsed time instead

client/lib/analytics/signup.js

@@ -9,12 +9,19 @@ import { gaRecordEvent } from 'calypso/lib/analytics/ga';
 import { identifyUser } from 'calypso/lib/analytics/identify-user';
 import { addToQueue } from 'calypso/lib/analytics/queue';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import { setSignupStartTime, getSignupCompleteElapsedTime } from 'calypso/signup/storageUtils';
 
 const signupDebug = debug( 'calypso:analytics:signup' );
 
 export function recordSignupStart( flow, ref, optionalProps ) {
+	setSignupStartTime();
+
 	// Tracks
-	recordTracksEvent( 'calypso_signup_start', { flow, ref, ...optionalProps } );
+	recordTracksEvent( 'calypso_signup_start', {
+		flow,
+		ref,
+		...optionalProps,
+	} );
 	// Google Analytics
 	gaRecordEvent( 'Signup', 'calypso_signup_start' );
 	// Marketing
@@ -46,6 +53,7 @@ export function recordSignupComplete(
 		isTransfer,
 		isMapping,
 		signupDomainOrigin,
+		elapsedTimeSinceStart = null,
 	},
 	now
 ) {
@@ -57,6 +65,7 @@ export function recordSignupComplete(
 			'signup',
 			'recordSignupComplete',
 			{
+				elapsedTimeSinceStart: elapsedTimeSinceStart ?? getSignupCompleteElapsedTime(),
 				flow,
 				siteId,
 				isNewUser,
@@ -81,6 +90,7 @@ export function recordSignupComplete(
 	// blog_id instead of site_id here. We keep using "siteId" otherwise since
 	// all the other fields still refer with "site". e.g. isNewSite
 	recordTracksEvent( 'calypso_signup_complete', {
+		elapsed_time_since_start: elapsedTimeSinceStart ?? getSignupCompleteElapsedTime(),
 		flow,
 		blog_id: siteId,
 		is_new_user: isNewUser,

client/signup/storageUtils.js

@@ -83,3 +83,24 @@ export const getSignupCompleteStepNameAndClear = () => {
 	clearSignupCompleteStepName();
 	return value;
 };
+export const setSignupStartTime = () =>
+	ignoreFatalsForSessionStorage( () =>
+		sessionStorage?.setItem( 'wpcom_signup_start_time', performance.now() )
+	);
+export const getSignupStartTime = () =>
+	ignoreFatalsForSessionStorage( () => sessionStorage?.getItem( 'wpcom_signup_start_time' ) );
+
+export const clearSignupStartTime = () =>
+	ignoreFatalsForSessionStorage( () => sessionStorage?.removeItem( 'wpcom_signup_start_time' ) );
+
+export const getSignupCompleteElapsedTime = () => {
+	const startTime = getSignupStartTime();
+
+	if ( startTime == null ) {
+		return null;
+	}
+
+	clearSignupStartTime();
+
+	return Math.floor( performance.now() - startTime );
+};