From fd3bae932614232662a38f394ccd153e673cacda Mon Sep 17 00:00:00 2001
From: Wilson Rivera <wilson@wundergraph.com>
Date: Mon, 10 Nov 2025 11:15:08 -0500
Subject: [PATCH 1/2] feat: enable GTM script

---
 studio/next.config.mjs                        | 17 +++++++++--
 .../layout/analytics/gtm-script.tsx           | 29 +++++++++++++------
 studio/src/pages/_document.tsx                |  8 +++--
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/studio/next.config.mjs b/studio/next.config.mjs
index 0ddbd8c7ce..96e44e03ae 100644
--- a/studio/next.config.mjs
+++ b/studio/next.config.mjs
@@ -3,6 +3,7 @@ import { withSentryConfig } from "@sentry/nextjs";
 import pkg from "./package.json" with { type: "json" };
 
 const isPreview = process.env.VERCEL_ENV === "preview";
+const isProduction = process.env.NODE_ENV === "production";
 // Allow it only for development once https://github.com/vercel/next.js/issues/23587 is fixed
 const allowUnsafeEval = true;
 // Report CSP violations to the console instead of blocking them
@@ -54,19 +55,29 @@ const lightweightCspHeader = `
   object-src 'none';
   base-uri 'self';
   font-src 'self' data:;
-  frame-src 'self' https://js.stripe.com https://hooks.stripe.com ${
+  frame-src 'self' https://js.stripe.com https://hooks.stripe.com https://www.googletagmanager.com ${
     isPreview ? "https://vercel.live/ https://vercel.com" : ""
   };
   img-src 'self'${
     isPreview
       ? " https://vercel.live/ https://vercel.com *.pusher.com/ data: blob:"
       : ""
-  } *.ads.linkedin.com;
+  } *.ads.linkedin.com *.google.com;
    script-src 'report-sample' 'self' 'unsafe-inline' ${
      allowUnsafeEval ? "'unsafe-eval'" : ""
    } https://*.wundergraph.com https://js.stripe.com https://maps.googleapis.com https://plausible.io https://wundergraph.com https://static.reo.dev${
      isPreview ? " https://vercel.live https://vercel.com" : ""
-   } https://www.googletagmanager.com https://snap.licdn.com;
+   } ${
+     isProduction
+       ? [
+           "https://www.googletagmanager.com",
+           "https://snap.licdn.com",
+           "https://cmp.osano.com",
+           "https://googleads.g.doubleclick.net",
+           "https://*.clarity.ms",
+         ].join(" ")
+       : ""
+   };
   manifest-src 'self';
   media-src 'self';
   worker-src 'self' ${isSentryFeatureReplayEnabled ? "blob:" : ""};
diff --git a/studio/src/components/layout/analytics/gtm-script.tsx b/studio/src/components/layout/analytics/gtm-script.tsx
index 23fb73b72f..efce141a54 100644
--- a/studio/src/components/layout/analytics/gtm-script.tsx
+++ b/studio/src/components/layout/analytics/gtm-script.tsx
@@ -1,11 +1,19 @@
 import Script from "next/script";
 
-export function GtmScript() {
-  const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
+export interface GtmScriptProps {
+  gtmId: string | undefined;
+};
+
+export function GtmScript({ gtmId }: GtmScriptProps) {
+  if (!gtmId) {
+    return null;
+  }
 
   return (
     <>
-      <Script id="gtm" strategy="afterInteractive">{`
+      <script
+        id="gtm"
+        dangerouslySetInnerHTML={{__html: `
         (function(w,d,s,l,i){
           w[l]=w[l]||[];
           w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
@@ -14,9 +22,13 @@ export function GtmScript() {
           j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
           f.parentNode.insertBefore(j,f);
         })(window,document,'script','dataLayer',${JSON.stringify(gtmId)});
-      `}</Script>
+      `
+      }}
+      />
 
-      <Script id="gtm-consent" strategy="afterInteractive">{`
+      <script
+        id="gtm-consent"
+        dangerouslySetInnerHTML={{ __html: `
 (function(){
   function updateConsentFromOsano() {
     const consent = window.Osano && Osano.cm && Osano.cm.getConsent ? Osano.cm.getConsent() : null;
@@ -45,14 +57,13 @@ export function GtmScript() {
     window.addEventListener('osano-cm-initialized', onOsanoReady, { once: true });
   }
 })();
-      `}</Script>
+      `}}/>
     </>
   );
 }
 
-export function GtmNoScript() {
-  const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
-  if (!gtmId || process.env.NODE_ENV !== 'production') {
+export function GtmNoScript({ gtmId }: GtmScriptProps) {
+  if (!gtmId) {
     return null;
   }
 
diff --git a/studio/src/pages/_document.tsx b/studio/src/pages/_document.tsx
index 5bb944d940..7ca683c3c2 100644
--- a/studio/src/pages/_document.tsx
+++ b/studio/src/pages/_document.tsx
@@ -35,7 +35,8 @@ export default function Document() {
             )}
 
             {gtmId && (
-              <Script id="gtm-default" strategy="beforeInteractive">{`window.dataLayer = window.dataLayer || [];
+              <>
+                <Script id="gtm-default" strategy="beforeInteractive">{`window.dataLayer = window.dataLayer || [];
 function gtag(){ dataLayer.push(arguments); }
 gtag('consent', 'default', {
   ad_storage: 'denied',
@@ -45,10 +46,11 @@ gtag('consent', 'default', {
   functionality_storage: 'granted', // essentials
   security_storage: 'granted'
 });`}</Script>
+                <GtmScript gtmId={gtmId} />
+              </>
             )}
           </>
         )}
-        {isProduction && <GtmScript />}
 
         <link
           rel="apple-touch-icon"
@@ -128,7 +130,7 @@ gtag('consent', 'default', {
         <meta name="theme-color" content="#ffffff" />
       </Head>
       <body>
-        {isProduction && <GtmNoScript />}
+        {isProduction && <GtmNoScript gtmId={gtmId} />}
         <Main />
         <NextScript />
 

From 1a087f744ba1de465fe320fbfb09940dfd9e5c2c Mon Sep 17 00:00:00 2001
From: Wilson Rivera <wilson@wundergraph.com>
Date: Mon, 10 Nov 2025 12:04:54 -0500
Subject: [PATCH 2/2] chore: remove unused import

---
 studio/src/components/layout/analytics/gtm-script.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/studio/src/components/layout/analytics/gtm-script.tsx b/studio/src/components/layout/analytics/gtm-script.tsx
index efce141a54..eaf2919348 100644
--- a/studio/src/components/layout/analytics/gtm-script.tsx
+++ b/studio/src/components/layout/analytics/gtm-script.tsx
@@ -1,5 +1,3 @@
-import Script from "next/script";
-
 export interface GtmScriptProps {
   gtmId: string | undefined;
 };