with-facebook-pixel: new implementation with app folder

[niko20]

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

Tracking another path app/about/page.js

navigation between pages with next/link

[niko20]

@lfades ✋🏻 please help me with this contribution, I worked on the last examples and now it's an example of Facebook pixel but using the new app folder.

😃

[dvakatsiienko]

Hi! The linter fails here

[niko20]

@dvakatsiienko Hi, I appreciate your support. The issue was "prettier"... thank you.

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: bb557bd

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