Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
with-facebook-pixel: new implementation with app folder (#49880)
### 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">
- Loading branch information
Showing
11 changed files
with
97 additions
and
0 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import Link from 'next/link' | ||
|
|
||
| export default function About() { | ||
| return ( | ||
| <> | ||
| <h1>About</h1> | ||
|
|
||
| <Link href="/">back to home</Link> | ||
| </> | ||
| ) | ||
| } |
31 changes: 31 additions & 0 deletions
31
examples/with-facebook-pixel/app/components/FacebookPixel.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| 'use client' | ||
|
|
||
| import { usePathname } from 'next/navigation' | ||
| import Script from 'next/script' | ||
| import { useEffect, useState } from 'react' | ||
| import * as pixel from '/lib/fpixel' | ||
|
|
||
| const FacebookPixel = () => { | ||
| const [loaded, setLoaded] = useState(false) | ||
| const pathname = usePathname() | ||
|
|
||
| useEffect(() => { | ||
| if (!loaded) return | ||
|
|
||
| pixel.pageview() | ||
| }, [pathname, loaded]) | ||
|
|
||
| return ( | ||
| <div> | ||
| <Script | ||
| id="fb-pixel" | ||
| src="/scripts/pixel.js" | ||
| strategy="afterInteractive" | ||
| onLoad={() => setLoaded(true)} | ||
| data-pixel-id={pixel.FB_PIXEL_ID} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default FacebookPixel |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as FacebookPixel } from './FacebookPixel' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { FacebookPixel } from './components' | ||
|
|
||
| export default function RootLayout({ children }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| {children} | ||
| <FacebookPixel /> | ||
| </body> | ||
| </html> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Link from 'next/link' | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <> | ||
| <h2> | ||
| Go to `app/layout.js` to see how to implement Facebook Pixel in Next.js | ||
| 13 with the App Router | ||
| </h2> | ||
| <h2>If you want to see old implementation, go to `_pages/index.js`</h2> | ||
| <Link href="/about">About page</Link> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Implementation for Next 13+ using the App Router. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| const PIXEL_ID = document.currentScript.getAttribute('data-pixel-id') | ||
|
|
||
| function initializeFacebookPixel(f, b, e, v, n, t, s) { | ||
| if (f.fbq) return | ||
| n = f.fbq = function () { | ||
| n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) | ||
| } | ||
| if (!f._fbq) f._fbq = n | ||
| n.push = n | ||
| n.loaded = !0 | ||
| n.version = '2.0' | ||
| n.queue = [] | ||
| t = b.createElement(e) | ||
| t.async = !0 | ||
| t.src = v | ||
| s = b.getElementsByTagName(e)[0] | ||
| s.parentNode.insertBefore(t, s) | ||
| } | ||
|
|
||
| initializeFacebookPixel( | ||
| window, | ||
| document, | ||
| 'script', | ||
| 'https://connect.facebook.net/en_US/fbevents.js' | ||
| ) | ||
|
|
||
| window.fbq('init', PIXEL_ID) |
29bd098There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Stats from current release
Default Build (Increase detected⚠️ )
General Overall increase⚠️
Client Bundles (main, webpack) Overall increase⚠️
Legacy Client Bundles (polyfills)
Client Pages Overall decrease ✓
Client Build Manifests Overall increase⚠️
Rendered Page Sizes Overall increase⚠️
Edge SSR bundle Size Overall increase⚠️
Middleware size Overall increase⚠️
Diffs
Diff for page.js
Diff too large to display
Diff for middleware-b..-manifest.js
Diff for middleware-r..-manifest.js
Diff for middleware.js
Diff for edge-ssr.js
Diff too large to display
Diff for _buildManifest.js
Diff for _app-HASH.js
Diff for _error-HASH.js
Diff for amp-HASH.js
Diff for css-HASH.js
Diff for dynamic-HASH.js
Diff for edge-ssr-HASH.js
Diff for head-HASH.js
Diff for hooks-HASH.js
Diff for image-HASH.js
Diff for index-HASH.js
Diff for link-HASH.js
Diff for routerDirect-HASH.js
Diff for script-HASH.js
Diff for withRouter-HASH.js
Diff for 0d536507-HASH.js
Diff for 606-HASH.js
Diff too large to display
Diff for 9.HASH.js
Diff for page-591b4a5f5ff70b6e.js
Diff for page-79b073f4a88c03a3.js
Diff for layout-c7485..505ed50ea.js
Diff for main-HASH.js
Diff too large to display
Diff for main-app-HASH.js
Diff for webpack-HASH.js
Diff for index.html
Diff for link.html
Diff for withRouter.html