fix(analytics): improve analytics configuration and environment variable parsing

josegomez-dev · josegomez-dev · commit fbc0e1466fd2 · 2025-11-13T09:36:03.000-06:00
- Make NEXT_PUBLIC_ANALYTICS_ENABLED parsing case-insensitive (accepts true/True/TRUE/1)
- Improve Google Analytics component validation and error messages
- Add debug logging to help troubleshoot analytics in production
- Update env.example with clear documentation for GA4 Measurement ID format
- Fix analytics boolean parsing to be more robust and user-friendly
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -89,6 +89,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     suppressHydrationWarning();
   }
 
+  // Debug analytics configuration
+  if (config.development.isDevelopment) {
+    console.log('[Analytics Config]', {
+      enabled: config.analytics.enabled,
+      id: config.analytics.id,
+      hasId: !!config.analytics.id,
+      willRender: config.analytics.enabled && !!config.analytics.id,
+    });
+  }
+
   return (
     <html lang='en' className='scroll-smooth'>
       <body className={inter.className} suppressHydrationWarning={true}>
diff --git a/components/analytics/GoogleAnalytics.tsx b/components/analytics/GoogleAnalytics.tsx
@@ -9,25 +9,25 @@ interface GoogleAnalyticsProps {
 
 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}`);
-    }
+    // Debug logging (always log for troubleshooting)
+    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.');
-    }
+    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-)
+  // GA4 measurement IDs follow the format: G-XXXXXXXXXX (alphanumeric after G-)
+  // Note: The validation is a warning only - Google Analytics will handle invalid IDs
   if (!measurementId.startsWith('G-')) {
     console.warn(
-      '[Google Analytics] Invalid measurement ID format. GA4 IDs should start with "G-".',
-      'Current ID:', measurementId
+      '[Google Analytics] Warning: Measurement ID does not start with "G-".',
+      'GA4 measurement IDs should start with "G-" (e.g., G-XXXXXXXXXX).',
+      'Current ID:', measurementId,
+      'If this is a valid GA4 ID from your Google Analytics dashboard, you can ignore this warning.'
     );
   }
 
diff --git a/env.example b/env.example
@@ -120,8 +120,15 @@ NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key_here
 # ANALYTICS & MONITORING
 # ============================================================================
 
+# Enable Google Analytics 4 (GA4) tracking
+# Set to "true" to enable analytics tracking
 NEXT_PUBLIC_ANALYTICS_ENABLED=false
-NEXT_PUBLIC_ANALYTICS_ID=G-nexus-55966
+
+# Google Analytics 4 Measurement ID
+# Format: G-XXXXXXXXXX (e.g., G-ABC123XYZ)
+# Find this in: Google Analytics → Admin → Data Streams → Your Stream → Measurement ID
+# IMPORTANT: Use your actual GA4 Measurement ID from Google Analytics dashboard
+NEXT_PUBLIC_ANALYTICS_ID=G-XXXXXXXXXX
 NEXT_PUBLIC_ERROR_REPORTING_ENABLED=true
 NEXT_PUBLIC_ERROR_REPORTING_API_KEY=your_error_reporting_api_key_here
 
diff --git a/lib/utils/client-env.ts b/lib/utils/client-env.ts
@@ -47,13 +47,13 @@ const clientEnvSchema = z.object({
   NEXT_PUBLIC_ANALYTICS_ENABLED: z
     .string()
     .optional()
-    .transform(val => val === 'true')
+    .transform(val => val?.toLowerCase() === 'true' || val === '1')
     .default(() => false),
   NEXT_PUBLIC_ANALYTICS_ID: z.string().optional().default(''),
   NEXT_PUBLIC_ERROR_REPORTING_ENABLED: z
     .string()
     .optional()
-    .transform(val => val === 'true')
+    .transform(val => val?.toLowerCase() === 'true' || val === '1')
     .default(() => false),
   NEXT_PUBLIC_ERROR_REPORTING_API_KEY: z.string().optional().default(''),
 });
