25

I've been spending a bit of time developing an MVP at quickcypher.com. I wanted to start putting in some analytics, and it worked great for just tracking total visits, but things went south when I tried to track different URLs on my site that uses React Router.

My approach was this: Setup a GA tag that fires on some pages, using a trigger for a custom "pageview" event. When things did fire, I would set the field page to "/rap" for example. I was firing the event in the "componentDidMount" method of the top level component for each of my views. Using the debugger, I saw the event fire as expected, but for the life of me I can't get GA to acknowledge the event. GA works as expected when I simplify the tag to fire on "all pages", so I'm assuming it has something to do with React.

Has anyone successfully implemented this or run into similar problems? Is my approach all wrong? Hoping for some guidance...cheers!

Improve this question

2 Answers 2

Reset to default
82

A bit late to the party here, but react router should need no special code to integrate with GTM. Just drop the GTM script on your page (immediately after the opening <body> tag as recommended) and let your app run as normal.

In GTM create a custom trigger for history change.

GTM Trigger Example

You can fire it on all history changes.

all history changes

Or only on some of them. Only on your production hostname, for example.

only on production

Then add a tag for your google analytics (or whatever) and configure it to fire on your history change event by clicking "More" under "Fire On" and selecting the trigger created above.

GA Example

It's also important to change the Advanced Settings of our tag to fire once per event instead of once per page. Without this, the tag will only fire on the initial page load.

once per event

Improve this answer
5
  • This should be the accepted answer. Simple and it works. If you want a more complicated example with events and stuff then that's a whole other story.
    – kjonsson
    Commented Jun 7, 2016 at 19:27
  • @doublecheeseburger you can do events all in GTM as well, but it can get pretty cumbersome.
    – chrisguitarguy
    Commented Jul 5, 2016 at 16:20
  • @chrisguitarguy On change history, react goes to server (ajax) and update page after results are returned from server. But before that, the history change fires and the tag code is executed. How can we handle such situation and wait untill react has updated the page?
    – Waqas Malik
    Commented Jul 13, 2017 at 8:59
  • 1
    @WaqasMalik I'd recommend using the GTM Data Layer (just a global array) and pushing in a custom event that can be listened for to trigger GA (or any other tag) in GTM.
    – chrisguitarguy
    Commented Sep 13, 2017 at 13:28
  • 4
    This doesn't seem to trigger on page load. I believe both the All Pages and History Change need to be enabled.
    – Gabriel R.
    Commented Apr 17, 2019 at 10:58
7

This could be due to misconfiguration of your google analytics account, but assuming that you can fire the initial pageview event back to GA, here is a recipe that taps into react-router's willTransitionTo hook. It also uses react-google-analytics. First npm install react-google-analytics.

Then configure your app like so:

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var ga = require('react-google-analytics');
var GAInitiailizer = ga.Initializer;

// some components mapped to routes
var Home = require('./Home');
var Cypher = require('./Cypher');

var App = React.createClass({
  mixins: [Router.State],
  statics: {
    willTransitionTo: function(transition, params, query, props) {
      // log the route transition to google analytics
      ga('send', 'pageview', {'page': transition.path});
    }
  },
  componentDidMount: function() {
    var GA_TRACKING_CODE = 'UA-xxxxx';
    ga('create', GA_TRACKING_CODE);
    ga('send', 'pageview');
  },
  render: function() {
    return (
      <div>
        <RouteHandler />
        <GAInitiailizer />
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={App} >
    <DefaultRoute handler={Home} />
    <Route name="cypher" path="/cypher" handler={Cypher} />
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.body);
});

module.exports = App;
Improve this answer
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.