fix(analytics): configure Google Analytics from environment variables

josegomez-dev · josegomez-dev · commit 20b3a0771d39 · 2025-11-12T00:07:05.000-06:00
- Add analytics environment variables to client-env schema
- Update config.ts to read analytics settings from environment variables
- Add Google Analytics script to layout when enabled
- Fix analytics config to properly use NEXT_PUBLIC_ANALYTICS_ENABLED and NEXT_PUBLIC_ANALYTICS_ID
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 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';
@@ -91,6 +92,23 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang='en' className='scroll-smooth'>
       <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>
+          </>
+        )}
         <RootProviders>{children}</RootProviders>
       </body>
     </html>
diff --git a/lib/config.ts b/lib/config.ts
@@ -71,13 +71,13 @@ export const config = {
     sessionSecret: process.env.SESSION_SECRET,
   },
 
-  // Analytics & Monitoring (using defaults since not in client-env)
+  // Analytics & Monitoring
   analytics: {
-    enabled: false,
-    id: '',
+    enabled: clientEnv.NEXT_PUBLIC_ANALYTICS_ENABLED,
+    id: clientEnv.NEXT_PUBLIC_ANALYTICS_ID,
     errorReporting: {
-      enabled: false,
-      endpoint: '',
+      enabled: clientEnv.NEXT_PUBLIC_ERROR_REPORTING_ENABLED,
+      endpoint: clientEnv.NEXT_PUBLIC_ERROR_REPORTING_API_KEY,
     },
   },
 
diff --git a/lib/utils/client-env.ts b/lib/utils/client-env.ts
@@ -42,6 +42,20 @@ const clientEnvSchema = z.object({
   NEXT_PUBLIC_EMAILJS_SERVICE_ID: z.string().optional(),
   NEXT_PUBLIC_EMAILJS_TEMPLATE_ID: z.string().optional(),
   NEXT_PUBLIC_EMAILJS_PUBLIC_KEY: z.string().optional(),
+
+  // Analytics Configuration
+  NEXT_PUBLIC_ANALYTICS_ENABLED: z
+    .string()
+    .optional()
+    .transform(val => val === 'true')
+    .default(() => false),
+  NEXT_PUBLIC_ANALYTICS_ID: z.string().optional().default(''),
+  NEXT_PUBLIC_ERROR_REPORTING_ENABLED: z
+    .string()
+    .optional()
+    .transform(val => val === 'true')
+    .default(() => false),
+  NEXT_PUBLIC_ERROR_REPORTING_API_KEY: z.string().optional().default(''),
 });
 
 // Parse and validate client-side environment variables
