This is a JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase. It does not currently use any React code internally, but has been written for use with a number of Mozilla Foundation websites that are using React, as a way to standardize our GA Instrumentation across projects.

It is designed to work with the latest version of Google Analytics, Univeral Analytics. At this point, all Google Analytics projects are being upgraded to Universal Analytics, so this module will not support the older ga.js implementation.

This module is mildly opinionated in how we instrument tracking within our front-end code. Our API is slightly more verbose than the core Google Analytics library, in the hope that the code is easier to read and understand for our engineers. See examples below.

If you use react-ga too, we'd love your feedback. Feel free to file issues, ideas and pull requests against this repo.

npm install react-ga

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;

...

var ga = require('react-ga');

...

exports.run = function(location, el) {
  ga.initialize(process.env.GA_TRACKING_ID);
  Router.run(routes, location, function(Handler, state) {
    ga.pageview(state.pathname);
    React.render(<Handler/>, el);
  });
};

GA must be initialized using this function before any of the other tracking functions will record any data.

var options = { debug: true, gaOptions: {userId: 123} };
ga.initialize('UA-000000-01', options);

See example above for use with react-router.

ga.pageview('/about/contact-us');

See example above for use with react-router.

A modal view is often an equivilent to a pageview in our UX, but without a change in URL that would record a standard GA pageview. For example, a 'contact us' modal may be accessible from any page in a site, even if we don't have a standalone 'contact us' page on it's own URL. In this scenario, the modalview should be recorded using this function.

ga.modalview('/about/contact-us');

Tracking in-page event interactions is key to understanding the use of any interactive web property. This is how we record user interactions that don't trigger a change in URL.

ga.event( { category: 'User',
            action: 'Created an Account' } );

ga.event( { category: 'Social',
            action: 'Rated an App',
            value: 3 } );

ga.event( { category: 'Editing',
            action: 'Deleted Component',
            label: 'Game Widget' } );

ga.event( { category: 'Promotion',
            action: 'Displayed Promotional Widget',
            label: 'Homepage Thing',
            nonInteraction: true } );

Tracking links out to external URLs (including id.webmaker.org for oAuth2 login flow).

ga.outboundLink( { label: 'Clicked Create an Account' },
                    function () {
                      console.log('redirect here');
                    } );

• node.js
• npm
• npm install --global gulp

npm test

• Always work on a new branch
• Submit Pull Requests against master

1. Open a PR
2. Request code review
3. Complete code review with fixes
4. Merge the PR
5. Then, bump the version as below

The regenerated dist files should not be committed until the review has been R+'d and merged, since it's much easier to do the code review without the dist clutter getting in the way.

git pull...
gulp build
mversion patch
git add .
git commit...
git push...
npm publish

• Quite a lot of the code in this repo, came from webmaker-analytics