React Google Analytics 4 Module

Integrations

• react-ga4 - React Google Analytics 4 Module

Minimum requirement

react-ga4 @ v2.1+

• React.js >= 16.3.0 (new context API + forward ref)

Getting started

npm install @arranjae/react-analytics

or

yarn add @arranjae/react-analytics

or in the browser (global variable ReactAnalytics):

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.js"></script>
<script crossorigin src="https://unpkg.com/@arranjae/react-analytics/umd/reactAnalytics.min.js"></script>

<AnalyticsProvider />

Initializes Google Analytics 4 (via react-ga4) and makes it available to your app through context.

• trackerInfo: your GA4 Measurement ID ("G-XXXXXXX") or an array of { trackingId, gaOptions?, gtagOptions? } for multiple trackers.
• config: optional. Free-form object you want available alongside the tracker inside useAnalytics()/withAnalytics().
• options: optional. { nonce?, testMode?, gtagUrl?, gaOptions?, gtagOptions? }, forwarded to ReactGA.initialize.

useAnalytics()

Use the react-ga4 instance and your config inside a function component via a React hook.

const [analytics, config] = useAnalytics();

React hooks are available starting from React 16.8

analytics

The react-ga4 instance, already initialized by <AnalyticsProvider />.

config *(optional)

Javascript object passed in provider with your configs

withAnalytics(Component)

Give access to your react-ga4 instance anywhere. Add the following props to your component:

• reactGA: react-ga4 instance to execute events (event, pageview, etc.) >> see documentation (https://www.npmjs.com/package/react-ga4)
• config: Optional - Javascript object with your configs.

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:

function MyComponent() {
  return null;
}
const NewComponent = withAnalytics(MyComponent);
NewComponent.WrappedComponent === MyComponent;

Analytics

Analytics

This is the react-ga4 module.

Simple Example with React hooks

// Root.jsx
import React from 'react';
import App from './App';
import { AnalyticsProvider } from '@arranjae/react-analytics';

export default function Root() {
  const config = {
    trackerName: 'AnalyticsTracker',
  };
  const options = {
    testMode: process.env.NODE_ENV === 'test',
  };

  return (
    <AnalyticsProvider config={config} trackerInfo="G-XXXXXXX" options={options}>
      <App />
    </AnalyticsProvider>
  );
}

// App.jsx
import React from 'react';
import { useAnalytics } from '@arranjae/react-analytics';

function App() {
  const [analytics] = useAnalytics();

  analytics.send({ hitType: 'pageview', page: '/' });

  return (
    <div>
      <h1>Its works!! Look in developer tools yours events</h1>
      <button
        onClick={() => {
          analytics.event({
            category: 'button-event',
            action: 'clicked',
          });
        }}
      >
        click me!
      </button>
    </div>
  );
}

export default App;

Simple Example with Higher-Order Component

// Root.jsx
import React from 'react';
import App from './App';
import { AnalyticsProvider } from '@arranjae/react-analytics';

export default function Root() {
  const config = {
    trackerName: 'AnalyticsTracker',
  };
  const options = {
    testMode: process.env.NODE_ENV === 'test',
  };

  return (
    <AnalyticsProvider config={config} trackerInfo="G-XXXXXXX" options={options}>
      <App />
    </AnalyticsProvider>
  );
}

// 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 = {
    reactGA: instanceOf(Analytics).isRequired,
    config: shape({}).isRequired,
  };

  constructor(props) {
    super(props);

    const { reactGA, config } = props;

    this.analytics = reactGA;
    this.config = config;
  }

  componentDidMount() {
    this.analytics.send({ hitType: 'pageview', page: '/', title: 'Page Name' });
  }

  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.analytics.event({
              category: 'button-event',
              action: 'clicked',
            });
          }}
        >
          click me!
        </button>
      </div>
    );
  }
}

export default withAnalytics(App);

Server-Rendering Example

// src/components/App.js
import React from 'react';
import { useAnalytics } from '@arranjae/react-analytics';

function App() {
  const [analytics] = useAnalytics();

  analytics.send({ hitType: 'pageview', page: '/' });

  analytics.event({
    category: 'enter-page',
    action: 'use react-analytics',
  });

  return (
    <div>
      <h1>It's works!!</h1>
      <button
        onClick={() => {
          analytics.event({
            category: 'button-event',
            action: 'clicked',
          });
        }}
      >
        click me!
      </button>
    </div>
  );
}

export default App;

// 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',
  };
  const options = {
    testMode: process.env.NODE_ENV === 'test',
  };

  const markup = ReactDOMServer.renderToString(
    <AnalyticsProvider config={config} trackerInfo="G-XXXXXXX" options={options}>
      <App />
    </AnalyticsProvider>
  );

  const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />);

  res.send('<!DOCTYPE html>' + html);
}

// 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',
};
const options = {
  testMode: process.env.NODE_ENV === 'test',
};

ReactDOM.render(
  <AnalyticsProvider config={config} trackerInfo="G-XXXXXXX" options={options}>
    <App />
  </AnalyticsProvider>,
  appEl
);