From fd4eb558a26e90d1b0fa553c6712be15b802ac46 Mon Sep 17 00:00:00 2001 From: Ash Connell Date: Mon, 19 Oct 2020 11:00:27 +1100 Subject: [PATCH] Add with-facebook-pixel example (#17667) --- .../with-facebook-pixel/.env.local.example | 1 + examples/with-facebook-pixel/.gitignore | 30 ++++++++++++++++++ examples/with-facebook-pixel/README.md | 29 +++++++++++++++++ .../components/FacebookPixel.js | 27 ++++++++++++++++ examples/with-facebook-pixel/package.json | 16 ++++++++++ examples/with-facebook-pixel/pages/_app.js | 11 +++++++ examples/with-facebook-pixel/pages/index.js | 7 ++++ .../with-facebook-pixel/public/favicon.ico | Bin 0 -> 15086 bytes 8 files changed, 121 insertions(+) create mode 100644 examples/with-facebook-pixel/.env.local.example create mode 100644 examples/with-facebook-pixel/.gitignore create mode 100644 examples/with-facebook-pixel/README.md create mode 100644 examples/with-facebook-pixel/components/FacebookPixel.js create mode 100644 examples/with-facebook-pixel/package.json create mode 100644 examples/with-facebook-pixel/pages/_app.js create mode 100644 examples/with-facebook-pixel/pages/index.js create mode 100644 examples/with-facebook-pixel/public/favicon.ico diff --git a/examples/with-facebook-pixel/.env.local.example b/examples/with-facebook-pixel/.env.local.example new file mode 100644 index 0000000000..33f9e4bc72 --- /dev/null +++ b/examples/with-facebook-pixel/.env.local.example @@ -0,0 +1 @@ +NEXT_PUBLIC_FACEBOOK_PIXEL_ID= \ No newline at end of file diff --git a/examples/with-facebook-pixel/.gitignore b/examples/with-facebook-pixel/.gitignore new file mode 100644 index 0000000000..20fccdd4b8 --- /dev/null +++ b/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 diff --git a/examples/with-facebook-pixel/README.md b/examples/with-facebook-pixel/README.md new file mode 100644 index 0000000000..e45a7183cc --- /dev/null +++ b/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)). diff --git a/examples/with-facebook-pixel/components/FacebookPixel.js b/examples/with-facebook-pixel/components/FacebookPixel.js new file mode 100644 index 0000000000..6d0a603812 --- /dev/null +++ b/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 +} diff --git a/examples/with-facebook-pixel/package.json b/examples/with-facebook-pixel/package.json new file mode 100644 index 0000000000..d907d0ca63 --- /dev/null +++ b/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" +} diff --git a/examples/with-facebook-pixel/pages/_app.js b/examples/with-facebook-pixel/pages/_app.js new file mode 100644 index 0000000000..df43ee3910 --- /dev/null +++ b/examples/with-facebook-pixel/pages/_app.js @@ -0,0 +1,11 @@ +import FacebookPixel from '../components/FacebookPixel' + +function MyApp({ Component, pageProps }) { + return ( + + + + ) +} + +export default MyApp diff --git a/examples/with-facebook-pixel/pages/index.js b/examples/with-facebook-pixel/pages/index.js new file mode 100644 index 0000000000..57661c3cfe --- /dev/null +++ b/examples/with-facebook-pixel/pages/index.js @@ -0,0 +1,7 @@ +export default function Home() { + return ( +

+ Go to `pages/_app.ks` to see how you can add Facebook Pixel to your app +

+ ) +} diff --git a/examples/with-facebook-pixel/public/favicon.ico b/examples/with-facebook-pixel/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a GIT binary patch literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*-