feat: integrate Google Analytics event tracking utility

web/app/components/app/workflow-log/filter.tsx

@@ -8,6 +8,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import type { QueryParam } from './index'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
+import { sendGAEvent } from '@/utils/gtag'
 dayjs.extend(quarterOfYear)
 
 const today = dayjs()
@@ -36,6 +37,10 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
       <Chip
         value={queryParams.status || 'all'}
         onSelect={(item) => {
+          sendGAEvent('filter_workflow_status', {
+            status: item.value,
+            status_name: item.name,
+          })
           setQueryParams({ ...queryParams, status: item.value as string })
         }}
         onClear={() => setQueryParams({ ...queryParams, status: 'all' })}

web/app/components/base/ga/index.tsx

@@ -28,14 +28,10 @@ const GA: FC<IGAProps> = ({
 
   return (
     <>
-      <Script
-        strategy="beforeInteractive"
-        async
-        src={`https://www.googletagmanager.com/gtag/js?id=${gaIdMaps[gaType]}`}
-        nonce={nonce ?? undefined}
-      ></Script>
+      {/* Initialize dataLayer first */}
       <Script
         id="ga-init"
+        strategy="afterInteractive"
         dangerouslySetInnerHTML={{
           __html: `
 window.dataLayer = window.dataLayer || [];
@@ -45,14 +41,20 @@ gtag('config', '${gaIdMaps[gaType]}');
           `,
         }}
         nonce={nonce ?? undefined}
-      >
-      </Script>
+      />
+      {/* Load GA script */}
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaIdMaps[gaType]}`}
+        nonce={nonce ?? undefined}
+      />
       {/* Cookie banner */}
       <Script
         id="cookieyes"
+        strategy="lazyOnload"
         src='https://cdn-cookieyes.com/client_data/2a645945fcae53f8e025a2b1/script.js'
         nonce={nonce ?? undefined}
-      ></Script>
+      />
     </>
 
   )

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

@@ -6,6 +6,7 @@ import PremiumBadge from '../../base/premium-badge'
 import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContext } from '@/context/modal-context'
+import { sendGAEvent } from '@/utils/gtag'
 
 type Props = {
   className?: string
@@ -33,8 +34,8 @@ const UpgradeBtn: FC<Props> = ({
   }
   const onClick = () => {
     handleClick()
-    if (loc && (window as any).gtag) {
-      (window as any).gtag('event', 'click_upgrade_btn', {
+    if (loc) {
+      sendGAEvent('click_upgrade_btn', {
         loc,
       })
     }