feat: Wires up facebook pixel

.env.example

@@ -1,4 +1,5 @@
 ANALYZE=false
+FACEBOOK_PIXEL_TRACKING_ID=<TRACKING_ID>
 GOOGLE_ANALYTICS_TRACKING_ID_WEB=<TRACKING_ID>
 NODE_ENV=development
 PORT=3000

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 = ({

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<PropsFlowType> {
     /* eslint-disable no-underscore-dangle */
     if (!window.__GA_INITIALIZED__) {
       initGA();
+      initFBPixel();
       // eslint-disable-next-line immutable/no-mutation
       window.__GA_INITIALIZED__ = true;
     }

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,
 };

flow-typed/npm/react-facebook-pixel_vx.x.x.js

@@ -0,0 +1,60 @@
+// flow-typed signature: 304c1d91dc10e98fa3d0eacdb6cd54bc
+// flow-typed version: <<STUB>>/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'>;
+}

flow-typed/npm/react-jss_vx.x.x.js

@@ -1,5 +1,5 @@
-// flow-typed signature: ef44d76b4653bdc1d9534d9168f858ba
-// flow-typed version: <<STUB>>/react-jss_v^8.6.1/flow_v0.96.0
+// flow-typed signature: 1dc63351906a42bb15182f6f45242507
+// flow-typed version: <<STUB>>/react-jss_v8.6.1/flow_v0.96.0
 
 /**
  * This is an autogenerated libdef stub for:

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"