From 0efc25a5c119ce464cb1b6eb0871ef513b653269 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 15 Feb 2018 15:55:24 -0800
Subject: [PATCH] added google-ga package

---
 helpers/handlebarsHelpers.js      | 46 ++++++++-----------------------
 package.json                      |  1 +
 react/root.js                     | 13 +++++----
 react/utils/googleAnalytics.js    | 39 ++++++++++++++++++++++++++
 views/layouts/main.handlebars     |  2 --
 views/layouts/showlite.handlebars | 18 ------------
 6 files changed, 58 insertions(+), 61 deletions(-)
 create mode 100644 react/utils/googleAnalytics.js
 delete mode 100644 views/layouts/showlite.handlebars

diff --git a/helpers/handlebarsHelpers.js b/helpers/handlebarsHelpers.js
index d660a600..e6062ed7 100644
--- a/helpers/handlebarsHelpers.js
+++ b/helpers/handlebarsHelpers.js
@@ -1,5 +1,5 @@
 const Handlebars = require('handlebars');
-const { site, analytics, claim: claimDefaults } = require('../config/speechConfig.js');
+const { site, claim: claimDefaults } = require('../config/speechConfig.js');
 
 function determineOgTitle (storedTitle, defaultTitle) {
   return ifEmptyReturnOther(storedTitle, defaultTitle);
@@ -63,16 +63,16 @@ module.exports = {
     const headerBoilerplate = `<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>${site.title}</title><link rel="stylesheet" href="/assets/css/reset.css" type="text/css"><link rel="stylesheet" href="/assets/css/general.css" type="text/css"><link rel="stylesheet" href="/assets/css/mediaQueries.css" type="text/css">`;
     return new Handlebars.SafeString(headerBoilerplate);
   },
-  googleAnalytics () {
-    const googleApiKey = analytics.googleId;
-    const gaCode = `<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-        ga('create', '${googleApiKey}', 'auto');
-        ga('send', 'pageview');</script>`;
-    return new Handlebars.SafeString(gaCode);
-  },
+  // googleAnalytics () {
+  //   const googleApiKey = analytics.googleId;
+  //   const gaCode = `<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  //       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  //       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  //       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  //       ga('create', '${googleApiKey}', 'auto');
+  //       ga('send', 'pageview');</script>`;
+  //   return new Handlebars.SafeString(gaCode);
+  // },
   addOpenGraph (claim) {
     const { ogTitle, ogDescription, showUrl, source, ogThumbnailContentType } = createOpenGraphDataFromClaim(claim, claimDefaults.defaultTitle, claimDefaults.defaultDescription);
     const thumbnail = claim.thumbnail;
@@ -120,28 +120,4 @@ module.exports = {
       return new Handlebars.SafeString(`${basicTwitterTags} ${twitterCard}`);
     }
   },
-  ifConditional (varOne, operator, varTwo, options) {
-    switch (operator) {
-      case '===':
-        return (varOne === varTwo) ? options.fn(this) : options.inverse(this);
-      case '!==':
-        return (varOne !== varTwo) ? options.fn(this) : options.inverse(this);
-      case '<':
-        return (varOne < varTwo) ? options.fn(this) : options.inverse(this);
-      case '<=':
-        return (varOne <= varTwo) ? options.fn(this) : options.inverse(this);
-      case '>':
-        return (varOne > varTwo) ? options.fn(this) : options.inverse(this);
-      case '>=':
-        return (varOne >= varTwo) ? options.fn(this) : options.inverse(this);
-      case '&&':
-        return (varOne && varTwo) ? options.fn(this) : options.inverse(this);
-      case '||':
-        return (varOne || varTwo) ? options.fn(this) : options.inverse(this);
-      case 'mod3':
-        return ((parseInt(varOne) % 3) === 0) ? options.fn(this) : options.inverse(this);
-      default:
-        return options.inverse(this);
-    }
-  },
 };
diff --git a/package.json b/package.json
index 55bf9ddd..96861b3f 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-ga": "^2.4.1",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
diff --git a/react/root.js b/react/root.js
index 86c1f53d..38d3b49d 100644
--- a/react/root.js
+++ b/react/root.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import withAnalytics from 'utils/googleAnalytics';
 
 import PublishPage from 'components/PublishPage';
 import AboutPage from 'components/AboutPage';
@@ -13,12 +14,12 @@ const Root = ({ store }) => (
   <Provider store={store}>
     <BrowserRouter>
       <Switch>
-        <Route exact path="/" component={PublishPage} />
-        <Route exact path="/about" component={AboutPage} />
-        <Route exact path="/login" component={LoginPage} />
-        <Route exact path="/:identifier/:claim" component={ShowPage} />
-        <Route exact path="/:claim" component={ShowPage} />
-        <Route component={FourOhFourPage} />
+        <Route exact path="/" component={withAnalytics(PublishPage)} />
+        <Route exact path="/about" component={withAnalytics(AboutPage)} />
+        <Route exact path="/login" component={withAnalytics(LoginPage)} />
+        <Route exact path="/:identifier/:claim" component={withAnalytics(ShowPage)} />
+        <Route exact path="/:claim" component={withAnalytics(ShowPage)} />
+        <Route component={withAnalytics(FourOhFourPage)} />
       </Switch>
     </BrowserRouter>
   </Provider>
diff --git a/react/utils/googleAnalytics.js b/react/utils/googleAnalytics.js
new file mode 100644
index 00000000..4444b3e6
--- /dev/null
+++ b/react/utils/googleAnalytics.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import GoogleAnalytics from 'react-ga';
+const config = require('../../config/speechConfig.js');
+const googleApiKey = config.analytics.googleId;
+
+GoogleAnalytics.initialize(googleApiKey);
+
+const withAnalytics = (WrappedComponent, options = {}) => {
+  const trackPage = page => {
+    GoogleAnalytics.set({
+      page,
+      ...options,
+    });
+    GoogleAnalytics.pageview(page);
+  };
+
+  const HOC = class extends React.Component {
+    componentDidMount () {
+      const page = this.props.location.pathname;
+      // track initial page
+      trackPage(page);
+    };
+    componentWillReceiveProps (nextProps) {
+      const currentPage = this.props.location.pathname;
+      const nextPage = nextProps.location.pathname;
+      // track each new page
+      if (currentPage !== nextPage) {
+        trackPage(nextPage);
+      }
+    };
+    render () {
+      return <WrappedComponent {...this.props} />;
+    };
+  };
+
+  return HOC;
+};
+
+export default withAnalytics;
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 09068747..18122a33 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -12,8 +12,6 @@
 	<meta property="og:description" content="Open-source, decentralized image and video sharing." />
     <!--google font-->
     <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
-	<!-- google analytics -->
-	{{ googleAnalytics }}
 </head>
 <body id="main-body">
     {{{ body }}}
diff --git a/views/layouts/showlite.handlebars b/views/layouts/showlite.handlebars
deleted file mode 100644
index 632e1a83..00000000
--- a/views/layouts/showlite.handlebars
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
-<head>
-    {{ placeCommonHeaderTags }}
-	<meta property="fb:app_id" content="1371961932852223">
-    {{#unless claimInfo.nsfw}}
-        {{{addTwitterCard claimInfo }}}
-        {{{addOpenGraph claimInfo }}}
-    {{/unless}}
-	<!-- google analytics -->
-	{{ googleAnalytics }}
-</head>
-<body id="showlite-body">
-    <script src="/assets/js/assetConstructor.js"></script>
-    {{{ body }}}
-</body>
-</html>
-