feat: add Google Ads conversion tracking for payment steps

internxt · Jan 16, 2025 · 9746206 · 9746206
1 parent 30a8c06
commit 9746206
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 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.REACT_APP_GOOGLE_ANALYTICS_SENDTO;
+const SEND_TO = process.env.SEND_TO;
 
 export const PAYMENT_ELEMENT_OPTIONS: StripePaymentElementOptions = {
   wallets: {
@@ -52,8 +52,6 @@ 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();
 
@@ -113,21 +111,12 @@ 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(handleFormSubmit)}
+      onSubmit={handleSubmit((formData, event) =>
+        checkoutViewManager.onCheckoutButtonClicked(formData, event, stripeSDK, elements),
+      )}
     >
       <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">
@@ -175,14 +164,21 @@ const CheckoutView = ({
                       {error.stripe}
                     </div>
                   )}
-                  <Button type="submit" id="submit-step2" className="hidden lg:flex" disabled={isButtonDisabled}>
+                  <Button
+                    type="submit"
+                    id="submit-step2"
+                    className="hidden lg:flex"
+                    disabled={isButtonDisabled}
+                    onClick={() => gtag_report_conversion_step2('/checkout/success')}
+                  >
                     {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.REACT_APP_GOOGLE_ANALYTICS_SENDTO;
+const SEND_TO = process.env.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: SEND_TO,
+        send_to: 'AW-728922855/qLXECNiH2YcaEOf1ydsC',
         value: 1.0,
         currency: 'EUR',
         transaction_id: localStorageService.get('subscriptionId') || '',