Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/goodmodule/react-g-analytics
React google analytics with support for react-router
https://github.com/goodmodule/react-g-analytics
google-analytics javascript react react-ganalytics
Last synced: about 2 months ago
JSON representation
React google analytics with support for react-router
- Host: GitHub
- URL: https://github.com/goodmodule/react-g-analytics
- Owner: goodmodule
- License: mit
- Created: 2015-02-21T22:29:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-29T08:00:24.000Z (over 4 years ago)
- Last Synced: 2024-06-18T21:48:21.684Z (5 months ago)
- Topics: google-analytics, javascript, react, react-ganalytics
- Language: JavaScript
- Size: 55.7 KB
- Stars: 116
- Watchers: 10
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: History.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Google Analytics
[![NPM version][npm-image]][npm-url]
[npm-image]: https://img.shields.io/npm/v/react-g-analytics.svg?style=flat-square
[npm-url]: https://www.npmjs.com/react-g-analytics
[github-url]: https://github.com/seeden/react-g-analytics
## Motivation
I needed google analytics working in combination with react-router.
## Install
```sh
npm install react-g-analytics
```
## Features
* Automatically load google analytics scripts (optional - id parameter)
* Automatically send pageview when user will change current route of react-router
# Support us
Star this project on [GitHub][github-url].
## Notice
Use version 0.3.x of the react-g-analytics if you want to use it with react-router 4.x
Use version 0.2.x of the react-g-analytics if you want to use it with react-router 2.x or 3.x
## Usage
### Example react-router 4.x
User BrowserRouter from react-g-analytics instead of react-router.
```js
import { BrowserRouter } from 'react-g-analytics';
export default function MyComponent() {
return (
... your application
);
}
>
```
### Example react-router 3.x and bellow
### App.jsx
Application part (load google analytics script to your webpage on the client side).
ReactGAnalytics has parameter ID (use your own ID)
```js
var React = require('react');
var GoogleAnalytics = require('react-g-analytics');
var App = module.exports = React.createClass({
render: function() {
return (
);
}
});
```
### routes.jsx
Define your routes here.
```js
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var Index = require('./Index.jsx');
var App = require('./App.jsx');
var routes = module.exports = (
);
```
### client.js
Here is a simple client side
```js
var React = require('react');
var app = require('./App.jsx');
var routes = require('./routes.jsx');
var router = Router.create({
routes: routes
});
router.run(function(Handler, state) {
React.render(React.createElement(Handler, {}), node);
});
```
## Set
If you want to set google analytics parameters after load you can use property named set. Here is small example:
```js
var React = require('react');
var GoogleAnalytics = require('react-g-analytics');
var RouteHandler = require('react-router').RouteHandler;
var set = {
anonymizeIp: true
};
var App = module.exports = React.createClass({
render: function() {
return (
);
}
});
```
## Skip loading google analytics scripts
If you are loading the GA in different way. You can skip autoload of the GA script simply:
Do not enter your google analytics ID as parameter.
## Try our other React components
- Translate your great project [react-translate-maker](https://github.com/CherrySoftware/react-translate-maker)
- Forms [react-form-controlled](https://github.com/seeden/react-form-controlled)
- Google AdSense via Google Publisher Tag [react-google-publisher-tag](https://github.com/seeden/react-google-publisher-tag)
# Support us
Star this project on [GitHub][github-url].
## Credits
[Zlatko Fedor](http://github.com/seeden)
## License
The MIT License (MIT)
Copyright (c) 2016 Zlatko Fedor [email protected]