feat: Add layout tag manager

Author: richiemcilroy

apps/web/app/Layout/GTag.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { buildEnv } from "@cap/env";
+import Script from "next/script";
+import { useId, useRef } from "react";
+
+declare global {
+	interface Window {
+		gtag: (command: string, ...args: unknown[]) => void;
+		dataLayer: unknown[];
+	}
+}
+
+export function GTag() {
+	const gtagInitialized = useRef(false);
+	const awId = buildEnv.NEXT_PUBLIC_GOOGLE_AW_ID;
+	const scriptId = useId();
+
+	if (!awId) {
+		return null;
+	}
+
+	if (typeof window !== "undefined" && !window.dataLayer) {
+		window.dataLayer = window.dataLayer || [];
+		window.gtag = function gtag() {
+			window.dataLayer.push(arguments);
+		};
+	}
+
+	return (
+		<>
+			<Script
+				id={scriptId}
+				strategy="afterInteractive"
+				src={`https://www.googletagmanager.com/gtag/js?id=${awId}`}
+				onLoad={() => {
+					if (
+						!gtagInitialized.current &&
+						typeof window !== "undefined" &&
+						window.gtag &&
+						awId
+					) {
+						window.gtag("js", new Date());
+						window.gtag("config", awId);
+						gtagInitialized.current = true;
+					}
+				}}
+			/>
+		</>
+	);
+}
+
+export function trackGoogleEvent(
+	action: string,
+	parameters?: Record<string, unknown>,
+) {
+	if (typeof window !== "undefined" && window.gtag) {
+		try {
+			window.gtag("event", action, parameters);
+		} catch (error) {
+			console.error(`Error tracking Google event ${action}:`, error);
+		}
+	}
+}

apps/web/app/layout.tsx

@@ -11,6 +11,7 @@ import { SonnerToaster } from "@/components/SonnerToastProvider";
 import { getBootstrapData } from "@/utils/getBootstrapData";
 import { PublicEnvContext } from "@/utils/public-env";
 import { AuthContextProvider } from "./Layout/AuthContext";
+import { GTag } from "./Layout/GTag";
 import { MetaPixel } from "./Layout/MetaPixel";
 import { PosthogIdentify } from "./Layout/PosthogIdentify";
 import { PurchaseTracker } from "./Layout/PurchaseTracker";
@@ -123,6 +124,7 @@ export default async function RootLayout({ children }: PropsWithChildren) {
 										<main className="w-full">{children}</main>
 										<PosthogIdentify />
 										<MetaPixel />
+										<GTag />
 										<PurchaseTracker />
 									</ReactQueryProvider>
 								</PublicEnvContext>

apps/web/components/pages/_components/ComparePlans.tsx

@@ -10,9 +10,9 @@ import { toast } from "sonner";
 import { useAuthContext } from "@/app/Layout/AuthContext";
 import {
 	CommercialArt,
-	CommercialArtRef,
+	type CommercialArtRef,
 } from "../HomePage/Pricing/CommercialArt";
-import { ProArt, ProArtRef } from "../HomePage/Pricing/ProArt";
+import { ProArt, type ProArtRef } from "../HomePage/Pricing/ProArt";
 
 const COLUMN_WIDTH = "min-w-[200px]";
 

packages/env/build.ts

@@ -11,6 +11,7 @@ export const buildEnv = createEnv({
 		NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
 		NEXT_PUBLIC_POSTHOG_HOST: z.string().optional(),
 		NEXT_PUBLIC_META_PIXEL_ID: z.string().optional(),
+		NEXT_PUBLIC_GOOGLE_AW_ID: z.string().optional(),
 		NEXT_PUBLIC_WEB_URL: z.string(),
 		NEXT_PUBLIC_CAP_AWS_BUCKET: z.string(),
 		NEXT_PUBLIC_CAP_AWS_REGION: z.string(),
@@ -23,6 +24,7 @@ export const buildEnv = createEnv({
 		NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
 		NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
 		NEXT_PUBLIC_META_PIXEL_ID: process.env.NEXT_PUBLIC_META_PIXEL_ID,
+		NEXT_PUBLIC_GOOGLE_AW_ID: process.env.NEXT_PUBLIC_GOOGLE_AW_ID,
 		NEXT_PUBLIC_WEB_URL: process.env.WEB_URL ?? process.env.NEXT_PUBLIC_WEB_URL,
 		NEXT_PUBLIC_CAP_AWS_BUCKET:
 			process.env.CAP_AWS_BUCKET ?? process.env.NEXT_PUBLIC_CAP_AWS_BUCKET,