React Google Analytics

Motivation

I needed google analytics working in combination with react-router.

Install

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.

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.

import{BrowserRouter}from'react-g-analytics';exportdefaultfunctionMyComponent(){return(<BrowserRouterid="UA-*******-**">
... your application
<BrowserRouter>
);
}>

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)

varReact=require('react');varGoogleAnalytics=require('react-g-analytics');varApp=module.exports=React.createClass({render: function(){return(<divid="application"><GoogleAnalyticsid="UA-*******-**"/><RouteHandler/></div>);}});

routes.jsx

Define your routes here.

varReact=require('react');varRouter=require('react-router');varRoute=Router.Route;varDefaultRoute=Router.DefaultRoute;varIndex=require('./Index.jsx');varApp=require('./App.jsx');varroutes=module.exports=(<Routehandler={App}name="index"path="/"><DefaultRoutehandler={Index}/></Route>);

client.js

Here is a simple client side

varReact=require('react');varapp=require('./App.jsx');varroutes=require('./routes.jsx');varrouter=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:

varReact=require('react');varGoogleAnalytics=require('react-g-analytics');varRouteHandler=require('react-router').RouteHandler;varset={anonymizeIp: true};varApp=module.exports=React.createClass({render: function(){return(<divid="application"><GoogleAnalyticsid="UA-*******-**"set={set}/><RouteHandler/></div>);}});

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
• Forms react-form-controlled
• Google AdSense via Google Publisher Tag react-google-publisher-tag

Support us

Star this project on GitHub.

Credits

Zlatko Fedor

License

The MIT License (MIT)

Copyright (c) 2016 Zlatko Fedor zlatkofedor@cherryprojects.com