Fix: Google Analytics implementation with environment variables

.env.example

@@ -8,5 +8,5 @@ NEXT_PUBLIC_APP_URL=https://btc.eh-aye.net
 # API endpoints (if needed)
 # NEXT_PUBLIC_API_URL=https://api.eh-aye.net
 
-# Analytics (optional)
-# NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
+# Google Analytics (optional)
+# NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

src/components/GoogleAnalytics.tsx

@@ -0,0 +1,28 @@
+import Script from "next/script";
+
+export function GoogleAnalytics() {
+  const gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+
+  if (!gaMeasurementId) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Google tag (gtag.js) */}
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaMeasurementId}');
+        `}
+      </Script>
+    </>
+  );
+}

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import type { AppProps } from "next/app";
 import "../styles/globals.css";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@/providers/theme-provider";
+import { GoogleAnalytics } from "@/components/GoogleAnalytics";
 
 export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -35,6 +36,7 @@ export default function App({ Component, pageProps }: AppProps) {
       enableSystem
       disableTransitionOnChange
     >
+      <GoogleAnalytics />
       <Component {...pageProps} />
       <Toaster />
     </ThemeProvider>