This codebase is a simple example of how to use Facebook Pixel with a React application. It includes a basic React application with a form that tracks a custom event when submitted.
Note: To use the Facebook Pixel, you need to use the same domain that you verified while creating the pixel code on Facebook.
Note: You can use the Meta Pixel Helper extension to see the events and debug.
I am Mohd Amir, a full-stack developer with a passion for building scalable and maintainable applications. You can find me on GitHub and Twitter.
You can search this Webdev MohdAmir - mohd amir you will find all my social media and everything.
The codebase is structured as follows:
src/: This directory contains the source code for the React application.main.jsx: This file contains the main entry point for the React application.App.jsx: This file contains the main component of the application.hooks/: This directory contains custom React hooks.facebookPixelHook.js: This file contains a custom hook for loading the Facebook Pixel script.
utils/: This directory contains utility functions.facebookEvents.js: This file contains functions for tracking events with Facebook Pixel.
config.js: This file contains the Facebook Pixel ID.
index.html: This file is the entry point for the application.vite.config.js: This file contains the configuration for Vite..env: This file contains environment variables.VITE_FB_PIXEL_ID: The Facebook Pixel ID.
This codebase can be used in the following scenarios:
- Tracking page views.
- Tracking custom events.
- Tracking form submissions.
- Clone the repository with
git clone https://github.com/webdev-mohdamir/facebook-pixel-with-react.git. - Initialize the repository with
git init. - Install the dependencies with
npm install. - Start the development server with
npm run dev. - Open the application in a web browser at
http://localhost:3000. - Submit the form to track a custom event.
Note: You need to replace the VITE_FB_PIXEL_ID environment variable with your own Facebook Pixel ID.