Install the Meta pixel - #66
Merged
Merged
Conversation
Add the Meta (Facebook) pixel alongside the existing X pixel, following the same pattern: the base snippet reports the initial page load, and a client tracker re-fires PageView on App Router navigations since fbevents.js installs no history listener. Production only, so localhost and preview deployments stay out of the ad data. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Greptile SummaryAdds a production-only Meta pixel to the root layout, including initial and client-navigation PageView tracking plus a noscript fallback.
Confidence Score: 4/5The Content Security Policy must permit the new Meta script and beacon hosts before merging, or the pixel will not function on deployments that apply public/_headers. The tracking lifecycle and navigation handling are consistent with existing integrations, but the configured browser policy blocks both delivery paths introduced for Meta PageViews. Files Needing Attention: src/components/MetaPixel.tsx and public/_headers
|
| Filename | Overview |
|---|---|
| src/components/MetaPixel.tsx | Implements Meta initialization and navigation tracking, but its external script and fallback beacon are blocked by the configured CSP. |
| src/app/layout.tsx | Mounts the new production-gated tracking component alongside the existing integrations. |
Sequence Diagram
sequenceDiagram
participant Browser
participant Layout as RootLayout
participant Pixel as MetaPixel
participant Meta as Meta endpoints
Browser->>Layout: Load production page
Layout->>Pixel: Render tracker
Pixel->>Meta: Request fbevents.js
Note over Browser,Meta: CSP blocks connect.facebook.net on configured Pages deployments
Pixel--xMeta: PageView remains queued
Browser->>Pixel: Client-side navigation
Pixel--xMeta: Track PageView cannot be delivered
Prompt To Fix All With AI
### Issue 1
src/components/MetaPixel.tsx:65
**CSP blocks Meta event delivery**
If the deployment applies `public/_headers`, its CSP blocks `connect.facebook.net` from loading `fbevents.js` and blocks the `www.facebook.com` fallback image, causing the new pixel to report no PageView events.
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.Reviews (1): Last reviewed commit: "Install the Meta pixel" | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| 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'); |
There was a problem hiding this comment.
If the deployment applies public/_headers, its CSP blocks connect.facebook.net from loading fbevents.js and blocks the www.facebook.com fallback image, causing the new pixel to report no PageView events.
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/MetaPixel.tsx
Line: 65
Comment:
**CSP blocks Meta event delivery**
If the deployment applies `public/_headers`, its CSP blocks `connect.facebook.net` from loading `fbevents.js` and blocks the `www.facebook.com` fallback image, causing the new pixel to report no PageView events.
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds the Meta (Facebook) pixel (
1782353696227901) to the site.What's here
src/components/MetaPixel.tsx— the base snippet (fbq('init', ...)+ initialPageView), the<noscript>fallback image, and aPageViewTrackerthat re-firesfbq('track', 'PageView')on client-side navigations.fbevents.jsinstalls no history listener, so App Router route changes would otherwise go unreported.src/app/layout.tsx— renders<MetaPixel />alongside<XPixel />.This mirrors the
XPixelcomponent added in #59, including two deliberate carry-overs:NODE_ENV === "production", so localhost and preview deployments stay out of the ad data.PageViewisn't double-counted (this also covers strict-mode effect re-runs).Notes
The pixel ID is hardcoded, matching
X_PIXEL_ID. Happy to move both to env vars in a follow-up if preferred.Testing
tsc --noEmitandeslintboth clean. The pixel can't fire locally without temporarily dropping theNODE_ENVguard — worth verifying in Meta Events Manager once this is on production.🤖 Generated with Claude Code