Add with-facebook-pixel example

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,23 @@
+## Example app using Facebook Pixel
+
+This example shows how to use Next.js along with Facebook Pixel. A custom `_app.js` is used to track route changes and send pageviews to facebook pixel. This example uses [react-facebook-pixel](https://www.npmjs.com/package/react-facebook-pixel).
+
+You will need to set your `NEXT_PUBLIC_FACEBOOK_PIXEL_ID` environment variable for it to send events to your facebook app. When not specified, tracking is disabled.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com/now):
+
+[![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
+```
+
+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 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'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <FacebookPixel>
+      <Component {...pageProps} />
+    </FacebookPixel>
+  )
+}
+
+export default MyApp

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

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <h1>with-facebook-pixel</h1>
+}