Add Meta Pixel analytics provider support #2727
Conversation
Add Meta Pixel (Facebook Pixel) analytics provider to Catalyst analytics framework. Implements standard e-commerce event tracking (ViewContent, AddToCart, RemoveFromCart, ViewCart, ViewCategory) with consent management support. Enables merchants to track events using Meta Pixel alongside or instead of Google Analytics. - Add MetaPixelProvider class implementing AnalyticsProvider interface - Update WebAnalyticsFragment to include metaPixel configuration - Update AnalyticsProvider component to support multiple providers - Add consent management integration for GDPR/CCPA compliance
🦋 Changeset detectedLatest commit: 0d7b568 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@BC-AdamWard is attempting to deploy a commit to the BigCommerce Platform Team on Vercel. A member of the Team first needs to authorize it. |
chanceaclark
left a comment
chanceaclark
left a comment
There was a problem hiding this comment.
Love how simple this add was! Wonder who set this up to be easy... 😏
Have a few comments specific to the provider + some type stuff otherwise looking good.
| getConsent?: () => Analytics.Consent.ConsentValues | null; | ||
| debugMode?: boolean; |
There was a problem hiding this comment.
These two properties are based on how the analytics providers manages consent and if it has a debug option.
For the consent piece, do you know if MP handles managing consent on it's own, like GA does? Or does it always assume you have consent when placed on the page?
| s.parentNode.insertBefore(t,s)}(window, document,'script', | ||
| 'https://connect.facebook.net/en_US/fbevents.js'); | ||
| fbq('init', '${this.config.pixelId}'); | ||
| ${this.config.debugMode ? "fbq('track', 'PageView');" : ''} |
There was a problem hiding this comment.
Is this manually added or do they have an example with debugMode?
| if (typeof window !== 'undefined' && (window as any).fbq) { | ||
| (window as any).fbq('consent', 'revoke'); |
There was a problem hiding this comment.
any should be avoided here and anywhere else in the file. Would also love to see if they have a type library we can use so we don't have to type check this, see @types/gtag.js.
| if (typeof window !== 'undefined' && (window as any).fbq) { | |
| (window as any).fbq('consent', 'revoke'); | |
| if (typeof window !== 'undefined' && 'fbq' in window) { | |
| window.fbq('consent', 'revoke'); |
| // Check consent before initializing | ||
| if (this.config.consentModeEnabled && this.config.getConsent) { | ||
| const consent = this.config.getConsent(); | ||
| if (consent && !consent.marketing) { | ||
| // Consent denied, don't initialize pixel | ||
| if (this.config.debugMode) { | ||
| console.log('[Meta Pixel] Consent denied, pixel not initialized'); | ||
| } | ||
| return; | ||
| } | ||
| } |
There was a problem hiding this comment.
We can probably move this logic into the initializeConsent function.
2 participants
What/Why?
Add Meta Pixel (Facebook Pixel) analytics provider to Catalyst analytics framework. Implements standard e-commerce event tracking (ViewContent, AddToCart, RemoveFromCart, ViewCart, ViewCategory) with consent management support. Enables merchants to track events using Meta Pixel alongside or instead of Google Analytics.
Testing
Migration
Minor change