feat: use gtag instead gtm (#1695)

web/app/components/billing/apps-full-in-dialog/index.tsx

@@ -8,7 +8,9 @@ import AppsInfo from '../usage-info/apps-info'
 import s from './style.module.css'
 import GridMask from '@/app/components/base/grid-mask'
 
-const AppsFull: FC = () => {
+const AppsFull: FC<{ loc: string }> = ({
+  loc,
+}) => {
   const { t } = useTranslation()
 
   return (
@@ -20,7 +22,7 @@ const AppsFull: FC = () => {
             <div>{t('billing.apps.fullTipLine2')}</div>
           </div>
           <div className='flex'>
-            <UpgradeBtn />
+            <UpgradeBtn loc={loc} />
           </div>
         </div>
         <AppsInfo className='mt-4' />

web/app/components/billing/apps-full/index.tsx

@@ -18,7 +18,7 @@ const AppsFull: FC = () => {
           <div>{t('billing.apps.fullTipLine2')}</div>
         </div>
         <div className='flex mt-8'>
-          <UpgradeBtn />
+          <UpgradeBtn loc='app-create' />
         </div>
       </div>
     </GridMask>

web/app/components/billing/billing-page/index.tsx

@@ -26,7 +26,7 @@ const Billing: FC = () => {
 
   return (
     <div>
-      <PlanComp />
+      <PlanComp loc={'billing-page'} />
       {enableBilling && isCurrentWorkspaceManager && billingUrl && (
         <a className='mt-5 flex px-6 justify-between h-12 items-center bg-gray-50 rounded-xl cursor-pointer' href={billingUrl} target='_blank'>
           <div className='flex items-center'>

web/app/components/billing/plan/index.tsx

@@ -29,7 +29,7 @@ const typeStyle = {
 }
 
 type Props = {
-  loc?: string
+  loc: string
 }
 
 const PlanComp: FC<Props> = ({
@@ -69,7 +69,7 @@ const PlanComp: FC<Props> = ({
           <UpgradeBtn
             className='flex-shrink-0'
             isPlain={type !== Plan.sandbox}
-            gaEventName='click_header_upgrade_btn'
+            loc={loc}
           />
         )}
       </div>
@@ -84,7 +84,7 @@ const PlanComp: FC<Props> = ({
             isFull
             size='lg'
             isPlain={type !== Plan.sandbox}
-            gaEventName='click_header_upgrade_btn'
+            loc={loc}
           />
         )}
       </div>

web/app/components/billing/pricing/plan-item.tsx

@@ -141,8 +141,18 @@ const PlanItem: FC<Props> = ({
     setLoading(true)
     try {
       const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
-
-      window.location.href = res.url
+      if ((window as any).gtag) {
+        (window as any).gtag('event', 'click_pay_btn', {
+          plan,
+          interval: isYear ? 'year' : 'month',
+          event_callback: () => {
+            window.location.href = res.url
+          },
+        })
+      }
+      else {
+        window.location.href = res.url
+      }
     }
     finally {
       setLoading(false)

web/app/components/billing/upgrade-btn/index.tsx

@@ -15,7 +15,7 @@ type Props = {
   isPlain?: boolean
   isShort?: boolean
   onClick?: () => void
-  gaEventName?: string
+  loc?: string
 }
 
 const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => {
@@ -40,18 +40,27 @@ const UpgradeBtn: FC<Props> = ({
   isShort = false,
   size = 'md',
   onClick: _onClick,
-  gaEventName,
+  loc,
 }) => {
   const { t } = useTranslation()
   const { setShowPricingModal } = useModalContext()
-  const onClick = () => {
-    if (gaEventName)
-      (window as any).dataLayer.push({ event: gaEventName })
+  const handleClick = () => {
     if (_onClick)
       _onClick()
     else
       (setShowPricingModal as any)()
   }
+  const onClick = () => {
+    if (loc && (window as any).gtag) {
+      (window as any).gtag('event', 'click_upgrade_btn', {
+        loc,
+        event_callback: handleClick,
+      })
+    }
+    else {
+      handleClick()
+    }
+  }
 
   if (isPlain)
     return <PlainBtn onClick={onClick} className={className} />

web/app/components/billing/vector-space-full/index.tsx

@@ -22,7 +22,7 @@ const VectorSpaceFull: FC = () => {
             <div>{t('billing.vectorSpace.fullTip')}</div>
             <div>{t('billing.vectorSpace.fullSolution')}</div>
           </div>
-          <UpgradeBtn />
+          <UpgradeBtn loc='knowledge-add-file' />
         </div>
         <VectorSpaceInfo className='pt-4' />
       </div>