fix(analytics): improve Google Analytics implementation with dedicated component

josegomez-dev · josegomez-dev · commit a51f2aeab9d5 · 2025-11-12T14:31:09.000-06:00
- Create dedicated GoogleAnalytics client component with better error handling
- Add debug logging and GA4 ID format validation
- Update layout to use new GoogleAnalytics component
- Improve analytics initialization and error messages
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import Script from 'next/script';
 import './globals.css';
 import { config } from '@/lib/config';
 import { suppressHydrationWarning } from '@/lib/utils/suppress-hydration';
 import { RootProviders } from './root';
+import { GoogleAnalytics } from '@/components/analytics/GoogleAnalytics';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -94,20 +94,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={inter.className} suppressHydrationWarning={true}>
         {/* Google Analytics */}
         {config.analytics.enabled && config.analytics.id && (
-          <>
-            <Script
-              src={`https://www.googletagmanager.com/gtag/js?id=${config.analytics.id}`}
-              strategy='afterInteractive'
-            />
-            <Script id='google-analytics' strategy='afterInteractive'>
-              {`
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-                gtag('config', '${config.analytics.id}');
-              `}
-            </Script>
-          </>
+          <GoogleAnalytics measurementId={config.analytics.id} />
         )}
         <RootProviders>{children}</RootProviders>
       </body>
diff --git a/components/analytics/GoogleAnalytics.tsx b/components/analytics/GoogleAnalytics.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+interface GoogleAnalyticsProps {
+  measurementId: string;
+}
+
+export function GoogleAnalytics({ measurementId }: GoogleAnalyticsProps) {
+  useEffect(() => {
+    // Debug logging (only in development)
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Google Analytics] Initializing with ID:', measurementId);
+      console.log('[Google Analytics] Script will load from:', `https://www.googletagmanager.com/gtag/js?id=${measurementId}`);
+    }
+  }, [measurementId]);
+
+  if (!measurementId || measurementId.trim() === '') {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('[Google Analytics] No measurement ID provided. Check your NEXT_PUBLIC_ANALYTICS_ID environment variable.');
+    }
+    return null;
+  }
+
+  // Validate GA4 ID format (should start with G-)
+  if (!measurementId.startsWith('G-')) {
+    console.warn(
+      '[Google Analytics] Invalid measurement ID format. GA4 IDs should start with "G-".',
+      'Current ID:', measurementId
+    );
+  }
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
+        strategy='afterInteractive'
+      />
+      <Script id='google-analytics' strategy='afterInteractive'>
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${measurementId}', {
+            page_path: window.location.pathname,
+          });
+        `}
+      </Script>
+    </>
+  );
+}
+
