From 29bd0980cf06bf2702867706cfcb7baf442988b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Figueroa?= <figueroanicolas.a@gmail.com>
Date: Thu, 15 Jun 2023 00:11:32 -0400
Subject: [PATCH] with-facebook-pixel: new implementation with app folder
 (#49880)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 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">
---
 .../{pages => _pages}/_app.js                 |  0
 .../{pages => _pages}/_document.js            |  0
 .../{pages => _pages}/index.js                |  0
 .../{pages => _pages}/navigation.js           |  0
 .../with-facebook-pixel/app/about/page.js     | 11 +++++++
 .../app/components/FacebookPixel.js           | 31 +++++++++++++++++++
 .../app/components/index.js                   |  1 +
 examples/with-facebook-pixel/app/layout.js    | 12 +++++++
 examples/with-facebook-pixel/app/page.js      | 14 +++++++++
 examples/with-facebook-pixel/app/readme.txt   |  1 +
 .../public/scripts/pixel.js                   | 27 ++++++++++++++++
 11 files changed, 97 insertions(+)
 rename examples/with-facebook-pixel/{pages => _pages}/_app.js (100%)
 rename examples/with-facebook-pixel/{pages => _pages}/_document.js (100%)
 rename examples/with-facebook-pixel/{pages => _pages}/index.js (100%)
 rename examples/with-facebook-pixel/{pages => _pages}/navigation.js (100%)
 create mode 100644 examples/with-facebook-pixel/app/about/page.js
 create mode 100644 examples/with-facebook-pixel/app/components/FacebookPixel.js
 create mode 100644 examples/with-facebook-pixel/app/components/index.js
 create mode 100644 examples/with-facebook-pixel/app/layout.js
 create mode 100644 examples/with-facebook-pixel/app/page.js
 create mode 100644 examples/with-facebook-pixel/app/readme.txt
 create mode 100644 examples/with-facebook-pixel/public/scripts/pixel.js

diff --git a/examples/with-facebook-pixel/pages/_app.js b/examples/with-facebook-pixel/_pages/_app.js
similarity index 100%
rename from examples/with-facebook-pixel/pages/_app.js
rename to examples/with-facebook-pixel/_pages/_app.js
diff --git a/examples/with-facebook-pixel/pages/_document.js b/examples/with-facebook-pixel/_pages/_document.js
similarity index 100%
rename from examples/with-facebook-pixel/pages/_document.js
rename to examples/with-facebook-pixel/_pages/_document.js
diff --git a/examples/with-facebook-pixel/pages/index.js b/examples/with-facebook-pixel/_pages/index.js
similarity index 100%
rename from examples/with-facebook-pixel/pages/index.js
rename to examples/with-facebook-pixel/_pages/index.js
diff --git a/examples/with-facebook-pixel/pages/navigation.js b/examples/with-facebook-pixel/_pages/navigation.js
similarity index 100%
rename from examples/with-facebook-pixel/pages/navigation.js
rename to examples/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
new file mode 100644
index 000000000000..72bd94511ee1
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..7da3bd2ac82b
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..c88f9e0a893e
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..80838a5cadd9
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..a978cc1d42cb
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..60d7e5a8a3d8
--- /dev/null
+++ b/examples/with-facebook-pixel/app/readme.txt
@@ -0,0 +1 @@
+Implementation for Next 13+ using the App Router.
\ No newline at end of file
diff --git a/examples/with-facebook-pixel/public/scripts/pixel.js b/examples/with-facebook-pixel/public/scripts/pixel.js
new file mode 100644
index 000000000000..5a5e50b603cc
--- /dev/null
+++ 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)