Adding Google Analytics to your React Application

Adding any kind of tracking to any project always seems to be an afterthought. Generally just before launching, a stakeholder puts their hand up and states that we need to track everything…. Usually resulting in lots of frustrating mutterings from all developers involved.

The above scenario rings too close to home for me. Just last week I was the developer sitting in “that” meeting realising I needed to add tracking to a React based application in record time. Thankfully, things turned out to be extremely easy. The application I was working on wasn’t too complex and was well structured.

This is how I went about it.

The business I was helping uses Google Analytics for all their tracking needs, so we decided to continue with that.

The project relies heavily on npm, so by running the following command I made sure the React-GA Module was saved as a dependency in the package.json file like so:

npm install react-ga --save

Having now installed React-GA it was time to import the module into the required file and initialise our unique tracking number.

import ReactGA from 'react-ga';`
ReactGA.initialize('UA-XXXXXXXX'); //Unique Google Analytics tracking number

The next step was to trigger page views with each view trigger. In my case, I needed to hook into the React Router onUpdate method and fire a function that looked at the hash of the URL due to the history setting of the router.

function fireTracking() {
    ReactGA.pageview(window.location.hash);
}

<Router onUpdate={fireTracking} history={hashHistory}>
    ...
</Router>

One thing to note is you may need to adjust the window.location argument you push to the ReactGA.pageview() function. It will really depend how you have set up React Router.

All in all, pretty straight forward. Around 5 line of code.

With all tracking, the more metrics, the better. So with the above being extremely quick to implement I sat down with he marketing team to work on integrating custom events for particular actions within the app.

I’ll save you from the finer details but with the above ground work laid, adding a custom Google Analytics Event within the React application went like this:

Call a function (e.g. handleClick()) within an onClick event that fires a custom event.

import React from 'react';
import ReactGA from 'react-ga';
    
export default class SomeComponent extends React.Component {
    
    handleClick() {
        ReactGA.event({
            category: 'Navigation',
            action: 'Clicked Link',
        });
    }
    
    render() {

        return (
            <div>
                <a onClick={()=>{this.handleClick()}}>Link</a>
            </div>
        );
    }
}

Hopefully the above gives you a little insight into how to go about adding custom events within your React components.

It’s quite a trivial example, but opens the door to lots of possibilities.

Happy tracking!

The post Adding Google Analytics to your React Application appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly