feat: add Google Tag Manager to marketing website

apps/web-roo-code/src/app/shared/AgentLandingContent.tsx

@@ -19,7 +19,6 @@ import { Button } from "@/components/ui"
 import { AnimatedBackground } from "@/components/homepage"
 import { AgentCarousel } from "@/components/reviewer/agent-carousel"
 import { EXTERNAL_LINKS } from "@/lib/constants"
-import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads"
 import { type AgentPageContent, type IconName } from "./agent-page-content"
 
 /**
@@ -97,7 +96,6 @@ export function AgentLandingContent({ content }: { content: AgentPageContent })
 										href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
 										target="_blank"
 										rel="noopener noreferrer"
-										onClick={trackGoogleAdsConversion}
 										className="flex w-full items-center justify-center">
 										{content.hero.cta.buttonText}
 										<ArrowRight className="ml-2" />
@@ -219,7 +217,6 @@ export function AgentLandingContent({ content }: { content: AgentPageContent })
 									href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
 									target="_blank"
 									rel="noopener noreferrer"
-									onClick={trackGoogleAdsConversion}
 									className="flex items-center justify-center">
 									{content.cta.buttonText}
 									<ArrowRight className="ml-2 h-4 w-4" />

apps/web-roo-code/src/components/providers/google-tag-manager-provider.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Script from "next/script"
+import { hasConsent, onConsentChange } from "@/lib/analytics/consent-manager"
+
+// Google Tag Manager Container ID
+const GTM_ID = "GTM-M2JZHV8N"
+
+/**
+ * Google Tag Manager Provider
+ * Loads GTM only after user consent is given, following GDPR requirements
+ */
+export function GoogleTagManagerProvider({ children }: { children: React.ReactNode }) {
+	const [shouldLoad, setShouldLoad] = useState(false)
+
+	useEffect(() => {
+		// Check initial consent status
+		if (hasConsent()) {
+			setShouldLoad(true)
+		}
+
+		// Listen for consent changes
+		const unsubscribe = onConsentChange((consented) => {
+			if (consented) {
+				setShouldLoad(true)
+			}
+		})
+
+		return unsubscribe
+	}, [])
+
+	return (
+		<>
+			{shouldLoad && (
+				<>
+					{/* Google Tag Manager Script */}
+					<Script
+						id="google-tag-manager"
+						strategy="afterInteractive"
+						dangerouslySetInnerHTML={{
+							__html: `
+								(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+								new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+								j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+								'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+								})(window,document,'script','dataLayer','${GTM_ID}');
+							`,
+						}}
+					/>
+					{/* Google Tag Manager (noscript) */}
+					<noscript>
+						<iframe
+							src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+							height="0"
+							width="0"
+							style={{ display: "none", visibility: "hidden" }}
+						/>
+					</noscript>
+				</>
+			)}
+			{children}
+		</>
+	)
+}

apps/web-roo-code/src/components/providers/providers.tsx

@@ -3,21 +3,21 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ThemeProvider } from "next-themes"
 
+import { GoogleTagManagerProvider } from "./google-tag-manager-provider"
 import { PostHogProvider } from "./posthog-provider"
-import { GoogleAnalyticsProvider } from "./google-analytics-provider"
 
 const queryClient = new QueryClient()
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<QueryClientProvider client={queryClient}>
-			<GoogleAnalyticsProvider>
+			<GoogleTagManagerProvider>
 				<PostHogProvider>
 					<ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
 						{children}
 					</ThemeProvider>
 				</PostHogProvider>
-			</GoogleAnalyticsProvider>
+			</GoogleTagManagerProvider>
 		</QueryClientProvider>
 	)
 }