Merge pull request #353 from lbryio/352-react-ga-pageviews

352 react ga pageviews

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,6 @@ 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);
-  },
   addOpenGraph (claim) {
     const { ogTitle, ogDescription, showUrl, source, ogThumbnailContentType } = createOpenGraphDataFromClaim(claim, claimDefaults.defaultTitle, claimDefaults.defaultDescription);
     const thumbnail = claim.thumbnail;
@@ -120,28 +110,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);
-    }
-  },
 };

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",

react/components/GAListener/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import GoogleAnalytics from 'react-ga';
+import { withRouter } from 'react-router-dom';
+const config = require('../../../config/speechConfig.js');
+const googleApiKey = config.analytics.googleId;
+
+GoogleAnalytics.initialize(googleApiKey);
+
+class GAListener extends React.Component {
+  componentDidMount () {
+    this.sendPageView(this.props.history.location);
+    this.props.history.listen(this.sendPageView);
+  }
+
+  sendPageView (location) {
+    GoogleAnalytics.set({ page: location.pathname });
+    GoogleAnalytics.pageview(location.pathname);
+  }
+
+  render () {
+    return this.props.children;
+  }
+}
+
+export default withRouter(GAListener);

react/root.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
+import GAListener from 'components/GAListener';
 import PublishPage from 'components/PublishPage';
 import AboutPage from 'components/AboutPage';
 import LoginPage from 'containers/LoginPage';
@@ -12,14 +13,16 @@ import FourOhFourPage from 'components/FourOhFourPage';
 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} />
-      </Switch>
+      <GAListener>
+        <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} />
+        </Switch>
+      </GAListener>
     </BrowserRouter>
   </Provider>
 );

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 }}}

views/layouts/showlite.handlebars

@@ -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>
-