From 7bad7a25673102c5db70be16248f14f223a87a8f Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 9 Nov 2017 00:01:02 -0800
Subject: [PATCH] Google Analytics tracking on SSR pages

---
 .env.sample                          |  1 +
 server/pages/components/Analytics.js | 30 ++++++++++++++++++++++++++++
 server/pages/components/Layout.js    |  2 ++
 3 files changed, 33 insertions(+)
 create mode 100644 server/pages/components/Analytics.js

diff --git a/.env.sample b/.env.sample
index 66b83dc1b..7e61c31e4 100644
--- a/.env.sample
+++ b/.env.sample
@@ -11,3 +11,4 @@ SLACK_KEY=71315967491.XXXXXXXXXX
 SLACK_SECRET=d2dc414f9953226bad0a356c794XXXXX
 URL=http://localhost:3000
 DEPLOYMENT=hosted
+GOOGLE_ANALYTICS_ID=
diff --git a/server/pages/components/Analytics.js b/server/pages/components/Analytics.js
new file mode 100644
index 000000000..b9f085baa
--- /dev/null
+++ b/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;
diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js
index 3f873c086..d12937b93 100644
--- a/server/pages/components/Layout.js
+++ b/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}}'}