refactor(console): report first app creation conversion

logto-io · May 15, 2024 · 6bee6e6 · 6bee6e6
1 parent ac26e8b
commit 6bee6e6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/packages/console/src/components/Conversion/utils.ts b/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);
+ }
 };
diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.tsx b/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);
 

diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/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);
  })