feat: add Google Ads conversion tracking for payment steps

internxt · Jan 16, 2025 · 4c4e466 · 4c4e466
1 parent 9746206
commit 4c4e466
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx b/src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx
@@ -15,7 +15,7 @@ import { LegacyRef } from 'react';
 import { OptionalB2BDropdown } from 'app/payment/components/checkout/OptionalB2BDropdown';
 import { UserType } from '@internxt/sdk/dist/drive/payments/types';
 
-const SEND_TO = process.env.SEND_TO;
+const SEND_TO = process.env.REACT_APP_GOOGLE_ANALYTICS_SENDTO;
 
 export const PAYMENT_ELEMENT_OPTIONS: StripePaymentElementOptions = {
   wallets: {
@@ -52,6 +52,8 @@ const CheckoutView = ({
   checkoutViewManager,
 }: CheckoutViewProps) => {
   const { translate } = useTranslationContext();
+  // Those custom hooks should be here.
+  // They cannot be moved to the Parent, because it must be wrapped by <Elements> component.
   const stripeSDK = useStripe();
   const elements = useElements();
 
@@ -111,12 +113,21 @@ const CheckoutView = ({
     return false;
   }
 
+  const handleFormSubmit = (formData: IFormValues, event: any) => {
+    event.preventDefault();
+    checkoutViewManager.onCheckoutButtonClicked(formData, event, stripeSDK, elements);
+
+    if (authMethod === AUTH_METHOD_VALUES.IS_SIGNED_IN) {
+      gtag_report_conversion_step2('/checkout/success');
+    } else {
+      gtag_report_conversion_create_account('/checkout/success');
+    }
+  };
+
   return (
     <form
       className="flex h-full overflow-y-scroll bg-gray-1 lg:w-screen xl:px-16"
-      onSubmit={handleSubmit((formData, event) =>
-        checkoutViewManager.onCheckoutButtonClicked(formData, event, stripeSDK, elements),
-      )}
+      onSubmit={handleSubmit(handleFormSubmit)}
     >
       <div className="mx-auto flex w-full max-w-screen-xl px-5 py-10">
         <div className="flex w-full flex-col space-y-8 lg:space-y-16">
@@ -164,21 +175,14 @@ const CheckoutView = ({
                       {error.stripe}
                     </div>
                   )}
-                  <Button
-                    type="submit"
-                    id="submit-step2"
-                    className="hidden lg:flex"
-                    disabled={isButtonDisabled}
-                    onClick={() => gtag_report_conversion_step2('/checkout/success')}
-                  >
+                  <Button type="submit" id="submit-step2" className="hidden lg:flex" disabled={isButtonDisabled}>
                     {isButtonDisabled ? translate('checkout.processing') : translate('checkout.pay')}
                   </Button>
                   <Button
                     type="submit"
                     id="submit-create-account"
                     className="hidden lg:flex"
                     disabled={isButtonDisabled}
-                    onClick={() => gtag_report_conversion_create_account('/checkout/success')}
                   >
                     {isButtonDisabled ? translate('checkout.processing') : translate('checkout.pay')}
                   </Button>

diff --git a/src/app/payment/views/IntegratedCheckoutView/CheckoutViewWrapper.tsx b/src/app/payment/views/IntegratedCheckoutView/CheckoutViewWrapper.tsx
@@ -31,7 +31,7 @@ import ChangePlanDialog from '../../../newSettings/Sections/Account/Plans/compon
 import { getProductAmount } from 'app/payment/utils/getProductAmount';
 import { bytesToString } from 'app/drive/services/size.service';
 
-const SEND_TO = process.env.GOOGLE_ANALYTICS_SENDTO;
+const SEND_TO = process.env.REACT_APP_GOOGLE_ANALYTICS_SENDTO;
 
 export const THEME_STYLES = {
   dark: {
@@ -312,7 +312,7 @@ const CheckoutViewWrapper = () => {
   const handlePaymentSuccess = () => {
     if (window && window.gtag) {
       window.gtag('event', 'conversion', {
-        send_to: 'AW-728922855/qLXECNiH2YcaEOf1ydsC',
+        send_to: SEND_TO,
         value: 1.0,
         currency: 'EUR',
         transaction_id: localStorageService.get('subscriptionId') || '',