feat: 🎸 google analytics

futantan · futantan · commit 30ec994041cc · 2024-11-21T14:04:34.000+11:00
diff --git a/apps/tlink-web/analytics/google-analytics-track-pv.tsx b/apps/tlink-web/analytics/google-analytics-track-pv.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
+
+export const GoogleAnalyticsTrackPv = ({
+  GA_MEASUREMENT_ID,
+}: {
+  GA_MEASUREMENT_ID: string
+}) => {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    const url = pathname + searchParams.toString()
+
+    pageview(GA_MEASUREMENT_ID, url)
+  }, [pathname, searchParams, GA_MEASUREMENT_ID])
+
+  return null
+}
+
+const pageview = (GA_MEASUREMENT_ID: string, url: string) => {
+  if (typeof window !== 'undefined' && window.gtag) {
+    window.gtag('config', GA_MEASUREMENT_ID, {
+      page_path: url,
+    })
+  }
+}
diff --git a/apps/tlink-web/analytics/googleAnalytics.tsx b/apps/tlink-web/analytics/googleAnalytics.tsx
@@ -1,23 +1,12 @@
-'use client'
-
-import { usePathname, useSearchParams } from 'next/navigation'
+import { GoogleAnalyticsTrackPv } from '@/analytics/google-analytics-track-pv'
 import Script from 'next/script'
-import { useEffect } from 'react'
+import { Suspense } from 'react'
 
 export const GoogleAnalytics = ({
   GA_MEASUREMENT_ID,
 }: {
   GA_MEASUREMENT_ID: string
 }) => {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    const url = pathname + searchParams.toString()
-
-    pageview(GA_MEASUREMENT_ID, url)
-  }, [pathname, searchParams, GA_MEASUREMENT_ID])
-
   return (
     <>
       <Script
@@ -43,12 +32,9 @@ export const GoogleAnalytics = ({
                 `,
         }}
       />
+      <Suspense fallback={null}>
+        <GoogleAnalyticsTrackPv GA_MEASUREMENT_ID={GA_MEASUREMENT_ID} />
+      </Suspense>
     </>
   )
 }
-
-const pageview = (GA_MEASUREMENT_ID: string, url: string) => {
-  window.gtag('config', GA_MEASUREMENT_ID, {
-    page_path: url,
-  })
-}
diff --git a/apps/tlink-web/app/layout.tsx b/apps/tlink-web/app/layout.tsx
@@ -5,7 +5,6 @@ import { TailwindIndicator } from '@/components/tailwind-indicator'
 import '@rainbow-me/rainbowkit/styles.css'
 import type { Metadata } from 'next'
 import localFont from 'next/font/local'
-import { Suspense } from 'react'
 import './globals.css'
 
 const geistSans = localFont({
@@ -33,9 +32,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <Suspense fallback={null}>
-          <GoogleAnalytics GA_MEASUREMENT_ID="G-3576R4G248" />
-        </Suspense>
+        <GoogleAnalytics GA_MEASUREMENT_ID="G-3576R4G248" />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
diff --git a/apps/tlink-web/components/cookie-banner.tsx b/apps/tlink-web/components/cookie-banner.tsx
@@ -13,9 +13,11 @@ const AGREE_COOKIE_KEY = 'sl-cookie'
 
 const initGoogleAnalytics = (cookieConsent: boolean = true) => {
   const newValue = cookieConsent ? 'granted' : 'denied'
-  window.gtag('consent', 'update', {
-    analytics_storage: newValue,
-  })
+  if (typeof window !== 'undefined' && window.gtag) {
+    window.gtag('consent', 'update', {
+      analytics_storage: newValue,
+    })
+  }
 }
 
 export const CookieBanner = () => {
