Google Tag Manager and Universal Analytics for React
Thin wrapper and React component for including Google Tag Manager or Universal Analytics in a React project.
Usage
For running with Google Tag Manager, wrap the root element in the GtagProvider
setting the id
with your Google Tag Manager id and setting useTagManager
to true
:
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { GtagProvider } from '@nullunit/react-gtm';
const GTM_ID = 'GTM-12345';
const MY_APP_NAME = 'My great app'; //Optional
const MY_APP_VERSION = '3.1.2'; //Optional
const ROOT = (
<GtagProvider id={ GTM_ID } appName={ MY_APP_NAME } appVersion={ MY_APP_VERSION } useTagManager={ true }>
<BrowserRouter>
<App />
</BrowserRouter>
</GtagProvider>
);
Modal.setAppElement('#root');
ReactDOM.render(ROOT, document.getElementById('root'));
registerServiceWorker();
Now, you can either inject the GtagContext
using withGtag
(for React components) or get the context directly via getGtagContext
singleton (for non-React items).
import { withGtag, getGtagContext } from './index';
...
//for React components
class MyComponent extends React.Component {
componentDidMount() {
const { gtag } = this.props;
gtag.event('ProjectLoaded', { 'projectId': '...' });
}
render() {
return `<h1>...</h1>`;
}
}
export withGtag(MyComponent);
...
//from outside React context
const gtag = getGtagContext();
gtag.event('ProjectCreated', { 'projectId': '...' });