ReactGA Custom Hook

First install ReactGA

npm install react-ga --save

After install, add react-ga in your project, you can do the configuration whatever you want, here is just an example in index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactGA from 'react-ga';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactGA.initialize('UA-#########-#');

ReactDOM.render(<App />, document.getElementById('root'));

The hook code

The hook code folder/file example utils/googleAnalytics.js.

import { useEffect } from 'react';
import ReactGA from 'react-ga';

export const makePageView = (pageName) => 
 ReactGA.pageview(pageName);

export const useAnalytics = pageName =>
  useEffect(() => {
    makePageView(pageName);
  }, [pageName]);

Using in some component

import React from 'react';
import { useAnalytics } from 'utils/googleAnalytics';

const SomePageComponent = () => {
 useAnalytics('some-page');
 return(...)
}

Tests

To make sure that your tests don't break, add this clearAnalytics function.

export const clearAnalytics = () => {
  ReactGA.initialize('dummy', { testMode: true });
  ReactGA.testModeAPI.resetCalls();
};

describe('SomePageComponent test', () => {
  beforeEach(() => {
    clearAnalytics();
    ...
  });

Why do it that way?

Doing it this way can be a bit more work, but we can have more control and add specific behaviors for the component, for example I would like to make a metric of how long the user stayed on the page, we could put this treatment in the unmount of our hook who will know when the component is unmounted.

export const useAnalytics = pageName =>
  useEffect(() => {
    makePageView(pageName);
    return () => getPageTime(pageName);
  }, [pageName]);

Conclusion

The possibilities of increasing this hook are almost endless, I demonstrated it this way because I found it simpler, I hope I helped in something.