keystone-design-bootstrap 1.0.66 → 1.0.69

package/dist/tracking/index.d.ts

@@ -46,7 +46,12 @@ declare function setPixelUserData(userData: PixelUserData): Promise<void>;
  * Automatically applies any stored user identity before firing so that Meta
  * can match events to known users across the entire session.
  * Silently no-ops if fbq is not loaded (pixel not configured for this site).
+ *
+ * @param eventId - Optional server-side event ID for browser/server deduplication.
+ *   Pass the `eventId` returned by the form submission API so Meta can match and
+ *   deduplicate the browser Lead event against the server-side CAPI Lead event.
+ *   Format: fbq('track', event, params, { eventID: eventId })
  */
-declare function firePixelEvent(event: PixelEvent, params?: PixelEventParams): void;
+declare function firePixelEvent(event: PixelEvent, params?: PixelEventParams, eventId?: string): void;
 
 export { MetaPixel, type MetaPixelProps, MetaPixelTracker, type PixelEvent, type PixelEventParams, type PixelUserData, firePixelEvent, setPixelUserData };

package/dist/tracking/index.js

@@ -88,7 +88,7 @@ async function setPixelUserData(userData) {
     getRegisteredPixelIds().forEach((id) => fbq("init", id, hashed));
   }
 }
