Merge pull request #389 from jorilallo/ga

Google Analytics

.env.sample

@@ -11,3 +11,4 @@ SLACK_KEY=71315967491.XXXXXXXXXX
 SLACK_SECRET=d2dc414f9953226bad0a356c794XXXXX
 URL=http://localhost:3000
 DEPLOYMENT=hosted
+GOOGLE_ANALYTICS_ID=

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/Layout.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import Navigation from './Navigation';
+import Analytics from '../../../shared/components/Analytics';
 import globalStyles from '../../../shared/styles/globals';
 
 type Props = {
@@ -18,6 +19,7 @@ export default function Layout({ children }: Props) {
           <title>Outline</title>
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </Helmet>
+        <Analytics />
 
         {'{{HEAD}}'}
         {'{{CSS}}'}

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