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,
       })
     }

web/global.d.ts

@@ -12,4 +12,23 @@ declare module '*.mdx' {
   export default MDXComponent
 }
 
-export {}
+// Google Analytics gtag types
+type GtagEventParams = {
+  [key: string]: any
+}
+
+type Gtag = {
+  (command: 'config', targetId: string, config?: GtagEventParams): void
+  (command: 'event', eventName: string, eventParams?: GtagEventParams): void
+  (command: 'js', date: Date): void
+  (command: 'set', config: GtagEventParams): void
+}
+
+declare global {
+  interface Window {
+    gtag?: Gtag
+    dataLayer?: any[]
+  }
+}
+
+import './types/i18n'

web/utils/gtag.ts

@@ -0,0 +1,26 @@
+/**
+ * Google Analytics event tracking utility function
+ * Wraps gtag calls and automatically handles the case where gtag is not available
+ */
+
+type GtagEventParams = {
+  [key: string]: any
+}
+
+/**
+ * Send Google Analytics event
+ * @param eventName - event name
+ * @param eventParams - event params
+ * @example
+ * sendGAEvent('filter_workflow_status', {
+ *   status: 'succeeded',
+ *   status_name: 'Success'
+ * })
+ */
+export const sendGAEvent = (
+  eventName: string,
+  eventParams?: GtagEventParams,
+): void => {
+  if (typeof window !== 'undefined' && window.gtag)
+    window.gtag('event', eventName, eventParams)
+}