The simple form to use react-ga module
npm install @arranjae/react-analytics
React Analytics Module



- react-ga - React Google Analytics Module
- React.js >= 16.3.0 (new context API + forward ref)
npm install @arranjae/react-analytics
or
yarn add @arranjae/react-analytics
or in the browser (global variable ReactAnalytics):
``html`
Set the user google Analytics hooks
This tracker is used in client-side, but you need use AnalyticsProvider to import module and to become available in your page.
Use ReactGA and yourConfig inside AppContext using React hooks.
`jsx`
const [analytics, config] = useAnalytics();
React hooks are available starting from React 16.8
Reference to module before initialized in provider component
Javascript object passed in provider with your configs
Give access to your ReactGA implementation anywhere. Add the following props to your component:
- reactGA: ReactGA implementation to execute events (event, pageView, ecommerce, etc.) >> see documentation (https://www.npmjs.com/package/react-ga)
- config: Optional - Javascript object with your configs |
ex. {trackerName: 'MyTracker', trackerId: 'UA-000000-00}.
Your original static properties will be hoisted on the returned component. You can also access the original component by using the WrappedComponent static property. Example:
`jsx`
function MyComponent() {
return null;
}
const NewComponent = withAnalytics(MyComponent);
NewComponent.WrappedComponent === MyComponent;
This is 'react-ga' module
`js
// Root.jsx
import React from 'react';
import App from './App';
import { AnalyticsProvider } from '@arranjae/react-analytics';
export default function Root() {
const config = {
trackerName: 'AnalyticsTracker',
trackerId: 'UA-000000-00',
};
const options = {
debug: process.env.NODE_ENV !== 'production',
testMode: process.env.NODE_ENV === 'test',
alwaysSendToDefaultTracker: false,
};
return (
);
}
`
`js
// App.jsx
import React from 'react';
import { useAnalytics } from '@arranjae/react-analytics';
import NameForm from './NameForm';
function App() {
const [analytics, config] = useAnalytics();
analytics.pageView('/');
return (
export default App;
`
`js
// Root.jsx
import React from 'react';
import App from './App';
import { AnalyticsProvider } from '@arranjae/react-analytics';
export default function Root() {
const config = {
trackerName: 'AnalyticsTracker',
trackerId: 'UA-000000-00',
};
const options = {
debug: process.env.NODE_ENV !== 'production',
testMode: process.env.NODE_ENV === 'test',
alwaysSendToDefaultTracker: false,
};
return (
);
}
`
`js
// App.jsx
import React, { Component } from 'react';
import { instanceOf, shape } from 'prop-types';
import { withAnalytics, Analytics } from '@arranjae/react-analytics';
class App extends Component {
static propTypes = {
analytics: instanceOf(Analytics).isRequired,
config: shape({}).isRequired,
};
constructor(props) {
super(props);
const { analytics, config } = props;
this.analytics = analytics;
this.config = config;
}
componentDidMount() {
this.analytics.pageView('/', [this.config.trackerName], 'Page Name');
}
render() {
return (
export default withAnalytics(App);
`
`js
// src/components/App.js
import React from 'react';
import { useAnalytics } from '@arranjae/react-analytics';
function App() {
const [analytics, config] = useAnalytics();
analytics.pageView('/', [config.trackerName]); // this option "config.tracker" is optional when has one tracker
analytics.event(
{
category: 'enter-page',
action: 'use react-analytics',
},
[config.trackerName]
);
return (
export default App;
`
`js
// src/server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { AnalyticsProvider } from '@arranjae/react-analytics';
import Html from './components/Html';
import App from './components/App';
export default function middleware(req, res) {
const config = {
trackerName: 'AnalyticsTracker',
trackerId: 'UA-000000-00',
};
const options = {
debug: process.env.NODE_ENV !== 'production',
testMode: process.env.NODE_ENV === 'test',
alwaysSendToDefaultTracker: false,
};
const markup = ReactDOMServer.renderToString(
);
const html = ReactDOMServer.renderToStaticMarkup(
); res.send('' + html);
}
`
`js
// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AnalyticsProvider } from '@arranjae/react-analytics';
import App from './components/App';
const appEl = document.getElementById('main-app');
const config = {
trackerName: 'AnalyticsTracker',
trackerId: 'UA-000000-00',
};
const options = {
debug: process.env.NODE_ENV !== 'production',
testMode: process.env.NODE_ENV === 'test',
alwaysSendToDefaultTracker: false,
};
ReactDOM.render(
appEl
);
``