Add Meta Pixel analytics provider support

.changeset/add-meta-pixel-analytics-provider.md

@@ -0,0 +1,18 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Add Meta Pixel analytics provider support
+
+This change adds a new Meta Pixel (Facebook Pixel) analytics provider to the Catalyst analytics framework. The implementation follows the same architecture pattern as the existing Google Analytics provider, allowing merchants to track e-commerce events using Meta Pixel for advertising and analytics purposes.
+
+**Features:**
+- Meta Pixel provider implementation with full event tracking support
+- Consent management integration for GDPR/CCPA compliance
+- Support for multiple analytics providers simultaneously (GA4 + Meta Pixel)
+- Standard e-commerce events: ViewContent, AddToCart, RemoveFromCart, ViewCart, ViewCategory
+
+**Configuration:**
+Merchants can configure Meta Pixel by adding `metaPixel { pixelId }` to their BigCommerce store settings. The GraphQL fragment has been updated to support fetching Meta Pixel configuration.
+
+**Note:** This implementation requires the BigCommerce GraphQL schema to include `metaPixel` in `webAnalytics`. Platform support may be required for full functionality.

core/components/analytics/fragment.ts

@@ -6,6 +6,9 @@ export const WebAnalyticsFragment = graphql(`
       ga4 {
         tagId
       }
+      metaPixel {
+        pixelId
+      }
     }
   }
 `);

core/components/analytics/provider.tsx

@@ -5,7 +5,9 @@ import { PropsWithChildren, useEffect, useRef } from 'react';
 
 import { FragmentOf } from '~/client/graphql';
 import { Analytics } from '~/lib/analytics';
+import { AnalyticsProvider as AnalyticsProviderType } from '~/lib/analytics/types';
 import { GoogleAnalyticsProvider } from '~/lib/analytics/providers/google-analytics';
+import { MetaPixelProvider } from '~/lib/analytics/providers/meta-pixel';
 import { AnalyticsProvider as AnalyticsProviderLib } from '~/lib/analytics/react';
 import { getConsentCookie } from '~/lib/consent-manager/cookies/client';
 
@@ -33,21 +35,37 @@ const getConsent = () => {
 };
 
 const getAnalytics = ({ channelId, isCookieConsentEnabled, settings }: Props): Analytics | null => {
+  const providers: AnalyticsProviderType[] = [];
+
+  // Add Google Analytics if configured
   if (settings?.webAnalytics?.ga4?.tagId && channelId) {
     const googleAnalytics = new GoogleAnalyticsProvider({
       gaId: settings.webAnalytics.ga4.tagId,
       consentModeEnabled: isCookieConsentEnabled,
       developerId: 'dMjk3Nj',
       getConsent,
     });
+    providers.push(googleAnalytics);
+  }
 
-    return new Analytics({
-      channelId,
-      providers: [googleAnalytics],
+  // Add Meta Pixel if configured
+  if (settings?.webAnalytics?.metaPixel?.pixelId && channelId) {
+    const metaPixel = new MetaPixelProvider({
+      pixelId: settings.webAnalytics.metaPixel.pixelId,
+      consentModeEnabled: isCookieConsentEnabled,
+      getConsent,
     });
+    providers.push(metaPixel);
   }
 
-  return null;
+  if (providers.length === 0) {
+    return null;
+  }
+
+  return new Analytics({
+    channelId,
+    providers,
+  });
 };
 
 export function AnalyticsProvider({