### What is Google Analytics?

Google Analytics (GA) is a data analysis  tools provide by Google. It used to analysis website or app (android / ios). Is the most common data analysis tool in current internet. And it is free.

GA official web site : https://analytics.google.com/analytics/web

### Using GA in React

First we need on add react-ga package into your project :

```sh
npm install react-ga --save
```

Package: https://github.com/react-ga/react-ga

Let's create a new component for Google Analytics :

```js
import React from 'react';

import { withRouter } from 'react-router-dom';

import PropTypes from 'prop-types';

class GoogleAnalytics extends React.Component {
	
	render() {
		return ;
	}
}

// prop types
GoogleAnalytics.propTypes = {
	
	// provide GA tracking id from props
	trackingId: PropTypes.string.isRequired
};

export default withRouter(GoogleAnalytics);
```

Import react-ga to this file :

```js
import ReactGA from 'react-ga';
```
Add a function for notify GA page view action :

```js
updatePageView() {
	
	// read location information from react-router
	var url = this.props.location.pathname + this.props.location.search;
	
	// send url to GA
	ReactGA.pageview(url);
}
```

Add code to `componentDidMount` for initial react-ga module :

```js
componentDidMount() {
	
	// initial react-ga module
	ReactGA.initialize(this.props.trackingId);
	
	// update page view (when first loaded)
	this.updatePageView();
}
```

Add code to `componentDidUpdate` to handle URL change event :

```js
componentDidUpdate(oldProps) {

	// old url
	var oldUrl = oldProps.location.pathname + oldProps.location.search;

	// current url
	var currentUrl = this.props.location.pathname + this.props.location.search;

	// url changed
	if( oldUrl !== currentUrl ) {

		// update page view
		this.updatePageView();
	}
}
```

The final file (GoogleAnalytics.js) output :

```js
import React, { Component } from 'react';

import { withRouter } from 'react-router-dom';

import PropTypes from 'prop-types';

import ReactGA from 'react-ga';

/**
 * google analytics
 */
class GoogleAnalytics extends Component {

	/**
	 * component did mount
	 */
	componentDidMount() {

		// set ga id
		ReactGA.initialize(self.props.trackingId);

		// update page view
		this.updatePageView();
	}

	/**
	 * component did update
	 */
	componentDidUpdate(oldProps) {

		// old url
		var oldUrl = oldProps.location.pathname + oldProps.location.search;

		// current url
		var currentUrl = this.props.location.pathname + this.props.location.search;

		// url changed
		if( oldUrl !== currentUrl ) {

			// update page view
			this.updatePageView();
		}
	}

	/**
	 * update pageview
	 */
	updatePageView() {

		// url
		var url = this.props.location.pathname + this.props.location.search;

		// update page view
		ReactGA.pageview(url);
	}

	/**
	 * render
	 */
	render() {

		return ;
	}
}

// prop types
GoogleAnalytics.propTypes = {

	trackingId: PropTypes.string.isRequired
};

// export
export default withRouter(GoogleAnalytics);
```

### Adding GoogleAnalytics to project

To let GoogleAnalytics works, you need to add an instance as a child under `` component :

```js
import GoogleAnalytics from './components/GoogleAnalytics.js';
```

```js
render() {
	
	

		

		
	
}
```

### Check result

Once your GA setup completed. When you switch page over you site. Your GA current you should be update appropriately. 

![](https://cdn.19site.net/files/31/74/3174678c-78b7-4a1b-834f-3b774223e644.png)