Add with-facebook-pixel example (#17667)

examples/with-facebook-pixel/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_FACEBOOK_PIXEL_ID=

examples/with-facebook-pixel/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

examples/with-facebook-pixel/README.md

@@ -0,0 +1,29 @@
+## Example app using Facebook Pixel
+
+This example shows how to use Next.js along with Facebook Pixel. A [custom `App`](https://nextjs.org/docs/advanced-features/custom-app) is used to track route changes and send page views to Facebook Pixel. This example uses [react-facebook-pixel](https://www.npmjs.com/package/react-facebook-pixel).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-facebook-pixel)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-facebook-pixel with-facebook-pixel-app
+# or
+yarn create next-app --example with-facebook-pixel with-facebook-pixel-app
+```
+
+Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Set the `NEXT_PUBLIC_FACEBOOK_PIXEL_ID` variable in `.env.local` to match your facebook app's pixel ID. If not specified, tracking will be disabled.
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

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

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+const pixelId = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
+
+export default function FacebookPixel({ children }) {
+  const router = useRouter()
+  useEffect(() => {
+    if (!pixelId) return
+    let fb
+    function onRouteChange() {
+      fb.pageView()
+    }
+    import('react-facebook-pixel')
+      .then((module) => (fb = module.default))
+      .then(() => {
+        fb.init(pixelId, {
+          autoConfig: true,
+          debug: true,
+        })
+        fb.pageView()
+      })
+    router.events.on('routeChangeComplete', onRouteChange)
+    return () => router.events.off('routeChangeComplete', onRouteChange)
+  }, [router.events])
+  return children
+}

examples/with-facebook-pixel/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-facebook-pixel",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-facebook-pixel": "^1.0.3"
+  },
+  "license": "MIT"
+}

examples/with-facebook-pixel/pages/_app.js

@@ -0,0 +1,11 @@
+import FacebookPixel from '../components/FacebookPixel'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <FacebookPixel>
+      <Component {...pageProps} />
+    </FacebookPixel>
+  )
+}
+
+export default MyApp

examples/with-facebook-pixel/pages/index.js

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <h1>
+      Go to `pages/_app.ks` to see how you can add Facebook Pixel to your app
+    </h1>
+  )
+}