vercel · kodiakhq · Jun 15, 2023 · May 16, 2023 · May 16, 2023 · May 16, 2023
diff --git a/examples/with-facebook-pixel/pages/_app.js → examples/with-facebook-pixel/_pages/_app.js b/examples/with-facebook-pixel/pages/_app.js → examples/with-facebook-pixel/_pages/_app.js
diff --git a/...es/with-facebook-pixel/pages/_document.js → ...s/with-facebook-pixel/_pages/_document.js b/...es/with-facebook-pixel/pages/_document.js → ...s/with-facebook-pixel/_pages/_document.js
diff --git a/examples/with-facebook-pixel/pages/index.js → examples/with-facebook-pixel/_pages/index.js b/examples/with-facebook-pixel/pages/index.js → examples/with-facebook-pixel/_pages/index.js
diff --git a/...s/with-facebook-pixel/pages/navigation.js → .../with-facebook-pixel/_pages/navigation.js b/...s/with-facebook-pixel/pages/navigation.js → .../with-facebook-pixel/_pages/navigation.js
diff --git a/examples/with-facebook-pixel/app/about/page.js b/examples/with-facebook-pixel/app/about/page.js
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <>
+      <h1>About</h1>
+
+      <Link href="/">back to home</Link>
+    </>
+  )
+}
diff --git a/examples/with-facebook-pixel/app/components/FacebookPixel.js b/examples/with-facebook-pixel/app/components/FacebookPixel.js
@@ -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
diff --git a/examples/with-facebook-pixel/app/components/index.js b/examples/with-facebook-pixel/app/components/index.js
@@ -0,0 +1 @@
+export { default as FacebookPixel } from './FacebookPixel'
diff --git a/examples/with-facebook-pixel/app/layout.js b/examples/with-facebook-pixel/app/layout.js
@@ -0,0 +1,12 @@
+import { FacebookPixel } from './components'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <FacebookPixel />
+      </body>
+    </html>
+  )
+}
diff --git a/examples/with-facebook-pixel/app/page.js b/examples/with-facebook-pixel/app/page.js
@@ -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>
+    </>
+  )
+}
diff --git a/examples/with-facebook-pixel/app/readme.txt b/examples/with-facebook-pixel/app/readme.txt
@@ -0,0 +1 @@
+Implementation for Next 13+ using the App Router.
diff --git a/examples/with-facebook-pixel/public/scripts/pixel.js b/examples/with-facebook-pixel/public/scripts/pixel.js
@@ -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)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as FacebookPixel } from './FacebookPixel'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Implementation for Next 13+ using the App Router.