keystone-design-bootstrap 1.0.76 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/lib/server-api.ts

@@ -81,6 +81,8 @@ export function getMetaPixelId(adsConfig: { meta_pixel_id?: string } | null | un
 export type AnalyticsConfig = {
   /** PostHog project API key — platform-wide, from POSTHOG_API_KEY env var on the Rails server. */
   posthog_api_key?: string;
+  /** Per-site GTM container ID (e.g. GTM-ABC123), provisioned by Keystone. */
+  gtm_container_public_id?: string;
   /**
    * Environment identifier from KEYSTONE_ENV on the Rails server (e.g. "production", "staging",
    * "development"). Registered as a PostHog super property on every event so the sync job can
@@ -102,6 +104,13 @@ export function getPostHogApiKey(analyticsConfig: AnalyticsConfig | null | undef
   return str !== '' && str !== 'null' ? str : null;
 }
 
+/** Extract GTM container ID from analytics config for use with <GoogleTagManager containerId={...} />. */
+export function getGtmContainerPublicId(analyticsConfig: AnalyticsConfig | null | undefined): string | null {
+  const value = analyticsConfig?.gtm_container_public_id;
+  const str = value != null && value !== '' ? String(value).trim() : '';
+  return str !== '' && str !== 'null' && /^GTM-[A-Z0-9]+$/i.test(str) ? str : null;
+}
+
 /** Extract environment string from analytics config for use with <PostHogProvider environment={...} />. */
 export function getKeystoneEnvironment(analyticsConfig: AnalyticsConfig | null | undefined): string {
   return analyticsConfig?.environment?.trim() || 'development';

package/src/next/layouts/root-layout.tsx

@@ -3,7 +3,13 @@ import type { Metadata } from 'next';
 
 import { HeaderNavigation, FooterHome } from '../../design_system/sections';
 import { ThemeProvider } from '../../contexts';
-import { MetaPixel, MetaPixelTracker, PostHogProvider, KeystoneAnalyticsTracker } from '../../tracking';
+import {
+  MetaPixel,
+  MetaPixelTracker,
+  PostHogProvider,
+  KeystoneAnalyticsTracker,
+  GoogleTagManager,
+} from '../../tracking';
 import { ChatWidget } from '../../design_system/components/ChatWidget';
 import { FormDefinitionsProvider } from '../contexts/form-definitions';
 import { KeystoneSSRProvider } from '../providers/ssr-provider';
@@ -18,6 +24,7 @@ import {
   getMetaPixelId,
   getAnalyticsConfig,
   getPostHogApiKey,
+  getGtmContainerPublicId,
   getKeystoneEnvironment,
 } from '../../lib/server-api';
 
@@ -111,7 +118,7 @@ function buildNavigationWithDynamicData(
  * Note: Next's `export const metadata` must remain in the site/app.
  * This component focuses on:
  * - fetching shared data
- * - injecting Meta Pixel (from ads_config) and PostHog (from analytics_config)
+ * - injecting Meta Pixel (from ads_config), GTM, and PostHog (from analytics_config)
  * - applying theme
  * - rendering Header + Footer
  * - rendering ChatWidget gated by `companyInformation.chat_enabled`
@@ -150,6 +157,7 @@ export async function KeystoneRootLayout(props: {
 
   const metaPixelId = getMetaPixelId(adsConfig);
   const posthogApiKey = getPostHogApiKey(analyticsConfig);
+  const gtmContainerId = getGtmContainerPublicId(analyticsConfig);
   const keystoneEnvironment = getKeystoneEnvironment(analyticsConfig);
 
   const services = Array.isArray(servicesData) ? servicesData : [];
@@ -187,6 +195,7 @@ export async function KeystoneRootLayout(props: {
     <>
       {metaPixelId ? <MetaPixel pixelId={metaPixelId} /> : null}
       {metaPixelId ? <MetaPixelTracker bookingUrl={externalManagementUrl} /> : null}
+      {gtmContainerId ? <GoogleTagManager containerId={gtmContainerId} /> : null}
       <ThemeProvider theme={theme}>
         <KeystoneSSRProvider>
           <FormDefinitionsProvider

package/src/tracking/GoogleTagManager.tsx

@@ -0,0 +1,40 @@
+const GTM_SCRIPT = (containerId: string) => `
+  (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','${containerId.replace(/'/g, "\\'")}');
+`;
+
+export type GoogleTagManagerProps = {
+  /** GTM container public ID (e.g. GTM-ABC123). */
+  containerId: string | null | undefined;
+};
+
+/**
+ * Renders Google Tag Manager script + noscript fallback.
+ * Mount once at root layout level when a container is provisioned.
+ */
+export function GoogleTagManager({ containerId }: GoogleTagManagerProps) {
+  const raw = typeof containerId === 'string' ? containerId.trim() : '';
+  const id = raw && raw !== 'null' && /^GTM-[A-Z0-9]+$/i.test(raw) ? raw : '';
+
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <>
+      <script id="google-tag-manager" dangerouslySetInnerHTML={{ __html: GTM_SCRIPT(id) }} />
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${id}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+          title="google-tag-manager"
+        />
+      </noscript>
+    </>
+  );
+}

package/src/tracking/index.ts

@@ -26,5 +26,7 @@ export type { PixelEvent, PixelEventParams, PixelUserData } from './firePixelEve
 export { PostHogProvider } from './PostHogProvider';
 export type { PostHogProviderProps } from './PostHogProvider';
 export { KeystoneAnalyticsTracker } from './KeystoneAnalyticsTracker';
+export { GoogleTagManager } from './GoogleTagManager';
+export type { GoogleTagManagerProps } from './GoogleTagManager';
 export { captureEvent } from './captureEvent';
 export type { KsEventName, KsEventProperties } from './captureEvent';