feat(site) Add Google Analytics only for production

Author: montogeek

DISCUSSION.md

@@ -12,7 +12,7 @@ this branch:
 - [ ] Rethink external population process
 - [x] Extract anchors into `_content.json` via `DirectoryTreePlugin` (Fernando)
 - [ ] Finish re-incorporating mobile sidebar
-- [ ] Re-integrate google-analytics
+- [x] Re-integrate google-analytics (Fernando)
 - [ ] Re-incorporate `redirects.json`
 - [x] Populate page title in `server.jsx` (Fernando)
 - [ ] Finish `Navigation` component (greg)

package.json

@@ -111,6 +111,7 @@
     "react": "^16.2.0",
     "react-banner": "^0.5.0",
     "react-dom": "^16.2.0",
+    "react-g-analytics": "0.4.2",
     "react-hot-loader": "^4.0.0-beta.12",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

src/index.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-g-analytics';
 import Site from './components/Site/Site';
 
-// TODO: Re-integrate <GoogleAnalytics analyticsId="UA-46921629-2" />
-// Consider `react-g-analytics` package
+let gaID;
+
+if(process.env.NODE_ENV === 'production') {
+  gaID = 'UA-46921629-2';
+}
 
 // Client Side Rendering
 if ( window.document !== undefined ) {
   ReactDOM.render((
-    <BrowserRouter>
+    <BrowserRouter id={gaID}>
       <Route
         path="/"
         render={ props => (

webpack.common.js

@@ -36,7 +36,6 @@ module.exports = (env = {}) => ({
           loader: 'remark-loader',
           options: {
             plugins: [
-              // TODO: Add necessary remark plugins
               require('./tip'),
               require('remark-slug'),
               [

webpack.dev.js

@@ -5,31 +5,35 @@ const HTMLPlugin = require('html-webpack-plugin');
 const HTMLTemplate = require('html-webpack-template');
 const common = require('./webpack.common.js');
 
-module.exports = env => merge(common(env), {
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new HTMLPlugin({
-      inject: false,
-      template: HTMLTemplate,
-      title: 'webpack',
-      appMountId: 'root',
-      mobile: true,
-      favicon: './favicon.ico',
-      meta: {
-        description: '...'
-      }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      chunks: [ 'index' ]
-    })
-  ],
-  devServer: {
-    contentBase: path.resolve(__dirname, './dist'),
-    port: 3000,
-    hot: true,
-    inline: true,
-    compress: true,
-    historyApiFallback: true
-  }
-})
+module.exports = env =>
+  merge(common(env), {
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+      new HTMLPlugin({
+        inject: false,
+        template: HTMLTemplate,
+        title: 'webpack',
+        appMountId: 'root',
+        mobile: true,
+        favicon: './favicon.ico',
+        meta: {
+          description: '...'
+        }
+      }),
+      new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendor',
+        chunks: ['index']
+      }),
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify('development')
+      })
+    ],
+    devServer: {
+      contentBase: path.resolve(__dirname, './dist'),
+      port: 3000,
+      hot: true,
+      inline: true,
+      compress: true,
+      historyApiFallback: true
+    }
+  });