feat(booking): consent-gate GA4/GTM behind a cookie banner

Analytics now loads only after the visitor accepts. v1 of the cookie-consent
work (Part A):

- book.html head: GA4/GTM script loads are no longer auto-injected. The tag IDs
  go into window.__CALNODE_TRACK and a __calnodeLoadTracking() loader; nothing
  external loads (and no _ga* cookies are set) until consent.
- Cookie banner (shown only when GTM/GA4 is configured): Accept -> load tracking
  + store consent; Decline -> store + clear any _ga/_gid/_gat cookies. Choice is
  a 180-day first-party calnode_consent cookie ({a,v,t}, versioned).
- "Cookie settings" footer link reopens the banner (withdraw/change).
- ga4Convert now fires only once tracking is consented + loaded; its three call
  sites are typeof-guarded (it's no longer defined when tracking is off).
- Removed the GTM <noscript> fallback — it would load GTM without consent.
- Banner styles in booking.css (shared booking surface).

Region targeting + granular categories are deferred to v2/v3 (consent stored as
a category map so they slot in without re-architecting).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: shockalotti

internal/handler/templates/book.html

@@ -5,30 +5,33 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <title>{{.Name}}</title>
-{{if .GTMContainerID}}
-<!-- Google Tag Manager (native — loaded from the configured container ID) -->
-<script>(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','{{.GTMContainerID}}');</script>
-{{end}}
-{{if .GA4MeasurementID}}
-<!-- Google Analytics 4 (native — gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{.GA4MeasurementID}}"></script>
-<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','{{.GA4MeasurementID}}');</script>
-{{end}}
+{{if or .GTMContainerID .GA4MeasurementID}}
+<!-- Analytics (GA4/GTM) is CONSENT-GATED: the Google scripts load only after the visitor accepts
+     analytics cookies via the banner near </body>. Nothing external loads, and no analytics
+     cookies are set, before then. -->
 <script>
-  // Global GA4 conversion helper — usable from both the booking script and the assistant
-  // script. For GA4 used DIRECTLY (gtag.js, no GTM), GA4 won't treat our custom dataLayer event
-  // as a conversion, so emit a native purchase/lead event. No-op when GA4 isn't configured or
-  // gtag hasn't loaded. (GTM users trigger off the calnode_booking_confirmed dataLayer event.)
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){ dataLayer.push(arguments); }
   window.__CALNODE_GA4 = "{{.GA4MeasurementID}}";
+  window.__CALNODE_TRACK = { gtm: "{{.GTMContainerID}}", ga4: "{{.GA4MeasurementID}}", loaded: false };
+  // GA4 conversion — only fires once tracking has been consented to and loaded.
   window.ga4Convert = function (isPaid, value, currency, txnId) {
-    if (!window.__CALNODE_GA4 || typeof gtag !== 'function') return;
+    if (!window.__CALNODE_GA4 || !window.__CALNODE_TRACK.loaded) return;
     gtag('event', isPaid ? 'purchase' : 'generate_lead', {
       transaction_id: txnId || '',
       value: value || 0,
       currency: (currency || 'USD').toUpperCase()
     });
   };
+  // Injects the real GA4/GTM scripts. Called only on consent (banner Accept, or a stored prior
+  // Accept). Idempotent.
+  window.__calnodeLoadTracking = function () {
+    var t = window.__CALNODE_TRACK; if (!t || t.loaded) return; t.loaded = true;
+    if (t.gtm) { (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',t.gtm); }
+    if (t.ga4) { var s=document.createElement('script'); s.async=true; s.src='https://www.googletagmanager.com/gtag/js?id='+t.ga4; document.head.appendChild(s); gtag('js', new Date()); gtag('config', t.ga4); }
+  };
 </script>
+{{end}}
 {{.HeadHTML}}
 {{if .DataLayerEnabled}}
 <script>
@@ -106,7 +109,7 @@
 </style>
 </head>
 <body>
-{{if .GTMContainerID}}<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{.GTMContainerID}}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>{{end}}
+{{/* GTM <noscript> fallback intentionally omitted — it would load GTM without consent for no-JS visitors, bypassing the cookie gate. */}}
 
 {{if or .LogoURL .BusinessName}}
 <header style="text-align:center;padding:24px 16px 4px;">
@@ -282,6 +285,7 @@ <h3>Booking confirmed</h3>
 
 <footer class="powered-by">
   <a href="https://calnode.com" target="_blank" rel="noopener noreferrer">Calnode</a>
+  {{if or .GTMContainerID .GA4MeasurementID}}<button type="button" class="cookie-link" onclick="window.__calnodeOpenConsent && window.__calnodeOpenConsent()">Cookie settings</button>{{end}}
 </footer>
 
 <!-- Shared booking-calendar logic (booking-logic.js), inlined ahead of the page script -->
@@ -386,7 +390,7 @@ <h3>Booking confirmed</h3>
         transaction_id: params.get('session_id') || '',
       });
     }
