29bd0980cf
### What? * **Facebook pixel implementation with the new `app folder` structure.** * The pixel script can now be kept in the public folder. * The Facebook script can be placed in the `layout.js` file * A component called `FacebookPixel` is provided to handle the initial script setup and manage `PageView` events when the page changes. * Classic implementation with `pages` folder now is in `_pages` ### Why? To provide an example of implementing the new `app folder` structure with Next.js ˆ13, which includes using the new files like `layout`, `page`, etc. ### How? Utilizing the `next/script` package and the `layout.js` file to initialize the Facebook pixel when the application starts and manage subsequent events. ### Evidence of Implementation: Here are some examples that demonstrate the successful implementation of the Facebook pixel using the new `app folder` structure and `Next.js ˆ13` Tracking main page `app/page.js` <img width="399" alt="image" src="https://github.com/vercel/next.js/assets/26902419/fd3baee8-363d-4f2c-b949-517409ad36de"> <img width="2105" alt="image" src="https://github.com/vercel/next.js/assets/26902419/7d91d786-cd31-4c21-bb79-7e9a78fb1c3b"> Tracking another path `app/about/page.js` <img width="333" alt="image" src="https://github.com/vercel/next.js/assets/26902419/dda7bc05-6fb5-482d-8a6a-d981a08c66e1"> <img width="2102" alt="image" src="https://github.com/vercel/next.js/assets/26902419/b0392d6e-31fe-42d1-a7b4-ca38879dde94"> navigation between pages with `next/link` <img width="2098" alt="image" src="https://github.com/vercel/next.js/assets/26902419/21115bee-a77f-4467-bb25-c95e2850cda2"> |
||
|---|---|---|
| .. | ||
| _pages | ||
| app | ||
| lib | ||
| public | ||
| .env.local.example | ||
| .gitignore | ||
| package.json | ||
| README.md | ||
Example app using Facebook Pixel
This example shows how to use Next.js along with Facebook Pixel. A custom _document is used to inject base code. A _app is used to track route changes and send page views to Facebook Pixel.
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-facebook-pixel with-facebook-pixel-app
yarn create next-app --example with-facebook-pixel with-facebook-pixel-app
pnpm create next-app --example with-facebook-pixel with-facebook-pixel-app
Next, copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):
cp .env.local.example .env.local
Set the NEXT_PUBLIC_FACEBOOK_PIXEL_ID variable in .env.local to match your facebook app's pixel ID.
Deploy it to the cloud with Vercel (Documentation).