Insert ga tags in app

app/components/Layout/Layout.js

@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
+import Analytics from 'shared/components/Analytics';
 import Flex from 'shared/components/Flex';
 import { color, layout } from 'shared/styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
@@ -108,6 +109,7 @@ type Props = {
             content="width=device-width, initial-scale=1.0"
           />
         </Helmet>
+        <Analytics />
 
         {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
         {this.props.notifications}

server/pages/components/Analytics.js

@@ -1,30 +0,0 @@
-// @flow
-import React from 'react';
-
-function getScript() {
-  if (!process.env.GOOGLE_ANALYTICS_ID) return undefined;
-
-  return {
-    __html: `
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', '${process.env.GOOGLE_ANALYTICS_ID}');
-    `,
-  };
-}
-
-function Analytics() {
-  if (!process.env.GOOGLE_ANALYTICS_ID) return null;
-
-  return (
-    <span>
-      <script
-        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_ID}`}
-      />
-      <script dangerouslySetInnerHTML={getScript()} />
-    </span>
-  );
-}
-
-export default Analytics;

server/pages/components/Layout.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import Navigation from './Navigation';
-import Analytics from './Analytics';
+import Analytics from '../../../shared/components/Analytics';
 import globalStyles from '../../../shared/styles/globals';
 
 type Props = {

shared/components/Analytics.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+
+function Analytics() {
+  const id = process.env.GOOGLE_ANALYTICS_ID;
+  if (!id) return null;
+
+  return (
+    <span>
+      <script src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${id}');
+        `,
+        }}
+      />
+    </span>
+  );
+}
+
+export default Analytics;

webpack.config.js

@@ -14,7 +14,7 @@ const definePlugin = new webpack.DefinePlugin({
   SLACK_KEY: JSON.stringify(process.env.SLACK_KEY),
   BASE_URL: JSON.stringify(process.env.URL),
   BUGSNAG_KEY: JSON.stringify(process.env.BUGSNAG_KEY),
-  DEPLOYMENT: JSON.stringify(process.env.DEPLOYMENT || 'hosted'),
+  DEPLOYMENT: JSON.stringify(process.env.DEPLOYMENT || 'hosted')
 });
 
 module.exports = {

webpack.config.prod.js

@@ -38,6 +38,7 @@ productionWebpackConfig.plugins.push(
   new webpack.DefinePlugin({
     'process.env': {
       NODE_ENV: JSON.stringify('production'),
+      GOOGLE_ANALYTICS_ID: JSON.stringify(process.env.GOOGLE_ANALYTICS_ID),
     },
   })
 );