feat(components): add MetaPixel component with event tracking

packages/core/src/components/MetaPixel.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import Script from 'next/script'
+
+export interface MetaPixelProps {
+  /** Meta (Facebook) Pixel ID (e.g., '1234567890123456') */
+  pixelId: string
+  /** Load strategy (default: 'afterInteractive') */
+  strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive'
+  /** Disable automatic PageView tracking (default: false) */
+  disablePageView?: boolean
+}
+
+const PIXEL_ID_PATTERN = /^\d{15,16}$/
+
+export function MetaPixel({
+  pixelId,
+  strategy = 'afterInteractive',
+  disablePageView = false
+}: MetaPixelProps) {
+  // Don't render if no pixel ID or invalid format
+  if (!pixelId || !PIXEL_ID_PATTERN.test(pixelId)) {
+    return null
+  }
+
+  const pageViewScript = disablePageView ? '' : `fbq('track', 'PageView');`
+
+  return (
+    <>
+      <Script id="meta-pixel-init" strategy={strategy}>
+        {`
+          !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',
+          'https://connect.facebook.net/en_US/fbevents.js');
+          fbq('init', '${pixelId}');
+          ${pageViewScript}
+        `}
+      </Script>
+      {!disablePageView && (
+        <noscript>
+          <img
+            height="1"
+            width="1"
+            style={{ display: 'none' }}
+            src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
+            alt=""
+          />
+        </noscript>
+      )}
+    </>
+  )
+}
+
+/**
+ * Track a standard Meta Pixel event
+ * Use this for Facebook's predefined standard events
+ *
+ * @see https://developers.facebook.com/docs/meta-pixel/reference#standard-events
+ *
+ * @example
+ * trackMetaEvent('Lead')
+ * trackMetaEvent('Purchase', { value: 99.99, currency: 'USD' })
+ * trackMetaEvent('AddToCart', { content_ids: ['SKU123'], value: 29.99 })
+ */
+export function trackMetaEvent(
+  eventName: string,
+  params?: Record<string, unknown>
+) {
+  if (typeof window !== 'undefined' && typeof window.fbq === 'function') {
+    window.fbq('track', eventName, params)
+  }
+}
+
+/**
+ * Track a custom Meta Pixel event
+ * Use this for your own custom events (not Facebook's standard events)
+ *
+ * @see https://developers.facebook.com/docs/meta-pixel/reference#custom-events
+ *
+ * @example
+ * trackMetaCustomEvent('StartTrial')
+ * trackMetaCustomEvent('ShareContent', { content_type: 'article' })
+ */
+export function trackMetaCustomEvent(
+  eventName: string,
+  params?: Record<string, unknown>
+) {
+  if (typeof window !== 'undefined' && typeof window.fbq === 'function') {
+    window.fbq('trackCustom', eventName, params)
+  }
+}
+
+// Extend Window interface for TypeScript
+declare global {
+  interface Window {
+    fbq: {
+      (action: 'init', pixelId: string, options?: Record<string, unknown>): void
+      (
+        action: 'track' | 'trackCustom',
+        eventName: string,
+        params?: Record<string, unknown>
+      ): void
+      (action: string, ...args: unknown[]): void
+    }
+  }
+}

packages/core/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './BasicPageLayout'
 export * from './GoogleAnalytics'
+export * from './MetaPixel'
 export * from './ScrollToTop'