From 8d2d4e7eb1ec26208e428de52f0e5e77d841a96c Mon Sep 17 00:00:00 2001 From: Jon Cursi Date: Fri, 5 Apr 2019 16:07:36 -0400 Subject: [PATCH] feat: Wires up facebook pixel --- .env.example | 1 + app/helpers/analytics.js | 12 ++++ app/layouts/PageLayout/index.js | 3 +- app/pages/_document.js | 7 ++- flow-typed/npm/react-facebook-pixel_vx.x.x.js | 60 +++++++++++++++++++ flow-typed/npm/react-jss_vx.x.x.js | 4 +- package-lock.json | 5 ++ package.json | 5 +- 8 files changed, 91 insertions(+), 6 deletions(-) create mode 100644 flow-typed/npm/react-facebook-pixel_vx.x.x.js diff --git a/.env.example b/.env.example index 0fa1ef0..cec9e5a 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,5 @@ ANALYZE=false +FACEBOOK_PIXEL_TRACKING_ID= GOOGLE_ANALYTICS_TRACKING_ID_WEB= NODE_ENV=development PORT=3000 diff --git a/app/helpers/analytics.js b/app/helpers/analytics.js index 19935f2..b49dfc6 100644 --- a/app/helpers/analytics.js +++ b/app/helpers/analytics.js @@ -6,6 +6,7 @@ /* global window */ import ReactGA from 'react-ga'; +import ReactPixel from 'react-facebook-pixel'; import ENV from '../constants/env'; @@ -15,10 +16,21 @@ export const initGA = () => { }); }; +export const initFBPixel = () => { + // https://developers.facebook.com/docs/facebook-pixel/pixel-with-ads/conversion-tracking#advanced_match + const advancedMatching = {}; + const options = { + autoConfig: true, + debug: ENV.NODE_ENV === 'development', + }; + ReactPixel.init(ENV.FACEBOOK_PIXEL_TRACKING_ID, advancedMatching, options); +}; + export const logPageView = () => { const page = window.location.pathname; ReactGA.set({ page }); ReactGA.pageview(page); + ReactPixel.pageView(); }; export const logEvent = ({ diff --git a/app/layouts/PageLayout/index.js b/app/layouts/PageLayout/index.js index 69c2e6b..0ce8301 100644 --- a/app/layouts/PageLayout/index.js +++ b/app/layouts/PageLayout/index.js @@ -7,7 +7,7 @@ import * as React from 'react'; -import { initGA, logPageView } from '../../helpers/analytics'; +import { initFBPixel, initGA, logPageView } from '../../helpers/analytics'; type PropsFlowType = { children: React.Node, @@ -20,6 +20,7 @@ class PageLayout extends React.Component { /* eslint-disable no-underscore-dangle */ if (!window.__GA_INITIALIZED__) { initGA(); + initFBPixel(); // eslint-disable-next-line immutable/no-mutation window.__GA_INITIALIZED__ = true; } diff --git a/app/pages/_document.js b/app/pages/_document.js index 7121703..834768c 100644 --- a/app/pages/_document.js +++ b/app/pages/_document.js @@ -14,8 +14,13 @@ import type { ContextFlowType } from '../types'; import COLORS from '../constants/colors'; // choose which env variables should be available on the client -const { GOOGLE_ANALYTICS_TRACKING_ID_WEB, NODE_ENV } = process.env; +const { + FACEBOOK_PIXEL_TRACKING_ID, + GOOGLE_ANALYTICS_TRACKING_ID_WEB, + NODE_ENV, +} = process.env; const ENV = { + FACEBOOK_PIXEL_TRACKING_ID, GOOGLE_ANALYTICS_TRACKING_ID_WEB, NODE_ENV, }; diff --git a/flow-typed/npm/react-facebook-pixel_vx.x.x.js b/flow-typed/npm/react-facebook-pixel_vx.x.x.js new file mode 100644 index 0000000..532db89 --- /dev/null +++ b/flow-typed/npm/react-facebook-pixel_vx.x.x.js @@ -0,0 +1,60 @@ +// flow-typed signature: 304c1d91dc10e98fa3d0eacdb6cd54bc +// flow-typed version: <>/react-facebook-pixel_v0.1.2/flow_v0.96.0 + +/** + * This is an autogenerated libdef stub for: + * + * 'react-facebook-pixel' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'react-facebook-pixel' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module 'react-facebook-pixel/demo/index' { + declare module.exports: any; +} + +declare module 'react-facebook-pixel/dist/fb-pixel' { + declare module.exports: any; +} + +declare module 'react-facebook-pixel/src/index' { + declare module.exports: any; +} + +declare module 'react-facebook-pixel/webpack.config.dev' { + declare module.exports: any; +} + +declare module 'react-facebook-pixel/webpack.config.dist' { + declare module.exports: any; +} + +// Filename aliases +declare module 'react-facebook-pixel/demo/index.js' { + declare module.exports: $Exports<'react-facebook-pixel/demo/index'>; +} +declare module 'react-facebook-pixel/dist/fb-pixel.js' { + declare module.exports: $Exports<'react-facebook-pixel/dist/fb-pixel'>; +} +declare module 'react-facebook-pixel/src/index.js' { + declare module.exports: $Exports<'react-facebook-pixel/src/index'>; +} +declare module 'react-facebook-pixel/webpack.config.dev.js' { + declare module.exports: $Exports<'react-facebook-pixel/webpack.config.dev'>; +} +declare module 'react-facebook-pixel/webpack.config.dist.js' { + declare module.exports: $Exports<'react-facebook-pixel/webpack.config.dist'>; +} diff --git a/flow-typed/npm/react-jss_vx.x.x.js b/flow-typed/npm/react-jss_vx.x.x.js index 8aa2330..7af17c0 100644 --- a/flow-typed/npm/react-jss_vx.x.x.js +++ b/flow-typed/npm/react-jss_vx.x.x.js @@ -1,5 +1,5 @@ -// flow-typed signature: ef44d76b4653bdc1d9534d9168f858ba -// flow-typed version: <>/react-jss_v^8.6.1/flow_v0.96.0 +// flow-typed signature: 1dc63351906a42bb15182f6f45242507 +// flow-typed version: <>/react-jss_v8.6.1/flow_v0.96.0 /** * This is an autogenerated libdef stub for: diff --git a/package-lock.json b/package-lock.json index 85c4c1b..5398070 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8432,6 +8432,11 @@ "warning": "^4.0.1" } }, + "react-facebook-pixel": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/react-facebook-pixel/-/react-facebook-pixel-0.1.2.tgz", + "integrity": "sha512-6ObMnP8U42m/r2nCft0VqVG8xPk2JEsA4tDK+sRovTXhIaA/UmH2CywmC2lh/0yXY3Sq9I2MQmBBUMjZ6/rfbg==" + }, "react-ga": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.7.tgz", diff --git a/package.json b/package.json index 7e6cb2e..9ae054d 100644 --- a/package.json +++ b/package.json @@ -16,15 +16,16 @@ "@zeit/next-css": "1.0.1", "express": "4.16.4", "htmlescape": "1.1.1", - "jss": "^9.8.7", + "jss": "9.8.7", "mdi-material-ui": "5.10.0", "next": "8.0.4", "next-routes": "1.4.2", "react": "16.8.6", "react-art": "16.8.6", "react-dom": "16.8.6", + "react-facebook-pixel": "0.1.2", "react-ga": "2.5.7", - "react-jss": "^8.6.1", + "react-jss": "8.6.1", "sitemap": "2.1.0", "styled-jsx": "3.2.1", "validator": "10.11.0"