feat(analytics): integrate Google Analytics 4 support with environment variable for measurement ID

Author: Snouzy

app/[locale]/layout.tsx

@@ -301,6 +301,24 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
           {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
           {/* @ts-ignore */}
           <meta name="impact-site-verification" value="e6afc3fc-0dcd-4625-a8cd-282991d40164" />
+
+          {/* Google Analytics 4 */}
+          {env.NEXT_PUBLIC_GA4_MEASUREMENT_ID && (
+            <>
+              <script async src={`https://www.googletagmanager.com/gtag/js?id=${env.NEXT_PUBLIC_GA4_MEASUREMENT_ID}`} />
+              <script
+                dangerouslySetInnerHTML={{
+                  __html: `
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){dataLayer.push(arguments);}
+                    gtag('js', new Date());
+                    gtag('config', '${env.NEXT_PUBLIC_GA4_MEASUREMENT_ID}');
+                  `,
+                }}
+              />
+            </>
+          )}
+
           {/* Structured Data */}
           <StructuredDataScript data={websiteStructuredData} />
           <StructuredDataScript data={organizationStructuredData} />

src/env.ts

@@ -95,6 +95,8 @@ export const env = createEnv({
     NEXT_PUBLIC_AD_PROVIDER: z.enum(["adsense", "ezoic"]).optional().default("adsense"),
     NEXT_PUBLIC_EZOIC_VERTICAL_LEFT_PLACEMENT_ID: z.string().optional(),
     NEXT_PUBLIC_EZOIC_VERTICAL_RIGHT_PLACEMENT_ID: z.string().optional(),
+    // GA4
+    NEXT_PUBLIC_GA4_MEASUREMENT_ID: z.string().optional(),
   },
 
   experimental__runtimeEnv: {
@@ -155,5 +157,6 @@ export const env = createEnv({
     NEXT_PUBLIC_AD_PROVIDER: process.env.NEXT_PUBLIC_AD_PROVIDER,
     NEXT_PUBLIC_EZOIC_VERTICAL_LEFT_PLACEMENT_ID: process.env.NEXT_PUBLIC_EZOIC_VERTICAL_LEFT_PLACEMENT_ID,
     NEXT_PUBLIC_EZOIC_VERTICAL_RIGHT_PLACEMENT_ID: process.env.NEXT_PUBLIC_EZOIC_VERTICAL_RIGHT_PLACEMENT_ID,
+    NEXT_PUBLIC_GA4_MEASUREMENT_ID: process.env.NEXT_PUBLIC_GA4_MEASUREMENT_ID,
   },
 });