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"> |
||
|---|---|---|
| .. | ||
| scripts | ||
| favicon.ico | ||