keystone-design-bootstrap 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",
@@ -12,6 +12,7 @@
     "./logo": "./src/design_system/logo/keystone-logo.tsx",
     "./hooks": "./src/lib/hooks/index.ts",
     "./contexts": "./src/contexts/index.ts",
+    "./tracking": "./src/tracking/index.ts",
     "./lib/server-api": "./src/lib/server-api.ts",
     "./lib/component-registry": "./src/lib/component-registry.ts",
     "./styles/*": "./src/styles/*",

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

@@ -2,6 +2,7 @@
 
 import React, { useRef, useState } from 'react';
 import { Checkbox, Form, Input, InputGroup, NativeSelect, Textarea, Button } from '../elements';
+import { trackMetaLead } from '../../tracking/trackMetaLead';
 import countries, { phoneCodeOptions } from '../../utils/countries';
 
 interface ContactSectionFormProps {
@@ -87,6 +88,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                trackMetaLead(result.eventId);
                 // Reset status after 5 seconds
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/lib/actions.ts

@@ -12,6 +12,8 @@ interface ContactFormResult {
   success: boolean;
   message?: string;
   error?: string;
+  /** Present on lead form success; use for Meta Pixel dedup: fbq('track', 'Lead', {}, { eventID: eventId }) */
+  eventId?: string;
 }
 
 /**
@@ -126,10 +128,13 @@ export async function submitLeadFormAction(formData: FormData): Promise<ContactF
         error: data.error || 'Failed to submit lead form. Please try again.',
       };
     }
-    
+
+    const eventId = data.data?.event_id ?? undefined;
+
     return {
       success: true,
       message: data.message || 'Thank you! We\'ll be in touch soon.',
+      ...(eventId && { eventId }),
     };
   } catch (error) {
     console.error('Lead form submission error:', error);

package/src/lib/server-api.ts

@@ -60,6 +60,18 @@ export async function getCompanyInformation() {
   return serverFetch('/public/company_information', defaultOptions);
 }
 
+/** Ads config (e.g. Meta Pixel). Returns { meta_pixel_id?: string } or {}. Only present when account has connected Meta Ads. */
+export async function getAdsConfig(): Promise<{ meta_pixel_id?: string } | null> {
+  const data = await serverFetch<{ meta_pixel_id?: string }>('/public/ads_config', defaultOptions);
+  return data ?? null;
+}
+
+/** Extract Meta Pixel ID from ads config for use with <MetaPixel pixelId={...} />. */
+export function getMetaPixelId(adsConfig: { meta_pixel_id?: string } | null | undefined): string | null {
+  const id = adsConfig && typeof adsConfig === 'object' && 'meta_pixel_id' in adsConfig && adsConfig.meta_pixel_id;
+  return id != null && id !== '' ? String(id) : null;
+}
+
 export async function getServices() {
   return serverFetch('/public/services', defaultOptions);
 }

package/src/tracking/MetaPixel.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Script from 'next/script';
+
+const FBEVENTS_URL = 'https://connect.facebook.net/en_US/fbevents.js';
+
+const PIXEL_SCRIPT = (pixelId: string) => `
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');
+  fbq('init', '${pixelId.replace(/'/g, "\\'")}');
+  fbq('track', 'PageView');
+`;
+
+export type MetaPixelProps = {
+  /** Meta Pixel ID. When null/undefined, nothing is rendered. */
+  pixelId: string | null | undefined;
+};
+
+/**
+ * Renders the Meta (Facebook) Pixel base code: loads fbevents.js, initializes
+ * the pixel, and tracks PageView. Use in the root layout when ads config
+ * provides a meta_pixel_id.
+ */
+export function MetaPixel({ pixelId }: MetaPixelProps) {
+  if (!pixelId || typeof pixelId !== 'string' || pixelId.trim() === '') {
+    return null;
+  }
+
+  const id = pixelId.trim();
+
+  return (
+    <>
+      <Script
+        id="meta-pixel"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{ __html: PIXEL_SCRIPT(id) }}
+      />
+      <noscript>
+        <img
+          height={1}
+          width={1}
+          style={{ display: 'none' }}
+          src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}
+          alt=""
+        />
+      </noscript>
+    </>
+  );
+}

package/src/tracking/index.ts

@@ -0,0 +1,3 @@
+export { MetaPixel } from './MetaPixel';
+export type { MetaPixelProps } from './MetaPixel';
+export { trackMetaLead } from './trackMetaLead';

package/src/tracking/trackMetaLead.ts

@@ -0,0 +1,9 @@
+/**
+ * Fires the client-side Meta Pixel Lead event with the same eventID as server CAPI
+ * so Meta can deduplicate browser + server events.
+ */
+export function trackMetaLead(eventId: string | undefined): void {
+  if (typeof window === 'undefined' || !eventId) return;
+  const fbq = (window as Window & { fbq?: (method: string, eventName: string, params?: object, options?: { eventID?: string }) => void }).fbq;
+  if (fbq) fbq('track', 'Lead', {}, { eventID: eventId });
+}