-    ga4Convert(true, PRICE_CENTS / 100, CURRENCY, params.get('session_id'));
+    if (typeof ga4Convert === 'function') ga4Convert(true, PRICE_CENTS / 100, CURRENCY, params.get('session_id'));
   })();
 
   // ── Mobile step-flow ────────────────────────────────────────────────────────
@@ -686,7 +690,7 @@ <h3>Booking confirmed</h3>
           currency: (CURRENCY || 'usd').toUpperCase(),
         });
       }
-      ga4Convert(false, PRICE_CENTS / 100, CURRENCY, booked && booked.id);
+      if (typeof ga4Convert === 'function') ga4Convert(false, PRICE_CENTS / 100, CURRENCY, booked && booked.id);
 
       // Booking succeeded. Re-enable the button so a second booking attempt in the
       // same session (before the page is refreshed) isn't silently blocked by a
@@ -858,5 +862,51 @@ <h3>Booking confirmed</h3>
 }());
 </script>
 {{end}}
+{{if or .GTMContainerID .GA4MeasurementID}}
+<div id="cookie-banner" class="cookie-banner" hidden role="dialog" aria-label="Cookie consent">
+  <p class="cookie-text">We use analytics cookies to understand how this booking page is used — set only if you accept.</p>
+  <div class="cookie-actions">
+    <button id="cookie-decline" type="button" class="cookie-btn">Decline</button>
+    <button id="cookie-accept" type="button" class="cookie-btn cookie-btn-primary">Accept</button>
+  </div>
+</div>
+<script>
+(function () {
+  var T = window.__CALNODE_TRACK;
+  if (!T || (!T.gtm && !T.ga4)) return;
+  var NAME = 'calnode_consent', VERSION = 1;
+  function read() {
+    var m = document.cookie.match(/(?:^|;\s*)calnode_consent=([^;]+)/);
+    if (!m) return null; try { return JSON.parse(decodeURIComponent(m[1])); } catch (e) { return null; }
+  }
+  function write(yes) {
+    var v = encodeURIComponent(JSON.stringify({ a: yes ? 1 : 0, v: VERSION, t: Date.now() }));
+    var exp = new Date(Date.now() + 1000 * 60 * 60 * 24 * 180).toUTCString();
+    document.cookie = NAME + '=' + v + '; expires=' + exp + '; path=/; SameSite=Lax' + (location.protocol === 'https:' ? '; Secure' : '');
+  }
+  function clearGA() {
+    document.cookie.split(';').forEach(function (c) {
+      var n = c.split('=')[0].trim();
+      if (/^_ga|^_gid|^_gat/.test(n)) {
+        document.cookie = n + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
+        document.cookie = n + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.' + location.hostname;
+      }
+    });
+  }
+  var banner = document.getElementById('cookie-banner');
+  window.__calnodeOpenConsent = function () { if (banner) banner.hidden = false; };
+  function hide() { if (banner) banner.hidden = true; }
+  var ok = document.getElementById('cookie-accept'), no = document.getElementById('cookie-decline');
+  if (ok) ok.onclick = function () { write(true); hide(); if (window.__calnodeLoadTracking) window.__calnodeLoadTracking(); };
+  if (no) no.onclick = function () { write(false); hide(); clearGA(); };
+  var c = read();
+  if (c && c.v === VERSION) {
+    if (c.a && window.__calnodeLoadTracking) window.__calnodeLoadTracking();
+  } else {
+    window.__calnodeOpenConsent();
+  }
+}());
+</script>
+{{end}}
 </body>
 </html>

internal/handler/templates/booking.css

@@ -325,3 +325,27 @@
   .asst-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; height: 72vh; }
   .asst-fab-btn { right: 12px; bottom: 12px; }
 }
+
+/* ── Cookie consent banner ─────────────────────────── */
+.cookie-banner {
+  position: fixed; z-index: 1000; left: 1rem; right: 1rem; bottom: 1rem;
+  max-width: 30rem; margin: 0 auto;
+  display: flex; flex-direction: column; gap: .75rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff;
+  box-shadow: 0 10px 30px rgba(0,0,0,.12);
+}
+.cookie-text { margin: 0; font-size: .8125rem; line-height: 1.5; color: #4b5563; }
+.cookie-actions { display: flex; justify-content: flex-end; gap: .5rem; }
+.cookie-btn {
+  cursor: pointer; padding: .4rem .9rem; font-size: .8125rem; font-weight: 500;
+  border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; color: #374151;
+}
+.cookie-btn:hover { background: #f9fafb; }
+.cookie-btn-primary { background: #111827; border-color: #111827; color: #fff; }
+.cookie-btn-primary:hover { background: #1f2937; }
+.cookie-link {
+  cursor: pointer; border: none; background: none; padding: 0; margin-left: .75rem;
+  font: inherit; font-size: inherit; color: inherit; opacity: .65; text-decoration: underline;
+}
+.cookie-link:hover { opacity: 1; }