-function firePixelEvent(event, params) {
+function firePixelEvent(event, params, eventId) {
   const fbq = getFbq();
   if (!fbq) {
     console.debug("[MetaPixel] skipped \u2014 fbq not loaded", { event });
@@ -98,8 +98,10 @@ function firePixelEvent(event, params) {
   const normalized = {};
   if (params == null ? void 0 : params.contentName) normalized.content_name = params.contentName;
   if (params == null ? void 0 : params.contentCategory) normalized.content_category = params.contentCategory;
-  console.debug("[MetaPixel]", event, normalized);
-  fbq("track", event, Object.keys(normalized).length > 0 ? normalized : void 0);
+  const customData = Object.keys(normalized).length > 0 ? normalized : void 0;
+  const eventData = eventId ? { eventID: eventId } : void 0;
+  console.debug("[MetaPixel]", event, normalized, eventId ? { eventID: eventId } : "");
+  fbq("track", event, customData, eventData);
 }
 
 // src/tracking/MetaPixelTracker.tsx

package/dist/tracking/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tracking/MetaPixel.tsx","../../src/tracking/MetaPixelTracker.tsx","../../src/tracking/firePixelEvent.ts"],"sourcesContent":["'use client';\n\nimport Script from 'next/script';\n\nconst FBEVENTS_URL = 'https://connect.facebook.net/en_US/fbevents.js';\n\nconst PIXEL_SCRIPT = (pixelId: string) => `\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');\n  fbq('init', '${pixelId.replace(/'/g, \"\\\\'\")}');\n  fbq('track', 'PageView');\n  window.__ks_pixel_ids = window.__ks_pixel_ids || [];\n  if (window.__ks_pixel_ids.indexOf('${pixelId.replace(/'/g, \"\\\\'\")}') === -1) {\n    window.__ks_pixel_ids.push('${pixelId.replace(/'/g, \"\\\\'\")}');\n  }\n`;\n\nexport type MetaPixelProps = {\n  /** Meta Pixel ID. When null/undefined, nothing is rendered. */\n  pixelId: string | null | undefined;\n};\n\n/**\n * Renders the Meta (Facebook) Pixel base code: loads fbevents.js, initializes\n * the pixel, and tracks PageView. Use in the root layout when ads config\n * provides a meta_pixel_id.\n */\nexport function MetaPixel({ pixelId }: MetaPixelProps) {\n  const raw = typeof pixelId === 'string' ? pixelId.trim() : '';\n  const id = raw && raw !== 'null' && /^\\d+$/.test(raw) ? raw : '';\n  if (!id) {\n    return null;\n  }\n\n  return (\n    <>\n      <Script\n        id=\"meta-pixel\"\n        strategy=\"afterInteractive\"\n        dangerouslySetInnerHTML={{ __html: PIXEL_SCRIPT(id) }}\n      />\n      <noscript>\n        {/* eslint-disable-next-line @next/next/no-img-element -- 1x1 tracking pixel for no-JS fallback; next/image not applicable in noscript */}\n        <img\n          height={1}\n          width={1}\n          style={{ display: 'none' }}\n          src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}\n          alt=\"\"\n        />\n      </noscript>\n    </>\n  );\n}\n","'use client';\n\nimport { useEffect } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { firePixelEvent } from './firePixelEvent';\n\ntype RouteRule = {\n  pattern: RegExp;\n  getParams: (match: RegExpMatchArray) => { contentName: string; contentCategory: string };\n};\n\nfunction slugToTitle(slug: string): string {\n  return slug\n    .split('-')\n    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))\n    .join(' ');\n}\n\n// Checked in order — first match wins. More specific patterns come first.\nconst ROUTE_RULES: RouteRule[] = [\n  {\n    pattern: /^\\/services\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Service' }),\n  },\n  {\n    pattern: /^\\/locations\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Location' }),\n  },\n  {\n    pattern: /^\\/services$/,\n    getParams: () => ({ contentName: 'Services', contentCategory: 'Services' }),\n  },\n  {\n    pattern: /^\\/locations$/,\n    getParams: () => ({ contentName: 'Locations', contentCategory: 'Locations' }),\n  },\n  {\n    pattern: /^\\/portal$/,\n    getParams: () => ({ contentName: 'Member Portal', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/service-menu$/,\n    getParams: () => ({ contentName: 'Service Menu', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/faq$/,\n    getParams: () => ({ contentName: 'FAQ', contentCategory: 'FAQ' }),\n  },\n  {\n    pattern: /^\\/contact$/,\n    getParams: () => ({ contentName: 'Contact', contentCategory: 'Contact' }),\n  },\n];\n\ntype Props = {\n  /** External booking URL. When set, fires InitiateCheckout on any click targeting that URL. */\n  bookingUrl?: string | null;\n};\n\n/**\n * Single client-side tracker placed once in KeystoneRootLayout.\n * - Fires ViewContent on every route change for known page patterns.\n * - Fires InitiateCheckout whenever a visitor clicks a link to the external booking URL.\n *\n * Portal booking tab tracking is handled directly inside PortalPage via PortalTabTracker\n * since intent is only established when the Booking tab is explicitly opened.\n */\nexport function MetaPixelTracker({ bookingUrl }: Props) {\n  const pathname = usePathname();\n\n  useEffect(() => {\n    for (const rule of ROUTE_RULES) {\n      const match = pathname.match(rule.pattern);\n      if (match) {\n        const { contentName, contentCategory } = rule.getParams(match);\n        firePixelEvent('ViewContent', { contentName, contentCategory });\n        break;\n      }\n    }\n  }, [pathname]);\n\n  useEffect(() => {\n    if (!bookingUrl) return;\n\n    const handleClick = (e: MouseEvent) => {\n      const anchor = (e.target as Element).closest('a');\n      if (anchor?.href?.startsWith(bookingUrl)) {\n        firePixelEvent('InitiateCheckout');\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n    return () => document.removeEventListener('click', handleClick);\n  }, [bookingUrl]);\n\n  return null;\n}\n","type FbqFn = (method: string, ...args: unknown[]) => void;\n\nexport type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';\n\nexport interface PixelEventParams {\n  contentName?: string;\n  contentCategory?: string;\n}\n\n/** Raw (unhashed) user identifiers for advanced matching. */\nexport interface PixelUserData {\n  email?: string | null;\n  phone?: string | null;\n}\n\n// Hashed user data stored in sessionStorage for the duration of the browsing session.\n// Keyed by a short namespace to avoid collisions.\nconst STORAGE_KEY = 'ks_pud';\n\nasync function sha256Hex(str: string): Promise<string> {\n  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));\n  return Array.from(new Uint8Array(buffer))\n    .map((b) => b.toString(16).padStart(2, '0'))\n    .join('');\n}\n\nfunction getFbq(): FbqFn | undefined {\n  if (typeof window === 'undefined') return undefined;\n  return (window as Window & { fbq?: FbqFn }).fbq;\n}\n\n/** Read the pixel IDs registered by MetaPixel via the inline init script. */\nfunction getRegisteredPixelIds(): string[] {\n  return (window as Window & { __ks_pixel_ids?: string[] }).__ks_pixel_ids ?? [];\n}\n\n/** Apply stored hashed user data to every configured Meta Pixel. */\nfunction applyStoredUserData(fbq: FbqFn): void {\n  try {\n    const raw = sessionStorage.getItem(STORAGE_KEY);\n    if (!raw) return;\n    const hashed = JSON.parse(raw) as Record<string, string>;\n    if (Object.keys(hashed).length === 0) return;\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  } catch {\n    // sessionStorage unavailable or JSON malformed — safe to ignore\n  }\n}\n\n/**\n * Hash and store user identifiers so they are automatically included in all\n * subsequent pixel events for this browser session. Call this as soon as\n * identity is known (e.g. contact form submission, portal login step 1).\n */\nexport async function setPixelUserData(userData: PixelUserData): Promise<void> {\n  const hashed: Record<string, string> = {};\n\n  if (userData.email) {\n    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());\n  }\n  if (userData.phone) {\n    const digits = userData.phone.replace(/\\D/g, '');\n    if (digits) hashed.ph = await sha256Hex(digits);\n  }\n\n  if (Object.keys(hashed).length === 0) return;\n\n  try {\n    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));\n  } catch {\n    // sessionStorage unavailable — still apply to fbq for this page load\n  }\n\n  const fbq = getFbq();\n  if (fbq) {\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  }\n}\n\n/**\n * Single entry point for all client-side Meta Pixel event fires.\n * Automatically applies any stored user identity before firing so that Meta\n * can match events to known users across the entire session.\n * Silently no-ops if fbq is not loaded (pixel not configured for this site).\n */\nexport function firePixelEvent(event: PixelEvent, params?: PixelEventParams): void {\n  const fbq = getFbq();\n  if (!fbq) {\n    console.debug('[MetaPixel] skipped — fbq not loaded', { event });\n    return;\n  }\n\n  // Re-apply stored identity before every event so user data is included\n  // even on events that fire after a client-side navigation (PageView, ViewContent, etc.)\n  applyStoredUserData(fbq);\n\n  const normalized: Record<string, string> = {};\n  if (params?.contentName) normalized.content_name = params.contentName;\n  if (params?.contentCategory) normalized.content_category = params.contentCategory;\n\n  console.debug('[MetaPixel]', event, normalized);\n  fbq('track', event, Object.keys(normalized).length > 0 ? normalized : undefined);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/tracking/MetaPixel.tsx","../../src/tracking/MetaPixelTracker.tsx","../../src/tracking/firePixelEvent.ts"],"sourcesContent":["'use client';\n\nimport Script from 'next/script';\n\nconst FBEVENTS_URL = 'https://connect.facebook.net/en_US/fbevents.js';\n\nconst PIXEL_SCRIPT = (pixelId: string) => `\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');\n  fbq('init', '${pixelId.replace(/'/g, \"\\\\'\")}');\n  fbq('track', 'PageView');\n  window.__ks_pixel_ids = window.__ks_pixel_ids || [];\n  if (window.__ks_pixel_ids.indexOf('${pixelId.replace(/'/g, \"\\\\'\")}') === -1) {\n    window.__ks_pixel_ids.push('${pixelId.replace(/'/g, \"\\\\'\")}');\n  }\n`;\n\nexport type MetaPixelProps = {\n  /** Meta Pixel ID. When null/undefined, nothing is rendered. */\n  pixelId: string | null | undefined;\n};\n\n/**\n * Renders the Meta (Facebook) Pixel base code: loads fbevents.js, initializes\n * the pixel, and tracks PageView. Use in the root layout when ads config\n * provides a meta_pixel_id.\n */\nexport function MetaPixel({ pixelId }: MetaPixelProps) {\n  const raw = typeof pixelId === 'string' ? pixelId.trim() : '';\n  const id = raw && raw !== 'null' && /^\\d+$/.test(raw) ? raw : '';\n  if (!id) {\n    return null;\n  }\n\n  return (\n    <>\n      <Script\n        id=\"meta-pixel\"\n        strategy=\"afterInteractive\"\n        dangerouslySetInnerHTML={{ __html: PIXEL_SCRIPT(id) }}\n      />\n      <noscript>\n        {/* eslint-disable-next-line @next/next/no-img-element -- 1x1 tracking pixel for no-JS fallback; next/image not applicable in noscript */}\n        <img\n          height={1}\n          width={1}\n          style={{ display: 'none' }}\n          src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}\n          alt=\"\"\n        />\n      </noscript>\n    </>\n  );\n}\n","'use client';\n\nimport { useEffect } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { firePixelEvent } from './firePixelEvent';\n\ntype RouteRule = {\n  pattern: RegExp;\n  getParams: (match: RegExpMatchArray) => { contentName: string; contentCategory: string };\n};\n\nfunction slugToTitle(slug: string): string {\n  return slug\n    .split('-')\n    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))\n    .join(' ');\n}\n\n// Checked in order — first match wins. More specific patterns come first.\nconst ROUTE_RULES: RouteRule[] = [\n  {\n    pattern: /^\\/services\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Service' }),\n  },\n  {\n    pattern: /^\\/locations\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Location' }),\n  },\n  {\n    pattern: /^\\/services$/,\n    getParams: () => ({ contentName: 'Services', contentCategory: 'Services' }),\n  },\n  {\n    pattern: /^\\/locations$/,\n    getParams: () => ({ contentName: 'Locations', contentCategory: 'Locations' }),\n  },\n  {\n    pattern: /^\\/portal$/,\n    getParams: () => ({ contentName: 'Member Portal', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/service-menu$/,\n    getParams: () => ({ contentName: 'Service Menu', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/faq$/,\n    getParams: () => ({ contentName: 'FAQ', contentCategory: 'FAQ' }),\n  },\n  {\n    pattern: /^\\/contact$/,\n    getParams: () => ({ contentName: 'Contact', contentCategory: 'Contact' }),\n  },\n];\n\ntype Props = {\n  /** External booking URL. When set, fires InitiateCheckout on any click targeting that URL. */\n  bookingUrl?: string | null;\n};\n\n/**\n * Single client-side tracker placed once in KeystoneRootLayout.\n * - Fires ViewContent on every route change for known page patterns.\n * - Fires InitiateCheckout whenever a visitor clicks a link to the external booking URL.\n *\n * Portal booking tab tracking is handled directly inside PortalPage via PortalTabTracker\n * since intent is only established when the Booking tab is explicitly opened.\n */\nexport function MetaPixelTracker({ bookingUrl }: Props) {\n  const pathname = usePathname();\n\n  useEffect(() => {\n    for (const rule of ROUTE_RULES) {\n      const match = pathname.match(rule.pattern);\n      if (match) {\n        const { contentName, contentCategory } = rule.getParams(match);\n        firePixelEvent('ViewContent', { contentName, contentCategory });\n        break;\n      }\n    }\n  }, [pathname]);\n\n  useEffect(() => {\n    if (!bookingUrl) return;\n\n    const handleClick = (e: MouseEvent) => {\n      const anchor = (e.target as Element).closest('a');\n      if (anchor?.href?.startsWith(bookingUrl)) {\n        firePixelEvent('InitiateCheckout');\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n    return () => document.removeEventListener('click', handleClick);\n  }, [bookingUrl]);\n\n  return null;\n}\n","type FbqFn = (method: string, ...args: unknown[]) => void;\n\nexport type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';\n\nexport interface PixelEventParams {\n  contentName?: string;\n  contentCategory?: string;\n}\n\n/** Raw (unhashed) user identifiers for advanced matching. */\nexport interface PixelUserData {\n  email?: string | null;\n  phone?: string | null;\n}\n\n// Hashed user data stored in sessionStorage for the duration of the browsing session.\n// Keyed by a short namespace to avoid collisions.\nconst STORAGE_KEY = 'ks_pud';\n\nasync function sha256Hex(str: string): Promise<string> {\n  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));\n  return Array.from(new Uint8Array(buffer))\n    .map((b) => b.toString(16).padStart(2, '0'))\n    .join('');\n}\n\nfunction getFbq(): FbqFn | undefined {\n  if (typeof window === 'undefined') return undefined;\n  return (window as Window & { fbq?: FbqFn }).fbq;\n}\n\n/** Read the pixel IDs registered by MetaPixel via the inline init script. */\nfunction getRegisteredPixelIds(): string[] {\n  return (window as Window & { __ks_pixel_ids?: string[] }).__ks_pixel_ids ?? [];\n}\n\n/** Apply stored hashed user data to every configured Meta Pixel. */\nfunction applyStoredUserData(fbq: FbqFn): void {\n  try {\n    const raw = sessionStorage.getItem(STORAGE_KEY);\n    if (!raw) return;\n    const hashed = JSON.parse(raw) as Record<string, string>;\n    if (Object.keys(hashed).length === 0) return;\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  } catch {\n    // sessionStorage unavailable or JSON malformed — safe to ignore\n  }\n}\n\n/**\n * Hash and store user identifiers so they are automatically included in all\n * subsequent pixel events for this browser session. Call this as soon as\n * identity is known (e.g. contact form submission, portal login step 1).\n */\nexport async function setPixelUserData(userData: PixelUserData): Promise<void> {\n  const hashed: Record<string, string> = {};\n\n  if (userData.email) {\n    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());\n  }\n  if (userData.phone) {\n    const digits = userData.phone.replace(/\\D/g, '');\n    if (digits) hashed.ph = await sha256Hex(digits);\n  }\n\n  if (Object.keys(hashed).length === 0) return;\n\n  try {\n    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));\n  } catch {\n    // sessionStorage unavailable — still apply to fbq for this page load\n  }\n\n  const fbq = getFbq();\n  if (fbq) {\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  }\n}\n\n/**\n * Single entry point for all client-side Meta Pixel event fires.\n * Automatically applies any stored user identity before firing so that Meta\n * can match events to known users across the entire session.\n * Silently no-ops if fbq is not loaded (pixel not configured for this site).\n *\n * @param eventId - Optional server-side event ID for browser/server deduplication.\n *   Pass the `eventId` returned by the form submission API so Meta can match and\n *   deduplicate the browser Lead event against the server-side CAPI Lead event.\n *   Format: fbq('track', event, params, { eventID: eventId })\n */\nexport function firePixelEvent(event: PixelEvent, params?: PixelEventParams, eventId?: string): void {\n  const fbq = getFbq();\n  if (!fbq) {\n    console.debug('[MetaPixel] skipped — fbq not loaded', { event });\n    return;\n  }\n\n  // Re-apply stored identity before every event so user data is included\n  // even on events that fire after a client-side navigation (PageView, ViewContent, etc.)\n  applyStoredUserData(fbq);\n\n  const normalized: Record<string, string> = {};\n  if (params?.contentName) normalized.content_name = params.contentName;\n  if (params?.contentCategory) normalized.content_category = params.contentCategory;\n\n  const customData = Object.keys(normalized).length > 0 ? normalized : undefined;\n  const eventData = eventId ? { eventID: eventId } : undefined;\n\n  console.debug('[MetaPixel]', event, normalized, eventId ? { eventID: eventId } : '');\n  fbq('track', event, customData, eventData);\n}\n"],"mappings":";AAEA,OAAO,YAAY;AAEnB,IAAM,eAAe;AAErB,IAAM,eAAe,CAAC,YAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAOqB,YAAY;AAAA,iBAC1D,QAAQ,QAAQ,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,uCAGN,QAAQ,QAAQ,MAAM,KAAK,CAAC;AAAA,kCACjC,QAAQ,QAAQ,MAAM,KAAK,CAAC;AAAA;AAAA;AAcvD,SAAS,UAAU,EAAE,QAAQ,GAAmB;AACrD,QAAM,MAAM,OAAO,YAAY,WAAW,QAAQ,KAAK,IAAI;AAC3D,QAAM,KAAK,OAAO,QAAQ,UAAU,QAAQ,KAAK,GAAG,IAAI,MAAM;AAC9D,MAAI,CAAC,IAAI;AACP,WAAO;AAAA,EACT;AAEA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAS;AAAA,MACT,yBAAyB,EAAE,QAAQ,aAAa,EAAE,EAAE;AAAA;AAAA,EACtD,GACA,oCAAC,kBAEC;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO,EAAE,SAAS,OAAO;AAAA,MACzB,KAAK,kCAAkC,EAAE;AAAA,MACzC,KAAI;AAAA;AAAA,EACN,CACF,CACF;AAEJ;;;ACxDA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;;;ACc5B,IAAM,cAAc;AAEpB,eAAe,UAAU,KAA8B;AACrD,QAAM,SAAS,MAAM,OAAO,OAAO,OAAO,WAAW,IAAI,YAAY,EAAE,OAAO,GAAG,CAAC;AAClF,SAAO,MAAM,KAAK,IAAI,WAAW,MAAM,CAAC,EACrC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAC1C,KAAK,EAAE;AACZ;AAEA,SAAS,SAA4B;AACnC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAQ,OAAoC;AAC9C;AAGA,SAAS,wBAAkC;AAhC3C;AAiCE,UAAQ,YAAkD,mBAAlD,YAAoE,CAAC;AAC/E;AAGA,SAAS,oBAAoB,KAAkB;AAC7C,MAAI;AACF,UAAM,MAAM,eAAe,QAAQ,WAAW;AAC9C,QAAI,CAAC,IAAK;AACV,UAAM,SAAS,KAAK,MAAM,GAAG;AAC7B,QAAI,OAAO,KAAK,MAAM,EAAE,WAAW,EAAG;AACtC,0BAAsB,EAAE,QAAQ,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC;AAAA,EACjE,SAAQ;AAAA,EAER;AACF;AAOA,eAAsB,iBAAiB,UAAwC;AAC7E,QAAM,SAAiC,CAAC;AAExC,MAAI,SAAS,OAAO;AAClB,WAAO,KAAK,MAAM,UAAU,SAAS,MAAM,KAAK,EAAE,YAAY,CAAC;AAAA,EACjE;AACA,MAAI,SAAS,OAAO;AAClB,UAAM,SAAS,SAAS,MAAM,QAAQ,OAAO,EAAE;AAC/C,QAAI,OAAQ,QAAO,KAAK,MAAM,UAAU,MAAM;AAAA,EAChD;AAEA,MAAI,OAAO,KAAK,MAAM,EAAE,WAAW,EAAG;AAEtC,MAAI;AACF,mBAAe,QAAQ,aAAa,KAAK,UAAU,MAAM,CAAC;AAAA,EAC5D,SAAQ;AAAA,EAER;AAEA,QAAM,MAAM,OAAO;AACnB,MAAI,KAAK;AACP,0BAAsB,EAAE,QAAQ,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC;AAAA,EACjE;AACF;AAaO,SAAS,eAAe,OAAmB,QAA2B,SAAwB;AACnG,QAAM,MAAM,OAAO;AACnB,MAAI,CAAC,KAAK;AACR,YAAQ,MAAM,6CAAwC,EAAE,MAAM,CAAC;AAC/D;AAAA,EACF;AAIA,sBAAoB,GAAG;AAEvB,QAAM,aAAqC,CAAC;AAC5C,MAAI,iCAAQ,YAAa,YAAW,eAAe,OAAO;AAC1D,MAAI,iCAAQ,gBAAiB,YAAW,mBAAmB,OAAO;AAElE,QAAM,aAAa,OAAO,KAAK,UAAU,EAAE,SAAS,IAAI,aAAa;AACrE,QAAM,YAAY,UAAU,EAAE,SAAS,QAAQ,IAAI;AAEnD,UAAQ,MAAM,eAAe,OAAO,YAAY,UAAU,EAAE,SAAS,QAAQ,IAAI,EAAE;AACnF,MAAI,SAAS,OAAO,YAAY,SAAS;AAC3C;;;ADnGA,SAAS,YAAY,MAAsB;AACzC,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,GAAG;AACb;AAGA,IAAM,cAA2B;AAAA,EAC/B;AAAA,IACE,SAAS;AAAA,IACT,WAAW,CAAC,CAAC,EAAE,IAAI,OAAO,EAAE,aAAa,YAAY,IAAI,GAAG,iBAAiB,UAAU;AAAA,EACzF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,CAAC,CAAC,EAAE,IAAI,OAAO,EAAE,aAAa,YAAY,IAAI,GAAG,iBAAiB,WAAW;AAAA,EAC1F;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,YAAY,iBAAiB,WAAW;AAAA,EAC3E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,aAAa,iBAAiB,YAAY;AAAA,EAC7E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,iBAAiB,iBAAiB,UAAU;AAAA,EAC/E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,gBAAgB,iBAAiB,UAAU;AAAA,EAC9E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,OAAO,iBAAiB,MAAM;AAAA,EACjE;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,WAAW,iBAAiB,UAAU;AAAA,EACzE;AACF;AAeO,SAAS,iBAAiB,EAAE,WAAW,GAAU;AACtD,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,eAAW,QAAQ,aAAa;AAC9B,YAAM,QAAQ,SAAS,MAAM,KAAK,OAAO;AACzC,UAAI,OAAO;AACT,cAAM,EAAE,aAAa,gBAAgB,IAAI,KAAK,UAAU,KAAK;AAC7D,uBAAe,eAAe,EAAE,aAAa,gBAAgB,CAAC;AAC9D;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,UAAM,cAAc,CAAC,MAAkB;AApF3C;AAqFM,YAAM,SAAU,EAAE,OAAmB,QAAQ,GAAG;AAChD,WAAI,sCAAQ,SAAR,mBAAc,WAAW,aAAa;AACxC,uBAAe,kBAAkB;AAAA,MACnC;AAAA,IACF;AAEA,aAAS,iBAAiB,SAAS,WAAW;AAC9C,WAAO,MAAM,SAAS,oBAAoB,SAAS,WAAW;AAAA,EAChE,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.66",
+  "version": "1.0.69",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",
@@ -69,6 +69,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "motion": "^12.23.12",
+    "posthog-js": "^1.367.0",
     "react-aria": "^3.42.0",
     "react-aria-components": "^1.15.1",
     "react-markdown": "^10.1.0",

package/src/design_system/components/ChatWidget.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { X, MessageChatSquare } from '@untitledui/icons';
 import { Avatar } from '../elements/avatar/avatar';
 import { cx } from '../../utils/cx';
+import { captureEvent } from '../../tracking/captureEvent';
 
 interface Message {
   id: string;
@@ -197,27 +198,25 @@ export function ChatWidget({
 
       if (response.ok) {
         const result = await response.json();
-        
-        // Message sent successfully
+        captureEvent('chat_message_sent', { is_authenticated: Boolean(contactId) });
+
         if (result.data?.job_id) {
-          // Job is processing - poll for the reply
           pollForAgentReply();
         } else if (result.data?.status === 'agent_unavailable' || result.data?.status === 'no_auto_reply') {
-          // No agent reply expected
           setIsLoading(false);
         } else {
-          // Reload messages to get the actual stored message
           await loadMessages();
           setIsLoading(false);
         }
       } else {
-        // Remove temp message on error
         setMessages(prev => prev.filter(m => m.id !== tempMessage.id));
+        captureEvent('chat_message_failed', { error: 'send_failed' });
         console.error('Failed to send message');
         setIsLoading(false);
       }
     } catch (error) {
       setMessages(prev => prev.filter(m => m.id !== tempMessage.id));
+      captureEvent('chat_message_failed', { error: 'network_error' });
       console.error('Failed to send message:', error);
       setIsLoading(false);
     }
@@ -250,7 +249,7 @@ export function ChatWidget({
       {/* Chat button */}
       {!isOpen && (
         <button
-          onClick={() => setIsOpen(true)}
+          onClick={() => { setIsOpen(true); captureEvent('chat_opened'); }}
           className={cx(
             "flex size-15 items-center justify-center rounded-full border-none text-white shadow-xl transition-transform duration-200 hover:scale-105 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
             widgetBrandClass

package/src/design_system/portal/LoginForm.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { countries } from '../../utils/countries';
 import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
+import { captureEvent } from '../../tracking/captureEvent';
 type Step = 'identifier' | 'returning' | 'new';
 
 interface LoginFormProps {
@@ -12,8 +13,9 @@ interface LoginFormProps {
   onClose?: () => void;
 }
 
+// text-base (16px) prevents iOS from auto-zooming when the input is focused.
 const inputClass =
-  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
+  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-base text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
 function isValidEmail(value: string): boolean {
@@ -24,6 +26,10 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const router = useRouter();
   const [step, setStep] = useState<Step>('identifier');
 
+  useEffect(() => {
+    captureEvent('portal_login_started');
+  }, []);
+
   // Identifier step state
   const [email, setEmail] = useState('');
   const [phoneValue, setPhoneValue] = useState(''); // formatted national number
@@ -72,19 +78,24 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         body: JSON.stringify({ email: emailVal, phone: fullPhone }),
       });
       const result = await res.json().catch(() => ({ exists: null }));
+      const method = emailVal && fullPhone ? 'email_and_phone' : emailVal ? 'email' : 'phone';
       if (result.exists === true) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
+        captureEvent('portal_login_identified', { method, user_exists: true });
         setWelcomeName(result.firstName ?? null);
         setStep(result.hasPassword === false ? 'new' : 'returning');
       } else if (result.exists === false) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
+        captureEvent('portal_login_identified', { method, user_exists: false });
         setStep('new');
       } else {
+        captureEvent('portal_login_failed', { step: 'identifier', reason: 'unknown_error' });
         setError('Something went wrong. Please check your connection and try again.');
       }
     } catch {
+      captureEvent('portal_login_failed', { step: 'identifier', reason: 'network_error' });
       setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
@@ -108,11 +119,14 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
           setError(null);
           return;
         }
+        captureEvent('portal_login_failed', { step: 'signin', reason: result.code || 'invalid_credentials' });
         setError(result.error || 'Login failed. Please try again.');
         return;
       }
+      captureEvent('portal_login_completed', { flow: 'signin' });
       if (onSuccess) onSuccess(); else router.refresh();
     } catch {
+      captureEvent('portal_login_failed', { step: 'signin', reason: 'network_error' });
       setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
@@ -138,9 +152,15 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         }),
       });
       const result = await res.json().catch(() => ({}));
-      if (!res.ok) { setError(result.error || 'Signup failed. Please try again.'); return; }
+      if (!res.ok) {
+        captureEvent('portal_login_failed', { step: 'signup', reason: result.error || 'signup_failed' });
+        setError(result.error || 'Signup failed. Please try again.');
+        return;
+      }
+      captureEvent('portal_login_completed', { flow: 'signup' });
       if (onSuccess) onSuccess(); else router.refresh();
     } catch {
+      captureEvent('portal_login_failed', { step: 'signup', reason: 'network_error' });
       setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
@@ -206,7 +226,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               placeholder="you@example.com"
               className={inputClass}
               autoComplete="email"
-              autoFocus
             />
           </div>
           <div className="flex items-center gap-3">
@@ -220,7 +239,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               <select
                 value={selectedCountry}
                 onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
-                className="border-r border-secondary bg-secondary px-2 py-2.5 text-sm text-secondary focus:outline-none"
+                className="border-r border-secondary bg-secondary px-2 py-2.5 text-base text-secondary focus:outline-none"
                 aria-label="Country code"
               >
                 {countryOptions.map((opt) => (
@@ -232,7 +251,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                 value={phoneValue}
                 onChange={handlePhoneChange}
                 placeholder={nationalPlaceholder}
-                className="flex-1 px-3 py-2.5 text-sm text-primary placeholder-quaternary bg-transparent focus:outline-none"
+                className="flex-1 px-3 py-2.5 text-base text-primary placeholder-quaternary bg-transparent focus:outline-none"
               />
             </div>
           </div>
@@ -261,7 +280,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               className={inputClass}
               required
               autoComplete="current-password"
-              autoFocus
             />
           </div>
           <div className="pt-1">
@@ -298,7 +316,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                   placeholder="Jane"
                   className={inputClass}
                   autoComplete="given-name"
-                  autoFocus
                 />
               </div>
               <div>
@@ -324,7 +341,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               className={inputClass}
               required
               autoComplete="new-password"
-              autoFocus={!!welcomeName}
             />
           </div>
           <div>

package/src/design_system/portal/LoginModalController.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import { Modal } from '../elements/modal/modal';
 import { LoginForm } from './LoginForm';
@@ -19,11 +19,17 @@ const keystoneFooter = (
 /**
  * Renders a single login modal for the entire portal.
  * Any server-rendered element with `data-open-login-modal` will open it on click.
- * After successful auth the server component re-renders with the new cookie.
+ *
+ * After successful auth, the modal switches to a loading state and stays open
+ * until the router transition (router.refresh / router.push) has fully completed
+ * and the server component has re-rendered with the new session. This prevents
+ * the brief flash of logged-out content that would otherwise appear.
  */
 export function LoginModalController() {
   const [open, setOpen] = useState(false);
   const [redirectUrl, setRedirectUrl] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const router = useRouter();
 
   useEffect(() => {
@@ -40,24 +46,42 @@ export function LoginModalController() {
   }, []);
 
   const handleSuccess = () => {
-    setOpen(false);
-    if (redirectUrl) {
-      router.push(redirectUrl);
-      setRedirectUrl(null);
-    } else {
-      router.refresh();
-    }
+    setRefreshing(true);
+    startTransition(() => {
+      if (redirectUrl) {
+        router.push(redirectUrl);
+        setRedirectUrl(null);
+      } else {
+        router.refresh();
+      }
+    });
   };
 
+  // Close the modal once the router transition has fully completed and the
+  // server component has re-rendered with the new authenticated state.
+  useEffect(() => {
+    if (refreshing && !isPending) {
+      setOpen(false);
+      setRefreshing(false);
+    }
+  }, [refreshing, isPending]);
+
   return (
     <Modal
       isOpen={open}
-      onClose={() => setOpen(false)}
+      onClose={refreshing ? () => {} : () => setOpen(false)}
       hideHeader
       ariaLabel="Sign in or create account"
-      footer={keystoneFooter}
+      footer={refreshing ? undefined : keystoneFooter}
     >
-      <LoginForm onSuccess={handleSuccess} onClose={() => setOpen(false)} />
+      {refreshing ? (
+        <div className="flex flex-col items-center justify-center py-12 gap-3">
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-brand border-t-transparent" />
+          <p className="text-sm text-tertiary">Signing you in…</p>
+        </div>
+      ) : (
+        <LoginForm onSuccess={handleSuccess} onClose={() => setOpen(false)} />
+      )}
     </Modal>
   );
 }

package/src/design_system/portal/PortalPage.tsx

@@ -267,7 +267,7 @@ function ServicesPanel({
 
   return (
     <>
-      <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} />
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} tab="services" />
       <div className="divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden">
         {activeServices.map((service) => (
           <details key={service.id} className="group">
@@ -321,7 +321,7 @@ function PackagesPanel({
 
   return (
     <>
-      <PortalTabTracker event="ViewContent" params={{ contentName: 'Packages', contentCategory: 'Packages' }} />
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Packages', contentCategory: 'Packages' }} tab="packages" />
       <div className="grid gap-4 sm:grid-cols-2">
         {packages.map((pkg) => {
           const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
@@ -406,7 +406,7 @@ function SpecialsPanel({ specials }: { specials: SpecialItem[] }) {
 
   return (
     <>
-      <PortalTabTracker event="ViewContent" params={{ contentName: 'Specials', contentCategory: 'Specials' }} />
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Specials', contentCategory: 'Specials' }} tab="specials" />
       <div className="space-y-3">
         {specials.map((special) => (
           <div key={special.id} className="group flex items-start gap-3 rounded-component border border-secondary bg-primary px-4 py-4">
@@ -524,7 +524,7 @@ function BookPanel({
   if (bookingAllowsIframe) {
     return (
       <>
-        <PortalTabTracker event="InitiateCheckout" />
+        <PortalTabTracker event="InitiateCheckout" tab="booking" />
         <BookIframePanel bookingHref={bookingHref} businessName={businessName} />
       </>
     );
@@ -532,7 +532,7 @@ function BookPanel({
 
   return (
     <>
-      <PortalTabTracker event="InitiateCheckout" />
+      <PortalTabTracker event="InitiateCheckout" tab="booking" />
       <div className="flex flex-col items-center justify-center py-20 text-center">
         <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary">
           <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>

package/src/design_system/portal/PortalTabTracker.tsx

@@ -2,21 +2,29 @@
 
 import { useEffect } from 'react';
 import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { captureEvent } from '../../tracking/captureEvent';
 import type { PixelEvent, PixelEventParams } from '../../tracking/firePixelEvent';
 
 interface Props {
   event: PixelEvent;
   params?: PixelEventParams;
+  /** Human-readable tab name for PostHog (e.g. 'booking', 'appointments', 'membership'). */
+  tab: string;
 }
 
 /**
- * Fires a pixel event once when a portal tab mounts.
+ * Fires tracking events once when a portal tab mounts.
  * Placed at the root of each tab panel so it fires on both direct navigation
  * and post-login redirect to that tab.
+ *
+ * Fires:
+ * - Meta Pixel: the provided `event` (e.g. ViewContent, InitiateCheckout)
+ * - PostHog: portal_tab_viewed with the tab name
  */
-export function PortalTabTracker({ event, params }: Props) {
+export function PortalTabTracker({ event, params, tab }: Props) {
   useEffect(() => {
     firePixelEvent(event, params);
+    captureEvent('portal_tab_viewed', { tab });
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/design_system/sections/contact-section-form.aman.tsx

@@ -4,6 +4,7 @@ import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
+import { captureEvent } from '../../tracking/captureEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -63,14 +64,18 @@ export const ContactSectionForm = ({
                 onSuccess?.();
                 await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead', undefined, result.eventId);
+                captureEvent('form_submitted', { form_type: 'lead', ...(result.eventId && { event_id: result.eventId }) });
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
+                const errorMsg = result.error || 'Something went wrong. Please try again.';
                 setSubmitStatus('error');
-                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+                setStatusMessage(errorMsg);
+                captureEvent('form_failed', { form_type: 'lead', error: errorMsg });
             }
         } catch {
             setSubmitStatus('error');
             setStatusMessage('Network error. Please try again later.');
+            captureEvent('form_failed', { form_type: 'lead', error: 'network_error' });
         }
         setIsSubmitting(false);
     };

package/src/design_system/sections/contact-section-form.balance.tsx

@@ -4,6 +4,7 @@ import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
+import { captureEvent } from '../../tracking/captureEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -63,14 +64,18 @@ export const ContactSectionForm = ({
                 onSuccess?.();
                 await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead', undefined, result.eventId);
+                captureEvent('form_submitted', { form_type: 'lead', ...(result.eventId && { event_id: result.eventId }) });
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
+                const errorMsg = result.error || 'Something went wrong. Please try again.';
                 setSubmitStatus('error');
-                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+                setStatusMessage(errorMsg);
+                captureEvent('form_failed', { form_type: 'lead', error: errorMsg });
             }
         } catch {
             setSubmitStatus('error');
             setStatusMessage('Network error. Please try again later.');
+            captureEvent('form_failed', { form_type: 'lead', error: 'network_error' });
         }
         setIsSubmitting(false);
     };

package/src/design_system/sections/contact-section-form.barelux.tsx

@@ -4,6 +4,7 @@ import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
+import { captureEvent } from '../../tracking/captureEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -63,14 +64,18 @@ export const ContactSectionForm = ({
                 onSuccess?.();
                 await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead', undefined, result.eventId);
+                captureEvent('form_submitted', { form_type: 'lead', ...(result.eventId && { event_id: result.eventId }) });
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
+                const errorMsg = result.error || 'Something went wrong. Please try again.';
                 setSubmitStatus('error');
-                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+                setStatusMessage(errorMsg);
+                captureEvent('form_failed', { form_type: 'lead', error: errorMsg });
             }
         } catch {
             setSubmitStatus('error');
             setStatusMessage('Network error. Please try again later.');
+            captureEvent('form_failed', { form_type: 'lead', error: 'network_error' });
         }
         setIsSubmitting(false);
     };

package/src/design_system/sections/contact-section-form.tsx

@@ -4,6 +4,7 @@ import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
+import { captureEvent } from '../../tracking/captureEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -71,14 +72,18 @@ export const ContactSectionForm = ({
                 onSuccess?.();
                 await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead', undefined, result.eventId);
+                captureEvent('form_submitted', { form_type: 'lead', ...(result.eventId && { event_id: result.eventId }) });
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
+                const errorMsg = result.error || 'Something went wrong. Please try again.';
                 setSubmitStatus('error');
-                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+                setStatusMessage(errorMsg);
+                captureEvent('form_failed', { form_type: 'lead', error: errorMsg });
             }
         } catch {
             setSubmitStatus('error');
             setStatusMessage('Network error. Please try again later.');
+            captureEvent('form_failed', { form_type: 'lead', error: 'network_error' });
         }
         setIsSubmitting(false);
     };

package/src/design_system/sections/email-signup-section.tsx

@@ -5,6 +5,7 @@ import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
+import { captureEvent } from '../../tracking/captureEvent';
 
 export interface EmailSignupSectionProps {
     title?: string;
@@ -54,14 +55,18 @@ export const EmailSignupSection = ({
                 setSubmitStatus('success');
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
+                captureEvent('form_submitted', { form_type: 'marketing_list_signup' });
                 setTimeout(() => setSubmitStatus('idle'), 6000);
             } else {
+                const errorMsg = result.error || 'Something went wrong. Please try again.';
                 setSubmitStatus('error');
-                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+                setStatusMessage(errorMsg);
+                captureEvent('form_failed', { form_type: 'marketing_list_signup', error: errorMsg });
             }
         } catch {
             setSubmitStatus('error');
             setStatusMessage('Network error. Please try again later.');
+            captureEvent('form_failed', { form_type: 'marketing_list_signup', error: 'network_error' });
         }
 
         setIsSubmitting(false);

package/src/design_system/sections/job-application-form.aman.tsx

@@ -5,6 +5,7 @@ import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
+import { captureEvent } from '../../tracking/captureEvent';
 
 interface JobApplicationFormAmanProps {
     jobSlug: string;
@@ -47,14 +48,18 @@ export const JobApplicationForm = ({ jobSlug, formDefinition, inline = false }:
                 setSubmitStatus('success');
                 setStatusMessage(result.message || "Thank you for applying! We'll be in touch soon.");
                 formRef.current?.reset();
+                captureEvent('form_submitted', { form_type: 'job_application' });
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
+                const errorMsg = result.error || 'Something went wrong. Please try again.';
                 setSubmitStatus('error');
-                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+                setStatusMessage(errorMsg);
+                captureEvent('form_failed', { form_type: 'job_application', error: errorMsg });
             }
         } catch {
             setSubmitStatus('error');
             setStatusMessage('Network error. Please try again.');
+            captureEvent('form_failed', { form_type: 'job_application', error: 'network_error' });
         }
         setIsSubmitting(false);
     };