refactor(console): report first app creation conversion (#5866)

packages/console/src/components/Conversion/utils.ts

@@ -7,6 +7,8 @@ export const gtagAwTrackingId = 'AW-11124811245';
 export enum GtagConversionId {
   /** This ID indicates a user has truly signed up for Logto Cloud. */
   SignUp = 'AW-11192640559/ZuqUCLvNpasYEK_IiNkp',
+  /** This ID indicates a user has created their first app. */
+  CreateFirstApp = 'AW-11192640559/jbsaCPS67q8ZEK_IiNkp',
   /** This ID indicates a user has created a production tenant. */
   CreateProductionTenant = 'AW-11192640559/m04fCMDrxI0ZEK_IiNkp',
   /** This ID indicates a user has purchased a Pro plan. */
@@ -102,7 +104,7 @@ type ReportConversionOptions = {
   redditType?: RedditReportType;
 };
 
-export const reportConversion = async ({
+export const reportConversion = ({
   gtagId,
   redditType,
   transactionId,
@@ -112,8 +114,11 @@ export const reportConversion = async ({
     return;
   }
 
-  return Promise.all([
-    gtagId ? reportToGoogle(gtagId, { transactionId }) : undefined,
-    redditType ? reportToReddit(redditType) : undefined,
-  ]);
+  if (gtagId) {
+    reportToGoogle(gtagId, { transactionId });
+  }
+
+  if (redditType) {
+    reportToReddit(redditType);
+  }
 };

packages/console/src/onboarding/pages/SignInExperience/index.tsx

@@ -118,18 +118,17 @@ function SignInExperience() {
         }
       }
 
-      const [updatedData] = await Promise.all([
-        api
-          .patch(buildUrl('api/sign-in-exp', { removeUnusedDemoSocialConnector: '1' }), {
-            json: formDataParser.toUpdateOnboardingSieData(formData, signInExperience),
-          })
-          .json<SignInExperienceType>(),
-        reportConversion({
-          gtagId: GtagConversionId.SignUp,
-          redditType: 'SignUp',
-          transactionId: user?.id,
-        }),
-      ]);
+      const updatedData = await api
+        .patch(buildUrl('api/sign-in-exp', { removeUnusedDemoSocialConnector: '1' }), {
+          json: formDataParser.toUpdateOnboardingSieData(formData, signInExperience),
+        })
+        .json<SignInExperienceType>();
+
+      reportConversion({
+        gtagId: GtagConversionId.SignUp,
+        redditType: 'SignUp',
+        transactionId: user?.id,
+      });
 
       void mutate(updatedData);
 

packages/console/src/pages/Applications/components/CreateForm/index.tsx

@@ -7,12 +7,14 @@ import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
 
+import { GtagConversionId, reportConversion } from '@/components/Conversion/utils';
 import DynamicT from '@/ds-components/DynamicT';
 import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import TextInput from '@/ds-components/TextInput';
 import useApi from '@/hooks/use-api';
+import useCurrentUser from '@/hooks/use-current-user';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
 import { trySubmitSafe } from '@/utils/form';
@@ -50,6 +52,7 @@ function CreateForm({
   } = useForm<FormData>({
     defaultValues: { type: defaultCreateType, isThirdParty: isDefaultCreateThirdParty },
   });
+  const { user } = useCurrentUser();
 
   const {
     field: { onChange, value, name, ref },
@@ -69,6 +72,11 @@ function CreateForm({
       }
 
       const createdApp = await api.post('api/applications', { json: data }).json<Application>();
+
+      // Report the conversion event after the application is created. Note that the conversion
+      // should be set as count once since this will be reported multiple times.
+      reportConversion({ gtagId: GtagConversionId.CreateFirstApp, transactionId: user?.id });
+
       toast.success(t('applications.application_created'));
       onClose?.(createdApp);
     })