feat: enable GTM script

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:" : ""};

studio/src/components/layout/analytics/gtm-script.tsx

@@ -1,11 +1,17 @@
-import Script from "next/script";
+export interface GtmScriptProps {
+  gtmId: string | undefined;
+};
 
-export function GtmScript() {
-  const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
+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 +20,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 +55,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;
   }
 

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 />