From e45ac7b1f30931fabd2d44f97c5cc53566a404b7 Mon Sep 17 00:00:00 2001
From: Adam Mockor <adam.mockor@gmail.com>
Date: Fri, 30 Aug 2019 15:55:55 +0200
Subject: [PATCH 1/2] add GA to track page views in styelguide

---
 packages/styleguide/package-lock.json         |  5 ++
 packages/styleguide/package.json              |  1 +
 packages/styleguide/src/App.js                |  3 ++
 .../src/components/GoogleAnalytics/index.js   | 51 +++++++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 packages/styleguide/src/components/GoogleAnalytics/index.js

diff --git a/packages/styleguide/package-lock.json b/packages/styleguide/package-lock.json
index e6609200896..c9fbf985c1f 100644
--- a/packages/styleguide/package-lock.json
+++ b/packages/styleguide/package-lock.json
@@ -17175,6 +17175,11 @@
       "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.0.2.tgz",
       "integrity": "sha512-846zt81ijEC0ul6sBWzxkI5EGIE39ft9EaNzQUcszV/WWWDnldFJ+tKU7Et2GhZ4OHT/cy1GHcjsLLsdiOXhBg=="
     },
+    "react-ga": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.6.0.tgz",
+      "integrity": "sha512-GWHBWZDFjDGMkIk1LzroIn0mNTygKw3adXuqvGvheFZvlbpqMPbHsQsTdQBIxRRdXGQM/Zq+dQLRPKbwIHMTaw=="
+    },
     "react-input-autosize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
index c943af07ebc..56e0d6e5a5f 100644
--- a/packages/styleguide/package.json
+++ b/packages/styleguide/package.json
@@ -33,6 +33,7 @@
     "react-dom": "~16.8.3",
     "react-element-to-jsx-string": "~14.0.1",
     "react-frame-component": "~4.0.0",
+    "react-ga": "~2.6.0",
     "react-markings": "~1.3.0",
     "react-responsive": "~6.0.1",
     "react-router-dom": "~5.0.0",
diff --git a/packages/styleguide/src/App.js b/packages/styleguide/src/App.js
index 639f58c7bc7..72ca26398c6 100644
--- a/packages/styleguide/src/App.js
+++ b/packages/styleguide/src/App.js
@@ -7,6 +7,7 @@ import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import * as theme from './style/theme';
 import { rem } from './style/utils';
 
+import { init, RouteTracker } from './components/GoogleAnalytics';
 import Header from './components/Header/';
 import Sidebar from './components/Sidebar/';
 import Navigation from './components/Navigation/';
@@ -49,6 +50,7 @@ class App extends React.Component {
       name,
       theme: projectTheme = {},
       styleguideBasePath = '/styleguide/',
+      gaId,
     } = config;
 
     const activeClass = this.state.isNavActive ? 'is-active' : '';
@@ -77,6 +79,7 @@ class App extends React.Component {
       <MdxWrapper>
         <GlobalStyle />
         <BrowserRouter basename={styleguideBasePath}>
+          {gaId && init({ gaId, debug: true }) && <RouteTracker />}
           <ThemeProvider theme={localTheme}>
             <PageLayout>
               <PageHeader
diff --git a/packages/styleguide/src/components/GoogleAnalytics/index.js b/packages/styleguide/src/components/GoogleAnalytics/index.js
new file mode 100644
index 00000000000..7fe9aadff8a
--- /dev/null
+++ b/packages/styleguide/src/components/GoogleAnalytics/index.js
@@ -0,0 +1,51 @@
+// utils/GoogleAnalytics.js
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactGA from 'react-ga';
+import { Route } from 'react-router-dom';
+
+const GoogleAnalytics = ({ location, ...options }) => {
+  const { pathname, search } = location;
+
+  useEffect(
+    () => {
+      logPageChange(pathname, search, options);
+    },
+    [pathname, search]
+  );
+
+  return null;
+};
+
+GoogleAnalytics.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+    search: PropTypes.string,
+  }).isRequired,
+  options: PropTypes.object,
+};
+
+export default GoogleAnalytics;
+
+function logPageChange(pathname, search = '', options) {
+  const page = pathname + search;
+  const { location } = window;
+  ReactGA.set({
+    page,
+    location: `${location.origin}${page}`,
+    ...options,
+  });
+  ReactGA.pageview(page);
+}
+
+export const RouteTracker = () => <Route component={GoogleAnalytics} />;
+
+export const init = ({ gaId, testMode, ...other }) => {
+  const isGAEnabled = true; //process.env.NODE_ENV === 'production';
+  console.log('gaId:', gaId);
+  if (isGAEnabled && !window.ga) {
+    ReactGA.initialize(gaId, { testMode, ...other });
+  }
+
+  return isGAEnabled;
+};

From 912b310ffcb23227dbca8748d7738472799684a1 Mon Sep 17 00:00:00 2001
From: Adam Mockor <adam.mockor@gmail.com>
Date: Fri, 30 Aug 2019 16:09:15 +0200
Subject: [PATCH 2/2] add GA events to Preview

---
 .../src/components/Preview/Preview.js         | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/styleguide/src/components/Preview/Preview.js b/packages/styleguide/src/components/Preview/Preview.js
index 3da77d1ea54..bf0deafe936 100644
--- a/packages/styleguide/src/components/Preview/Preview.js
+++ b/packages/styleguide/src/components/Preview/Preview.js
@@ -12,6 +12,7 @@ import cx from 'classnames';
 import Select from 'react-select';
 import styled from 'styled-components';
 import chroma from 'chroma-js';
+import ReactGA from 'react-ga';
 
 import PreviewTitleBar from './PreviewTitleBar';
 import CodeExample from './CodeExample';
@@ -121,22 +122,43 @@ class Preview extends Component {
     this.setState({
       isCodeShown: !this.state.isCodeShown,
     });
+
+    ReactGA.event({
+      category: 'Preview',
+      action: 'toggleCode',
+    });
   }
 
   handleToggleInteract() {
     this.setState({
       showInteract: !this.state.showInteract,
     });
+
+    ReactGA.event({
+      category: 'Preview',
+      action: 'toggleInteract',
+    });
   }
 
   handlePreviewBackground = previewBackground => {
     this.setState({ previewBackground });
+
+    ReactGA.event({
+      category: 'Preview',
+      action: 'changeBackground',
+      label: previewBackground.label,
+    });
   };
 
   handleToggleFullscreen() {
     this.setState({
       isFullscreen: !this.state.isFullscreen,
     });
+
+    ReactGA.event({
+      category: 'Preview',
+      action: 'toggleFullscreen',
+    });
   }
 
   return;