Google Analytics tracking on SSR pages

.env.sample

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

server/pages/components/Analytics.js

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