From 0efc25a5c119ce464cb1b6eb0871ef513b653269 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 15 Feb 2018 15:55:24 -0800 Subject: [PATCH 1/5] 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 = `${site.title}`; return new Handlebars.SafeString(headerBoilerplate); }, - googleAnalytics () { - const googleApiKey = analytics.googleId; - const gaCode = ``; - return new Handlebars.SafeString(gaCode); - }, + // googleAnalytics () { + // const googleApiKey = analytics.googleId; + // const gaCode = ``; + // 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 }) => ( - - - - - - + + + + + + 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 ; + }; + }; + + 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 @@ - - {{ googleAnalytics }} {{{ 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 @@ - - - - {{ placeCommonHeaderTags }} - - {{#unless claimInfo.nsfw}} - {{{addTwitterCard claimInfo }}} - {{{addOpenGraph claimInfo }}} - {{/unless}} - - {{ googleAnalytics }} - - - - {{{ body }}} - - - From 9a3e9cad6a288ebca265dcfdb28c23850cca2007 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 15 Feb 2018 17:04:49 -0800 Subject: [PATCH 2/5] wrapped routes in GAListener --- react/components/GAListener/index.js | 25 +++++++++++++++++++++++++ react/root.js | 20 +++++++++++--------- 2 files changed, 36 insertions(+), 9 deletions(-) create mode 100644 react/components/GAListener/index.js diff --git a/react/components/GAListener/index.js b/react/components/GAListener/index.js new file mode 100644 index 00000000..c66d1f94 --- /dev/null +++ b/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 = 'UA-60403362-3'; // 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); diff --git a/react/root.js b/react/root.js index 38d3b49d..c4350ea9 100644 --- a/react/root.js +++ b/react/root.js @@ -2,8 +2,8 @@ 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 GAListener from 'components/GAListener'; import PublishPage from 'components/PublishPage'; import AboutPage from 'components/AboutPage'; import LoginPage from 'containers/LoginPage'; @@ -13,14 +13,16 @@ import FourOhFourPage from 'components/FourOhFourPage'; const Root = ({ store }) => ( - - - - - - - - + + + + + + + + + + ); From ec4669d0580eb5c7e04a7ff3b074f87d85f27782 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 15 Feb 2018 18:04:38 -0800 Subject: [PATCH 3/5] removed ga util --- react/utils/googleAnalytics.js | 39 ---------------------------------- 1 file changed, 39 deletions(-) delete mode 100644 react/utils/googleAnalytics.js diff --git a/react/utils/googleAnalytics.js b/react/utils/googleAnalytics.js deleted file mode 100644 index 4444b3e6..00000000 --- a/react/utils/googleAnalytics.js +++ /dev/null @@ -1,39 +0,0 @@ -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 ; - }; - }; - - return HOC; -}; - -export default withAnalytics; From 08e6e2cacd37ef4e1a3bc1667c91d536572f60b4 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 15 Feb 2018 18:05:20 -0800 Subject: [PATCH 4/5] removed dead handlebars GA code --- helpers/handlebarsHelpers.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/helpers/handlebarsHelpers.js b/helpers/handlebarsHelpers.js index e6062ed7..5e857070 100644 --- a/helpers/handlebarsHelpers.js +++ b/helpers/handlebarsHelpers.js @@ -63,16 +63,6 @@ module.exports = { const headerBoilerplate = `${site.title}`; return new Handlebars.SafeString(headerBoilerplate); }, - // googleAnalytics () { - // const googleApiKey = analytics.googleId; - // const gaCode = ``; - // return new Handlebars.SafeString(gaCode); - // }, addOpenGraph (claim) { const { ogTitle, ogDescription, showUrl, source, ogThumbnailContentType } = createOpenGraphDataFromClaim(claim, claimDefaults.defaultTitle, claimDefaults.defaultDescription); const thumbnail = claim.thumbnail; From d02e59afd638c04d91d3f849f85d33edded1515f Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 15 Feb 2018 18:08:53 -0800 Subject: [PATCH 5/5] plugged config file in for ga code --- react/components/GAListener/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/components/GAListener/index.js b/react/components/GAListener/index.js index c66d1f94..f388e2a0 100644 --- a/react/components/GAListener/index.js +++ b/react/components/GAListener/index.js @@ -1,8 +1,8 @@ import React from 'react'; import GoogleAnalytics from 'react-ga'; import { withRouter } from 'react-router-dom'; -// const config = require('../../../../config/speechConfig.js'); -const googleApiKey = 'UA-60403362-3'; // config.analytics.googleId; +const config = require('../../../config/speechConfig.js'); +const googleApiKey = config.analytics.googleId; GoogleAnalytics.initialize(googleApiKey);