React-redux-universal-hot-example: The best practices to integrate the google analytics

Created on 10 Dec 2015 · 9Comments · Source: erikras/react-redux-universal-hot-example

i.e. the best place to copy this code:

<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXX-X', 'auto');
  ga('send', 'pageview');

</script>

I tried to copy this code into html.js. But I got some errors.

Source

snowcxt

Most helpful comment

Following @sseppola 's suggestion, I incorporated the mozilla react gem. The directions aren't super up to date: it still references Router.run, which I believe is pre react-router v1.0.

So I looked at suggestions from @criagrich, which were rather golden.
https://github.com/mozilla/react-ga/issues/38

It had to be somewhat updated for this template, so I'll show my code here, if it's helpful.

Make sure you require 'react-ga' up top. This is in the create.js file.

import ga from 'react-ga';

Inside of the create store function, add the following and change the const middleware line

  function logPathChange({ getState }) {
    return (next) =>
      (action) => {

        if (action.type == '@@router/UPDATE_LOCATION'){
           console.info(`Route Changed: ${action.payload.pathname}`);
           ga.pageview(action.payload.pathname);
        }

        return next(action);

      };
  }

  const middleware = [createMiddleware(client), reduxRouterMiddleware, logPathChange];

That way, it leverages react router, and correctly reports page changes, unlike when just including the script tag!

Oh and I initialized the ga object in App.js, but sure there a bunch of places that could be fine.

Anyone please let me know if I'm wrong!

rickyPanzer on 3 Mar 2016

👍4

All 9 comments

that's because of JSX, try it like this:

<body>
{/* Google Tag Manager */}
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=UA-XXX-X"
                    height="0" width="0" style={{display: 'none', visibility: 'hidden'}}></iframe></noscript>
  <script dangerouslySetInnerHTML={{__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','UA-XXX-X');`}} charSet="UTF-8"/>
{/* End Google Tag Manager */}
</body>

davidecantoni on 10 Dec 2015

❤4

It works. I also try to copy the code into client.js, like:

/*eslint-disable */
(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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxx-x', 'auto');
ga('send', 'pageview');
/*eslint-enable */

Which one is better?

snowcxt on 10 Dec 2015

i would suggest to keep the code inside html.js.

davidecantoni on 11 Dec 2015

This is useful but since this starter is largely an SPA after the initial load, I've found it useful to create some GA helpers that can be fired manually.
See https://github.com/Whoaa512/list-share/blob/develop/src%2Fhelpers%2Fanalytics.js and the assoicated https://github.com/Whoaa512/list-share/blob/develop/src%2Fhelpers%2FHtml.js for details

Whoaa512 on 15 Dec 2015

👍3

Mozilla has written a GA module for their React front ends that's worth checking out https://github.com/mozilla/react-ga

sseppola on 23 Dec 2015

Following @sseppola 's suggestion, I incorporated the mozilla react gem. The directions aren't super up to date: it still references Router.run, which I believe is pre react-router v1.0.

So I looked at suggestions from @criagrich, which were rather golden.
https://github.com/mozilla/react-ga/issues/38

It had to be somewhat updated for this template, so I'll show my code here, if it's helpful.

Make sure you require 'react-ga' up top. This is in the create.js file.

import ga from 'react-ga';

Inside of the create store function, add the following and change the const middleware line

  function logPathChange({ getState }) {
    return (next) =>
      (action) => {

        if (action.type == '@@router/UPDATE_LOCATION'){
           console.info(`Route Changed: ${action.payload.pathname}`);
           ga.pageview(action.payload.pathname);
        }

        return next(action);

      };
  }

  const middleware = [createMiddleware(client), reduxRouterMiddleware, logPathChange];

That way, it leverages react router, and correctly reports page changes, unlike when just including the script tag!

Oh and I initialized the ga object in App.js, but sure there a bunch of places that could be fine.

Anyone please let me know if I'm wrong!

rickyPanzer on 3 Mar 2016

👍4

What I've also done recently is use Google Tag Manager instead of just plain GA to track SPA page views. In GTM you can create a "Virtual Page Load" that fires on a change to the browser history rather than just a synchronous page load.

jaraquistain on 3 Mar 2016

👍1

require('./scripts/googleTagManager.js');

dennisat on 21 Jul 2017

I'm trying to implement the answer of @rickyPanzer. Finally he says: "Oh and I initialized the ga object in App.js". How do you initialize the ga in App.js?