feat(analytics): add client-side gtag.js to root layout (#60)

askov · web-flow · commit f3c9982827c0 · 2026-05-25T15:27:43.000+02:00
Render the GA4 gtag.js snippet from app/layout.tsx so page views and
client interactions land in the same GA4 property the server-side
Measurement Protocol code already writes to. Complements the
server-side trackEvent path in lib/analytics.ts — together they cover
both surface areas (page views from the client, airdrop outcomes from
the API route) without double-counting.

Uses next/script with strategy="afterInteractive" rather than raw
&lt;script&gt; tags so Next.js manages load timing and dedup across
navigations.

Driven by NEXT_PUBLIC_GA4_MEASUREMENT_ID. When the var is unset (e.g.
local dev without analytics, or any environment we don't want tracking
on), the GA4 &lt;Script&gt; tags don't render at all. The ID is public by
design — every visitor receives it in the gtag.js src URL — so the
NEXT_PUBLIC_ prefix is safe.

Document the new env var in .env.example with a note to keep it in
sync with the existing server-side GA4_MEASUREMENT_ID (same GA4
property), and add it to ProcessEnv in types.d.ts.
diff --git a/.env.example b/.env.example
@@ -116,3 +116,11 @@ GA4_MEASUREMENT_ID=
 # Protocol API secrets. Leaking it lets anyone forge events into your GA4
 # property. Required only if GA4_MEASUREMENT_ID is set.
 GA4_API_SECRET=
+
+# [PUBLIC] [optional] GA4 Measurement ID for client-side gtag.js page-view
+# tracking. Format: "G-XXXXXXXXXX". Inlined into the bundle at build time
+# via the NEXT_PUBLIC_ prefix — served to every visitor in the gtag.js
+# script src, so not sensitive. When unset, app/layout.tsx skips rendering
+# the GA4 <Script> tags entirely. Typically the same value as
+# GA4_MEASUREMENT_ID (same GA4 property) — keep them in sync.
+NEXT_PUBLIC_GA4_MEASUREMENT_ID=
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import Script from "next/script";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/ui/footer";
 import "./globals.css";
@@ -26,6 +27,8 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const gaId = process.env.NEXT_PUBLIC_GA4_MEASUREMENT_ID;
+
   return (
     <html lang="en">
       <body className={`${inter.className}`}>
@@ -36,6 +39,23 @@ export default function RootLayout({
         </section>
 
         <Footer />
+
+        {gaId && (
+          <>
+            <Script
+              src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+              strategy="afterInteractive"
+            />
+            <Script id="ga4-init" strategy="afterInteractive">
+              {`
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gaId}');
+              `}
+            </Script>
+          </>
+        )}
       </body>
     </html>
   );
diff --git a/types.d.ts b/types.d.ts
@@ -43,6 +43,14 @@ declare namespace NodeJS {
     GA4_MEASUREMENT_ID: string;
     GA4_API_SECRET: string;
 
+    /**
+     * Client-side analytics (gtag.js). Optional — the GA4 <Script>
+     * tags in app/layout.tsx render only when this is set. Public by
+     * design (served to every visitor in the script src), so safe to
+     * expose with the NEXT_PUBLIC_ prefix.
+     */
+    NEXT_PUBLIC_GA4_MEASUREMENT_ID: string;
+
     /**
      * Auth related variables
      */
