From d096763cb0d9e93a42f7b11254387ea42a48c17e Mon Sep 17 00:00:00 2001
From: James Tien <southp0105@gmail.com>
Date: Tue, 21 Nov 2023 17:43:21 +0800
Subject: [PATCH] Implement the total elapsed time tracking between
 `calypso_signup_start` 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 | 12 +++++++++++-
 client/signup/storageUtils.js  | 21 +++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/lib/analytics/signup.js b/client/lib/analytics/signup.js
index 7bd4e4ca8cd4b..f6dc84823292c 100644
--- a/client/lib/analytics/signup.js
+++ b/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,
diff --git a/client/signup/storageUtils.js b/client/signup/storageUtils.js
index 4e6e7020615e3..7872b225c1130 100644
--- a/client/signup/storageUtils.js
+++ b/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 );
+};