Add GTM event tracking

__mocks__/@react-native-firebase/analytics.ts

@@ -0,0 +1,5 @@
+export default function analytics() {
+    return {
+        logEvent: jest.fn(),
+    };
+}

config/webpack/webpack.common.ts

@@ -84,7 +84,7 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment):
             isWeb: platform === 'web',
             isProduction: file === '.env.production',
             isStaging: file === '.env.staging',
-            useThirdPartyScripts: process.env.USE_THIRD_PARTY_SCRIPTS === 'true' || (platform === 'web' && file === '.env.production'),
+            useThirdPartyScripts: process.env.USE_THIRD_PARTY_SCRIPTS === 'true' || (platform === 'web' && ['.env.production', '.env.staging'].includes(file)),
         }),
         new PreloadWebpackPlugin({
             rel: 'preload',

src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx

@@ -1,11 +1,13 @@
 import {createStackNavigator} from '@react-navigation/stack';
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import FocusTrapForScreens from '@components/FocusTrap/FocusTrapForScreen';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import GoogleTagManager from '@libs/GoogleTagManager';
 import OnboardingModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions';
 import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types';
 import OnboardingRefManager from '@libs/OnboardingRefManager';
@@ -14,6 +16,7 @@ import OnboardingEmployees from '@pages/OnboardingEmployees';
 import OnboardingPersonalDetails from '@pages/OnboardingPersonalDetails';
 import OnboardingPurpose from '@pages/OnboardingPurpose';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 import Overlay from './Overlay';
 
@@ -23,6 +26,17 @@ function OnboardingModalNavigator() {
     const styles = useThemeStyles();
     const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const outerViewRef = React.useRef<View>(null);
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID ?? 0});
+
+    // Publish a sign_up event when we start the onboarding flow. This should track basic sign ups
+    // as well as Google and Apple SSO.
+    useEffect(() => {
+        if (!accountID) {
+            return;
+        }
+
+        GoogleTagManager.publishEvent('sign_up', accountID);
+    }, [accountID]);
 
     const handleOuterClick = useCallback(() => {
         OnboardingRefManager.handleOuterClick();

src/libs/actions/IOU.ts

@@ -36,6 +36,7 @@ import DateUtils from '@libs/DateUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
+import GoogleTagManager from '@libs/GoogleTagManager';
 import * as IOUUtils from '@libs/IOUUtils';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as Localize from '@libs/Localize';
@@ -3415,6 +3416,7 @@ function categorizeTrackedExpense(
     comment: string,
     merchant: string,
     created: string,
+    isDraftPolicy: boolean,
     category?: string,
     tag?: string,
     taxCode = '',
@@ -3471,6 +3473,12 @@ function categorizeTrackedExpense(
     };
 
     API.write(WRITE_COMMANDS.CATEGORIZE_TRACKED_EXPENSE, parameters, {optimisticData, successData, failureData});
+
+    // If a draft policy was used, then the CategorizeTrackedExpense command will create a real one
+    // so let's track that conversion here
+    if (isDraftPolicy) {
+        GoogleTagManager.publishEvent('workspace_created', userAccountID);
+    }
 }
 
 function shareTrackedExpense(
@@ -3770,6 +3778,7 @@ function trackExpense(
     payeeAccountID: number,
     participant: Participant,
     comment: string,
+    isDraftPolicy: boolean,
     receipt?: Receipt,
     category?: string,
     tag?: string,
@@ -3865,6 +3874,7 @@ function trackExpense(
                 comment,
                 merchant,
                 created,
+                isDraftPolicy,
                 category,
                 tag,
                 taxCode,

src/libs/actions/PaymentMethods.ts

@@ -16,6 +16,7 @@ import type {
 } from '@libs/API/parameters';
 import {READ_COMMANDS, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as CardUtils from '@libs/CardUtils';
+import GoogleTagManager from '@libs/GoogleTagManager';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -159,7 +160,7 @@ function makeDefaultPaymentMethod(bankAccountID: number, fundID: number, previou
  * Calls the API to add a new card.
  *
  */
-function addPaymentCard(params: PaymentCardParams) {
+function addPaymentCard(accountID: number, params: PaymentCardParams) {
     const cardMonth = CardUtils.getMonthFromExpirationDateString(params.expirationDate);
     const cardYear = CardUtils.getYearFromExpirationDateString(params.expirationDate);
 
@@ -203,21 +204,26 @@ function addPaymentCard(params: PaymentCardParams) {
         successData,
         failureData,
     });
+
+    GoogleTagManager.publishEvent('paid_adoption', accountID);
 }
 
 /**
  * Calls the API to add a new card.
  *
  */
-function addSubscriptionPaymentCard(cardData: {
-    cardNumber: string;
-    cardYear: string;
-    cardMonth: string;
-    cardCVV: string;
-    addressName: string;
-    addressZip: string;
-    currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
-}) {
+function addSubscriptionPaymentCard(
+    accountID: number,
+    cardData: {
+        cardNumber: string;
+        cardYear: string;
+        cardMonth: string;
+        cardCVV: string;
+        addressName: string;
+        addressZip: string;
+        currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
+    },
+) {
     const {cardNumber, cardYear, cardMonth, cardCVV, addressName, addressZip, currency} = cardData;
 
     const parameters: AddPaymentCardParams = {
@@ -265,6 +271,8 @@ function addSubscriptionPaymentCard(cardData: {
             failureData,
         });
     }
+
+    GoogleTagManager.publishEvent('paid_adoption', accountID);
 }
 
 /**

src/libs/actions/Policy/Policy.ts

@@ -62,6 +62,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
+import GoogleTagManager from '@libs/GoogleTagManager';
 import Log from '@libs/Log';
 import * as NetworkStore from '@libs/Network/NetworkStore';
 import * as NumberUtils from '@libs/NumberUtils';
@@ -1838,6 +1839,11 @@ function createWorkspace(policyOwnerEmail = '', makeMeAdmin = false, policyName
     const {optimisticData, failureData, successData, params} = buildPolicyData(policyOwnerEmail, makeMeAdmin, policyName, policyID, undefined, engagementChoice);
     API.write(WRITE_COMMANDS.CREATE_WORKSPACE, params, {optimisticData, successData, failureData});
 
+    // Publish a workspace created event if this is their first policy
+    if (getAdminPolicies().length === 0) {
+        GoogleTagManager.publishEvent('workspace_created', sessionAccountID);
+    }
+
     return params;
 }
 
@@ -3743,6 +3749,10 @@ function setWorkspaceEReceiptsEnabled(policyID: string, eReceipts: boolean) {
     API.write(WRITE_COMMANDS.SET_WORKSPACE_ERECEIPTS_ENABLED, parameters, onyxData);
 }
 
+function getAdminPolicies(): Policy[] {
+    return Object.values(allPolicies ?? {}).filter<Policy>((policy): policy is Policy => !!policy && policy.role === CONST.POLICY.ROLE.ADMIN && policy.type !== CONST.POLICY.TYPE.PERSONAL);
+}
+
 function getAdminPoliciesConnectedToSageIntacct(): Policy[] {
     return Object.values(allPolicies ?? {}).filter<Policy>((policy): policy is Policy => !!policy && policy.role === CONST.POLICY.ROLE.ADMIN && !!policy?.connections?.intacct);
 }

src/pages/iou/request/step/IOURequestStepAmount.tsx

@@ -45,24 +45,31 @@
 function IOURequestStepAmount({
     report,
     route: {
-        params: {iouType, reportID, transactionID, backTo, pageIndex, action, currency: selectedCurrency = ''},
+        params: {iouType, reportID, transactionID = '-1', backTo, pageIndex, action, currency: selectedCurrency = ''},
     },
     transaction,
     currentUserPersonalDetails,
     shouldKeepUserInput = false,
 }: IOURequestStepAmountProps) {
     const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID ?? -1}`);
     const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID ?? -1}`);
     const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? -1}`);
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : -1}`);
 
     const {translate} = useLocalize();
     const textInput = useRef<BaseTextInputRef | null>(null);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const isSaveButtonPressed = useRef(false);
     const iouRequestType = getRequestType(transaction);
+    const policyID = report?.policyID ?? '-1';
+
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`);
+    const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
+    const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`);
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const isSplitBill = iouType === CONST.IOU.TYPE.SPLIT;
@@ -236,6 +243,7 @@
                         currentUserPersonalDetails.accountID,
                         participants.at(0) ?? {},
                         '',
+                        false,
                     );
                     return;
                 }

src/pages/iou/request/step/IOURequestStepConfirmation.tsx

@@ -63,6 +63,7 @@ function IOURequestStepConfirmation({
 
     const report = reportReal ?? reportDraft;
     const policy = policyReal ?? policyDraft;
+    const isDraftPolicy = policy === policyDraft;
     const policyCategories = policyCategoriesReal ?? policyCategoriesDraft;
 
     const styles = useThemeStyles();
@@ -287,6 +288,7 @@ function IOURequestStepConfirmation({
                 currentUserPersonalDetails.accountID,
                 participant,
                 trimmedComment,
+                isDraftPolicy,
                 receiptObj,
                 transaction.category,
                 transaction.tag,
@@ -317,6 +319,7 @@ function IOURequestStepConfirmation({
             policyCategories,
             action,
             customUnitRateID,
+            isDraftPolicy,
         ],
     );
 

src/pages/iou/request/step/IOURequestStepDistance.tsx

@@ -319,6 +319,7 @@ function IOURequestStepDistance({
                         currentUserPersonalDetails.accountID,
                         participant,
                         '',
+                        false,
                         {},
                         '',
                         '',

src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

@@ -251,6 +251,7 @@ function IOURequestStepScan({
                     currentUserPersonalDetails.accountID,
                     participant,
                     '',
+                    false,
                     receipt,
                 );
             } else {
@@ -335,6 +336,7 @@ function IOURequestStepScan({
                                     currentUserPersonalDetails.accountID,
                                     participant,
                                     '',
+                                    false,
                                     receipt,
                                     '',
                                     '',

src/pages/iou/request/step/IOURequestStepScan/index.tsx

@@ -280,6 +280,7 @@ function IOURequestStepScan({
                     currentUserPersonalDetails.accountID,
                     participant,
                     '',
+                    false,
                     receipt,
                 );
             } else {
@@ -365,6 +366,7 @@ function IOURequestStepScan({
                                     currentUserPersonalDetails.accountID,
                                     participant,
                                     '',
+                                    false,
                                     receipt,
                                     '',
                                     '',

src/pages/settings/Subscription/PaymentCard/index.tsx

@@ -27,6 +27,7 @@ function AddPaymentCard() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID ?? 0});
 
     const subscriptionPlan = useSubscriptionPlan();
     const subscriptionPrice = useSubscriptionPrice();
@@ -43,18 +44,21 @@ function AddPaymentCard() {
         };
     }, []);
 
-    const addPaymentCard = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM>) => {
-        const cardData = {
-            cardNumber: CardUtils.getMCardNumberString(values.cardNumber),
-            cardMonth: CardUtils.getMonthFromExpirationDateString(values.expirationDate),
-            cardYear: CardUtils.getYearFromExpirationDateString(values.expirationDate),
-            cardCVV: values.securityCode,
-            addressName: values.nameOnCard,
-            addressZip: values.addressZipCode,
-            currency: values.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD,
-        };
-        PaymentMethods.addSubscriptionPaymentCard(cardData);
-    }, []);
+    const addPaymentCard = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM>) => {
+            const cardData = {
+                cardNumber: CardUtils.getMCardNumberString(values.cardNumber),
+                cardMonth: CardUtils.getMonthFromExpirationDateString(values.expirationDate),
+                cardYear: CardUtils.getYearFromExpirationDateString(values.expirationDate),
+                cardCVV: values.securityCode,
+                addressName: values.nameOnCard,
+                addressZip: values.addressZipCode,
+                currency: values.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD,
+            };
+            PaymentMethods.addSubscriptionPaymentCard(accountID ?? 0, cardData);
+        },
+        [accountID],
+    );
 
     const [formData] = useOnyx(ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM);
     const prevFormDataSetupComplete = usePrevious(!!formData?.setupComplete);

src/pages/settings/Wallet/AddDebitCardPage.tsx

@@ -1,11 +1,12 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import PaymentCardForm from '@components/AddPaymentCard/PaymentCardForm';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import type {PaymentCardParams} from '@libs/API/parameters';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as PaymentMethods from '@userActions/PaymentMethods';
@@ -19,6 +20,7 @@ function DebitCardPage() {
     const [formData] = useOnyx(ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM);
     const prevFormDataSetupComplete = usePrevious(!!formData?.setupComplete);
     const nameOnCardRef = useRef<AnimatedTextInputRef>(null);
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID ?? 0});
 
     /**
      * Reset the form values on the mount and unmount so that old errors don't show when this form is displayed again.
@@ -39,6 +41,13 @@ function DebitCardPage() {
         PaymentMethods.continueSetup();
     }, [prevFormDataSetupComplete, formData?.setupComplete]);
 
+    const addPaymentCard = useCallback(
+        (params: PaymentCardParams) => {
+            PaymentMethods.addPaymentCard(accountID ?? 0, params);
+        },
+        [accountID],
+    );
+
     return (
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current?.focus()}
@@ -55,7 +64,7 @@ function DebitCardPage() {
                 showAddressField
                 isDebitCard
                 showStateSelector
-                addPaymentCard={PaymentMethods.addPaymentCard}
+                addPaymentCard={addPaymentCard}
                 submitButtonText={translate('common.save')}
             />
         </ScreenWrapper>