Skip to content

Commit 29bd098

Browse files
niko20niko20
authored
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">
1 parent c59c39a commit 29bd098

File tree

11 files changed

+97
-0
lines changed

11 files changed

+97
-0
lines changed

‎examples/with-facebook-pixel/pages/_app.js‎ renamed to ‎examples/with-facebook-pixel/_pages/_app.js‎

File renamed without changes.

‎examples/with-facebook-pixel/pages/_document.js‎ renamed to ‎examples/with-facebook-pixel/_pages/_document.js‎

File renamed without changes.

‎examples/with-facebook-pixel/pages/index.js‎ renamed to ‎examples/with-facebook-pixel/_pages/index.js‎

File renamed without changes.

‎examples/with-facebook-pixel/pages/navigation.js‎ renamed to ‎examples/with-facebook-pixel/_pages/navigation.js‎

File renamed without changes.

‎examples/with-facebook-pixel/app/about/page.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Link from 'next/link'
2+
3+
export default function About() {
4+
return (
5+
<>
6+
<h1>About</h1>
7+
8+
<Link href="/">back to home</Link>
9+
</>
10+
)
11+
}

‎examples/with-facebook-pixel/app/components/FacebookPixel.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use client'
2+
3+
import { usePathname } from 'next/navigation'
4+
import Script from 'next/script'
5+
import { useEffect, useState } from 'react'
6+
import * as pixel from '/lib/fpixel'
7+
8+
const FacebookPixel = () => {
9+
const [loaded, setLoaded] = useState(false)
10+
const pathname = usePathname()
11+
12+
useEffect(() => {
13+
if (!loaded) return
14+
15+
pixel.pageview()
16+
}, [pathname, loaded])
17+
18+
return (
19+
<div>
20+
<Script
21+
id="fb-pixel"
22+
src="/scripts/pixel.js"
23+
strategy="afterInteractive"
24+
onLoad={() => setLoaded(true)}
25+
data-pixel-id={pixel.FB_PIXEL_ID}
26+
/>
27+
</div>
28+
)
29+
}
30+
31+
export default FacebookPixel

‎examples/with-facebook-pixel/app/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as FacebookPixel } from './FacebookPixel'

‎examples/with-facebook-pixel/app/layout.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { FacebookPixel } from './components'
2+
3+
export default function RootLayout({ children }) {
4+
return (
5+
<html lang="en">
6+
<body>
7+
{children}
8+
<FacebookPixel />
9+
</body>
10+
</html>
11+
)
12+
}

‎examples/with-facebook-pixel/app/page.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Link from 'next/link'
2+
3+
export default function Home() {
4+
return (
5+
<>
6+
<h2>
7+
Go to `app/layout.js` to see how to implement Facebook Pixel in Next.js
8+
13 with the App Router
9+
</h2>
10+
<h2>If you want to see old implementation, go to `_pages/index.js`</h2>
11+
<Link href="/about">About page</Link>
12+
</>
13+
)
14+
}

‎examples/with-facebook-pixel/app/readme.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Implementation for Next 13+ using the App Router.

0 commit comments

Comments
 (0)