Skip to content

feat(third-parties): add Meta Pixel integration with helper #79005

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: canary
Choose a base branch
from

Conversation

arielff3
Copy link

@arielff3 arielff3 commented May 9, 2025

What?

This PR adds a new MetaPixel component to the experimental @next/third-parties package, making it easy to integrate the Meta (Facebook) Pixel into Next.js applications.

In addition, it introduces the sendMetaPixelEvent helper function, allowing developers to dynamically track standard and custom events after initialization.

Documentation has been fully updated to include usage examples, options, and supported events.

Why?

The Meta Pixel is one of the most widely used tracking pixels for marketing, yet it was missing from the current @next/third-parties package. This addition brings it in line with other popular integrations (such as Google Tag Manager and Google Analytics) and offers developers a first-class way to implement Meta Pixel in a performant, Next.js-optimized way.

It also aligns with the goals of the package to offer pre-built, optimized third-party integrations that are easy to use.

How?

  • Added MetaPixel component to @next/third-parties/meta.
  • Added sendMetaPixelEvent utility function to enable dynamic event tracking.
  • Implemented the script loading with next/script to optimize performance and defer loading until after hydration.
  • Updated documentation:
    • Added a Meta Third-Parties section to the main third-parties docs.
    • Included usage examples for both App Router and Pages Router.
    • Added helper documentation and a table of supported standard events.

@ijjk ijjk added the Documentation Related to Next.js' official documentation. label May 9, 2025
@ijjk
Copy link
Member

ijjk commented May 9, 2025

Allow CI Workflow Run

  • approve CI run for commit: 81408d9

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@VoldeDoc

This comment was marked as spam.

@arielff3

This comment was marked as resolved.

@bgw

This comment was marked as resolved.

Copy link

changeset-bot bot commented May 15, 2025

⚠️ No Changeset found

Latest commit: 81408d9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Documentation Related to Next.js' official documentation.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants