From b1948af9ddde7228963794a4c767077c0d32b9e7 Mon Sep 17 00:00:00 2001
From: Nurul Sundarani <sundarani@prisma.io>
Date: Thu, 18 Jun 2026 21:31:26 +0530
Subject: [PATCH] fix(analytics): load GTM via external script so CookieYes can
 activate it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The GTM bootstrap was an inline `type="text/plain"` script. CookieYes only
reliably re-activates external `src` scripts on consent — inline blocked
scripts are left inert and never execute, so GTM never loaded and GA4 received
no data even after visitors accepted analytics cookies.

Split the loader into:
- an inline bootstrap that always runs (dataLayer init + site_section +
  gtm.start) — sets no cookies and makes no network requests, safe pre-consent;
- the GTM library loaded as an external, consent-gated
  `<script type="text/plain" data-cookieyes="cookieyes-analytics"
   src="…/gtm.js?id=GTM-KRTRXXQ6">`, matching the working Tolt/PromptWatch
  pattern that CookieYes does activate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../ui/src/components/google-tag-manager.tsx  | 57 +++++++++++--------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/ui/src/components/google-tag-manager.tsx b/packages/ui/src/components/google-tag-manager.tsx
index d70c52876a..b98bad5ce8 100644
--- a/packages/ui/src/components/google-tag-manager.tsx
+++ b/packages/ui/src/components/google-tag-manager.tsx
@@ -1,18 +1,26 @@
 /**
  * Consent-gated Google Tag Manager loader.
  *
- * Renders the GTM bootstrap as an inert `type="text/plain"` script tagged for
- * CookieYes' analytics category. CookieYes activates it only after the visitor
- * grants analytics consent — mirroring the pattern already used across the apps
- * for Tolt and the previous GTM container. Before activation nothing loads, so
- * no Google network calls happen without consent (GDPR/ePrivacy compliant).
+ * Split into two parts on purpose:
  *
- * The same container (one per the prisma.io domain) is used by every zone; each
- * zone passes its `section` so all hits carry a `site_section` dimension and can
- * be segmented (website vs blog vs docs) in GA4.
+ *  1. An inline bootstrap that always runs. It only initialises `dataLayer`
+ *     (a plain in-memory array) and pushes the page section + GTM start event.
+ *     This sets no cookies and makes no network requests, so it is safe to run
+ *     before consent.
+ *  2. The GTM library itself, loaded as an EXTERNAL `src` script tagged for
+ *     CookieYes' analytics category. CookieYes only reliably re-activates
+ *     external `src` scripts after consent — an inline `type="text/plain"` GTM
+ *     bootstrap is left inert and never executes, so it must NOT be used here.
+ *     This mirrors the working external-`src` pattern used for Tolt/PromptWatch.
+ *     See https://www.cookieyes.com/documentation/implement-prior-consent-using-cookieyes/
  *
- * Note: no `<noscript>` iframe fallback is rendered on purpose — a plain iframe
- * would load GTM regardless of consent and break the consent gate.
+ * Nothing contacts Google until CookieYes activates the external script once the
+ * visitor grants analytics consent (GDPR/ePrivacy compliant). No `<noscript>`
+ * iframe fallback is rendered, as it would load GTM regardless of consent.
+ *
+ * One container serves the whole prisma.io domain; each zone passes its
+ * `section` so every hit carries a `site_section` dimension and can be segmented
+ * (website vs blog vs docs) in GA4.
  */
 
 import type { SiteSection } from "../lib/analytics";
@@ -26,22 +34,25 @@ type GoogleTagManagerProps = {
 };
 
 export function GoogleTagManager({ section }: GoogleTagManagerProps) {
-  const html = `
+  const bootstrap = `
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({ site_section: ${JSON.stringify(section)} });
-(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_CONTAINER_ID}');`.trim();
+window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });`.trim();
 
   return (
-    <script
-      id="gtm-loader"
-      type="text/plain"
-      data-cookieyes="cookieyes-analytics"
-      data-cookieyes-category="analytics"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <>
+      {/* Always runs: dataLayer setup only — no cookies, no network requests. */}
+      <script id="gtm-datalayer" dangerouslySetInnerHTML={{ __html: bootstrap }} />
+      {/* Consent-gated: CookieYes activates this external script after analytics
+          consent, which then loads the container and starts firing tags. */}
+      <script
+        id="gtm-loader"
+        type="text/plain"
+        data-cookieyes="cookieyes-analytics"
+        data-cookieyes-category="analytics"
+        async
+        src={`https://www.googletagmanager.com/gtm.js?id=${GTM_CONTAINER_ID}`}
+      />
+    </>
   );
 }