Add Google Tag Manager integration with consent awareness (#406)

Author: dleffel

src/components/GTMProvider/index.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import { hasConsent, onConsentChange } from '../../lib/analytics/consent-manager';
+
+// Google Tag Manager ID - hardcoded for production
+const GTM_ID = 'GTM-M2JZHV8N';
+
+declare global {
+  interface Window {
+    dataLayer?: any[];
+    google_tag_manager?: any;
+  }
+}
+
+export function GTMProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    // Check initial consent status
+    const consentGiven = hasConsent();
+
+    if (consentGiven) {
+      enableGTM();
+    }
+
+    // Listen for consent changes
+    const cleanup = onConsentChange((granted) => {
+      if (granted) {
+        enableGTM();
+      } else {
+        disableGTM();
+      }
+    });
+
+    return () => {
+      cleanup();
+      // Clean up GTM scripts on unmount
+      removeGTMScripts();
+    };
+  }, []);
+
+  const enableGTM = () => {
+    if (typeof window === 'undefined') return;
+
+    // Check if GTM is already loaded
+    if (document.getElementById('gtm-script')) {
+      return;
+    }
+
+    // Initialize dataLayer
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      'gtm.start': new Date().getTime(),
+      event: 'gtm.js'
+    });
+
+    // Inject GTM script in head
+    const script = document.createElement('script');
+    script.id = 'gtm-script';
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`;
+    
+    const firstScript = document.getElementsByTagName('script')[0];
+    if (firstScript && firstScript.parentNode) {
+      firstScript.parentNode.insertBefore(script, firstScript);
+    } else {
+      document.head.appendChild(script);
+    }
+
+    // Inject noscript iframe in body
+    const noscript = document.createElement('noscript');
+    noscript.id = 'gtm-noscript';
+    const iframe = document.createElement('iframe');
+    iframe.src = `https://www.googletagmanager.com/ns.html?id=${GTM_ID}`;
+    iframe.height = '0';
+    iframe.width = '0';
+    iframe.style.display = 'none';
+    iframe.style.visibility = 'hidden';
+    noscript.appendChild(iframe);
+    
+    document.body.insertBefore(noscript, document.body.firstChild);
+  };
+
+  const disableGTM = () => {
+    if (typeof window === 'undefined') return;
+    
+    // Remove GTM scripts
+    removeGTMScripts();
+    
+    // Clear dataLayer
+    if (window.dataLayer) {
+      window.dataLayer = [];
+    }
+  };
+
+  const removeGTMScripts = () => {
+    // Remove GTM script
+    const script = document.getElementById('gtm-script');
+    if (script) {
+      script.remove();
+    }
+
+    // Remove noscript
+    const noscript = document.getElementById('gtm-noscript');
+    if (noscript) {
+      noscript.remove();
+    }
+  };
+
+  return <>{children}</>;
+}

src/theme/Layout/index.js

@@ -2,17 +2,20 @@ import React from 'react';
 import OriginalLayout from '@theme-original/Layout';
 import { CookieConsent } from '../../components/CookieConsent';
 import { PostHogProvider } from '../../components/PostHogProvider';
+import { GTMProvider } from '../../components/GTMProvider';
 import { IntercomProvider } from '../../components/IntercomProvider';
 import { AnnouncementBanner } from '../../components/AnnouncementBanner';
 
 export default function Layout(props) {
   return (
     <PostHogProvider>
-      <IntercomProvider>
-        <AnnouncementBanner />
-        <OriginalLayout {...props} />
-        <CookieConsent />
-      </IntercomProvider>
+      <GTMProvider>
+        <IntercomProvider>
+          <AnnouncementBanner />
+          <OriginalLayout {...props} />
+          <CookieConsent />
+        </IntercomProvider>
+      </GTMProvider>
     </PostHogProvider>
   );
 }